HTML5——多媒体：audio音频、video视频

痛定思痛。 2022-05-11 05:08 860阅读 0赞

1. audio音频标签、video视频标签

70

2. 特性：

（1）autoplay：自动播放；注意：在谷歌浏览器中autoplay有时会失效（其他浏览器没有测试），不知道为什么

（2）controls：显示控件

（3）preload(none、metadata、auto)：预加载

none：不需要预加载；metadata：元数据，比如：时长，比特率，帧大小；auto：浏览器根据自身情况自行加载媒体内容

（4）loop：循环播放

（5）poster（video标签独有属性）：poster 属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。如果未设置该属性，则使用视频的第一帧来代替。

当视频文件不可以用时，用一张图片代替，否则是空白；同时也是视频封面；

当视频出问题时：

70 1

当视频封面时：

70 2

注意：有的移动设备无法加载poster的图片，导致封面黑屏，处理方法：将视频的开头截图，作为封面。

  1. 多类型资源

加载音频的另一种方式，type会让浏览器更快识别audio标签内的资源类型，source是加载资源，mp3格式优先加载，若MP3格式无法加载时，再加载ogg格式的音频

70 3

4. 脚本化

（1）获取dom元素

70 4

（2）创建dom元素

70 5

audio标签可以通过Audio对象来创建，而video标签没有对象

70 6

（3）脚本化中属性的赋值

注意：（1）这里的属性赋值有两种方式

（2）audio和video没有onload事件，所以用window的onload事件。

  1. <script>
  3.         var audio = new Audio();
  4.         var video = document.createElement('video');
  6.         audio.src = './audio.mp3';
  7.         audio.autoplay = true;
  8.         audio.controls = true;
  9.         audio.loop = true;
  10.         audio.preload = 'auto';
  12.         video.src = './video.mp4';
  13.         video.controls = 'controls'; 
  14.         video.autoplay = 'autoplay';
  15.         video.loop = 'loop';
  16.         video.preload = 'auto';
  17.         video.poster = './cover.jpeg';
  18.         window.onload = function(){
  19.             console.log(video);
  20.             video.style.width = '300px';
  21.             video.style.height = '400px';
  22.             document.body.appendChild(video);  
  23.             document.body.appendChild(audio);    
  24.         }
  25.     </script>

70 7

5. 方法：（audio和video都有）

（1）play()：播放

（2）pause()：暂停播放

（3）load()：重置资源，重新加载资源

  1. <body>
  2.         <audio id="audio1" controls>
  3.             <source src="./audio.mp3" type="audio/mpeg">父亲写的散文诗
  4.             <source src="./audio.ogg" type="audio/ogg">神话
  5.         </audio>
  6.         <button id="playBtn">播放</button>
  7.         <button id="pauseBtn">暂停</button>
  8.         <button id="loadBtn">重置</button>
  9.     <script>
  10.         var audio = document.getElementById('audio1');
  11.         playBtn.onclick = function(){
  12.             audio.play();
  13.         }
  14.         pauseBtn.onclick = function(){
  15.             audio.pause();
  16.         }
  17.         loadBtn.onclick = function(){
  18.             audio.load();//重新加载音频、视频资源
  19.         }
  20.     </script>
  21. </body>

70 8

（4）canPlayType()方法：判断该标签在浏览器中是否支持某个格式

70 9

6. 属性（audio和video都有）

（1）volume音量属性

范围：0~1之间，默认是1；

（2）静音属性：muted，若是true，表示静音；若是false，恢复到之间的音量。

  1. <audio id="audio1" controls>
  2.         <source src="./audio.mp3" type="audio/mpeg">父亲写的散文诗
  3.         <source src="./audio.ogg" type="audio/ogg">神话
  4.     </audio>
  5.     <button id="addVolume">音量+</button>
  6.     <button id="reduceVolume">音量-</button>
  7.     <button id="mute">静音</button>
  8.     <script>
  9.         var audio = document.getElementById('audio1');
  10.         var volume = audio.volume; //让volume的值 == 音量的值，但是不是设置音量值。
  11.         volume = Math.round(volume * 10);
  12.         addVolume.onclick = function () {
  13.             if (volume == 10) {
  14.                 return //当音量=1的时候，该函数无效。
  15.             }
  16.             volume += 1;
  17.             audio.volume = volume / 10; //音量设置值
  18.         }
  19.         reduceVolume.onclick = function () {
  20.             if (volume >= 1) {
  21.                 volume -= 1;
  22.             } else {
  23.                 volume = 0;
  24.             }
  25.             audio.volume = volume / 10; //音量设置值
  26.         }
  27.         var count = 0;
  28.         mute.onclick = function () {
  29.             count++;
  30.             if (count % 2 == 1) {
  31.                 audio.muted = true; //静音
  32.             } else {
  33.                 audio.muted = false; //取消静音
  34.             }
  35.         }
  36.     </script>

注意：音量的加减会出现不精准的情况

70 10

注意：音量设置值：audio.volume = volume / 10; //音量设置值

注意：var volume = audio.volume; //让volume的值 == 音量的值，但是不是设置音量值。

