HTML5 -- 视频音频

最新推荐文章于 2022-01-24 23:25:08 发布

gxgalaxy

最新推荐文章于 2022-01-24 23:25:08 发布

阅读量139

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/gxgalaxy/article/details/108088933

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

- - - - 1.video
      - 2.audio

1.video

HTML5 规定了一种通过 video 元素来包含视频的标准方法。
视频格式
当前video支持三种视频格式

Ogg Firedfox 3.5以上Opera 10.5以上支持，Chrome支持
MPEG 4 IE 9.0以上Chrome Safari3.0以上支持
WebM Firefox 4.0以上Chrome Opera10.6以上支持

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
方法

play	开始播放音频
pause	暂停当前播放的音频

属性

autoplay	设置或返回是否在加载完成后随即播放
controls	设置或返回音频/视频是否显示控件（比如播放/暂停）
loop	设置或返回音频/视频是否应该在结束时重新播放
paused	设置或返回音频/视频是否暂停
played	返回表示音频/视频已经播放部分的TimeRanges对象

例子：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div style="text-align: center;">
    <button onclick="playPause()">播放/暂停</button>
    <button onclick="makeBig()">大</button>
    <button onclick="makeNormal()">中</button>
    <button onclick="makeSmall()">小</button>
    <br>
    <video src="./asset/录制_2020_08_18_12_31_56_545.mp4" width="320" height="240" style="margin-top: 20px" controls="controls" class="video"></video>
  </div>
  <script>
    let myVideo = document.getElementsByClassName('video')[0];
    function playPause(){
      if(myVideo.paused){
        //播放
        myVideo.play();
      } else{
        myVideo.pause();
      }
    }
    function makeBig(){
      myVideo.width = 560;
    }
    function makeNormal(){
      myVideo.width = 320;
    }
    function makeSmall(){
      myVideo.width = 220;
    }
  </script>
</body>
</html>

2.audio

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio元素支持三种音频格式

Ogg Vorbis 支持的浏览器 Firefox3.5 Opera 10.5 Chrome3.0
MP3 支持的浏览器IE9 Chrome3.0 Safari 3.0
Wav 支持的浏览器Firefox3.5 Opera 10.5 Safari 3.0

属性

autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	如果出现该属性，则每当音频结束时重新开始播放。
paused	设置或返回音频/视频是否暂停
played	返回表示音频/视频已经播放部分的TimeRanges对象

例子：
在这里插入图片描述

<audio src="/i/song.ogg" controls="controls">
</audio>

gxgalaxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 -- 视频音频

文章目录1.video2.audio1.videoHTML5 规定了一种通过 video 元素来包含视频的标准方法。视频格式当前video支持三种视频格式Ogg Firedfox 3.5以上Opera 10.5以上支持，Chrome支持MPEG 4 IE 9.0以上Chrome Safari3.0以上支持WebM Firefox 4.0以上Chrome Opera10.6以上支持video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个
复制链接

扫一扫