注意：音量+ 和音量- 采用了不同的方法。

（3）playbackRate属性：播放速率

该属性值为1.0表示正常播放速率，大于1则表示“快进”，0~1之间表示“慢放”，每个浏览器实现时会有差别。

  1. <body>
  2.     <audio id="audio1" controls>
  3.         <source src="./audio.mp3" type="audio/mpeg">父亲写的散文诗
  4.         <source src="./audio.ogg" type="audio/ogg">神话
  5.     </audio>
  6.     <button id="addPlayRate">速率+</button>
  7.     <button id="reducePlayRate">速率-</button>
  9.     <script>
  10.         var audio = document.getElementById('audio1');
  11.         addPlayRate.onclick = function(){
  12.             audio.playbackRate += 0.1;
  13.             console.log(audio.playbackRate);
  14.         }
  15.         reducePlayRate.onclick = function(){
  16.             audio.playbackRate -= 0.1;
  17.             console.log(audio.playbackRate);
  18.         }
  19.     </script>
  20. </body>

js在计算上会出现小数点的不精准，playbackRate的计算：

70 11

（4）currentTime：设置或获取音频、视频播放的当前位置，可以设置当前播放时间，也可以获取当前播放时间；单位：秒

  1. <body>
  2.     <audio id="audio1" controls>
  3.         <source src="./audio.mp3" type="audio/mpeg">父亲写的散文诗
  4.         <source src="./audio.ogg" type="audio/ogg">神话
  5.     </audio>
  6.     <button id="addCurrentTime">时间+</button>
  7.     <button id="reduceCurrentTime">时间-</button>
  9.     <script>
  10.         var audio = document.getElementById('audio1');
  11.         addCurrentTime.onclick = function(){
  12.             audio.currentTime += 5;
  13.             console.log(audio.currentTime);
  14.         }
  15.         reduceCurrentTime.onclick = function(){
  16.             audio.currentTime -= 5;
  17.             console.log(audio.currentTime);
  18.         }
  19.     </script>
  20. </body>

70 12

（5）duration：返回当前音频、视频的总时长，单位：秒

70 13

（6）played、buffered、seekable

played属性：返回已经播放（看过）的时间段；用户看过的时间段，比如用户跳着看，返回用户看过（播放过）的所有时间段。

返回一个TimeRanges对象：属性length：共有几段；原型上有几个方法：start方法：第n段开始的时间；end方法：第n段结束的时间；单位是秒，起始参数是0。

70 14

70 15

buffered属性：返回当前已经缓冲的时间段，缓存进度条

返回一个TimeRanges对象，和played的方法一样

70 16

seekable属性：返回用户可跳转的时间段

返回一个TimeRanges对象，和上面两个方法一样

70 17

（7）paused、seeking、ended属性：查询媒体播放状态

paused属性：值为true表示：暂停播放；false表示：在播放状态

实例：一个按钮控制播放和暂停：

70 18

seeking属性：播放器正在调到新的播放点，即用户正在拖动播放点时、seeking属性的值始终为true，若用户停止拖动，seeking属性的值为false。

如何监听这个拖动事件呢？

根据时间总长和当前时间的位置，定位小圆点的位置；反之，小圆点的位置，确定当前时间。

ended属性：如果播放器播放完，并且在音频、视频的末端停止了下来，此时的ended属性为true。

用处：提示重播或5秒后播放下一个

7. 事件

（1）play事件：当视频、音频在播放状态时，可以触发该事件

（2）pause事件：当视频、音频在暂停状态时，可以触发该事件

  1. <script>
  2.         var audio = document.getElementById('audio1');
  3.         audio.onplay = function(){
  4.             console.log("正在播放...");
  5.         }
  6.         audio.onpause = function(){
  7.             console.log("暂停播放!!!");
  8.         }
  9.     </script>

70 19

（3）loadedmetadata事件：浏览器获取媒体元数据后触发

（4）loadeddata事件：浏览器加载完成当前帧数据，准备播放时触发（需要兼容IE8）

  1. <script>
  2.         var audio = document.getElementById('audio1');
  3.         audio.onloadedmetadata = function(){
  4.             console.log("浏览器已获取该媒体的元数据");
  5.         }
  6.         audio.onloadeddata = function(){
  7.             console.log("浏览器已获取媒体数据");
  8.         }
  9.     </script>

70 20

注意：loadedmetadata事件先触发

（5）ended事件：当视频、音频播放完成后触发该事件

Media 事件

由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如

发表评论

表情：
评论列表 （有 0 条评论，860人围观）

还没有评论，来说两句吧...

相关阅读

    相关 HTML5音频视频

    1.video 视频元素 属性名称说明  src 视频资源的URL  width 视频宽度  height 视频高度  autoplay 设置后，表示立刻开始播放视

    冷不防冷不防/ 0 赞/ 463 阅读

    相关 HTML5 Video和Audio

    1.视频 video提供了播放，暂停和音量空间来控制视频。 标签之间插入的内容是提供给不支持video元素的浏览器显示的。 video元素支持多个source元素，

    Dear 丶Dear 丶/ 0 赞/ 354 阅读