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

痛定思痛。 2022-05-11 05:08 701阅读 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的图片，导致封面黑屏，处理方法：将视频的开头截图，作为封面。

3. 多类型资源

加载音频的另一种方式，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事件。

![70 7][]

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

（1）play()：播放

（2）pause()：暂停播放

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

<body>
            <audio id="audio1" controls>
                <source src="./audio.mp3" type="audio/mpeg">父亲写的散文诗
                <source src="./audio.ogg" type="audio/ogg">神话
            </audio>
            <button id="playBtn">播放</button>
            <button id="pauseBtn">暂停</button>
            <button id="loadBtn">重置</button>
        <script>
            var audio = document.getElementById('audio1');
            playBtn.onclick = function(){
                audio.play();
            }
            pauseBtn.onclick = function(){
                audio.pause();
            }
            loadBtn.onclick = function(){
                audio.load();//重新加载音频、视频资源
            }
        </script>
    </body>

![70 8][]

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

![70 9][]

**6. 属性（audio和video都有）**

**（1）volume音量属性**

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

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

<audio id="audio1" controls>
            <source src="./audio.mp3" type="audio/mpeg">父亲写的散文诗
            <source src="./audio.ogg" type="audio/ogg">神话
        </audio>
        <button id="addVolume">音量+</button>
        <button id="reduceVolume">音量-</button>
        <button id="mute">静音</button>
        <script>
            var audio = document.getElementById('audio1');
            var volume = audio.volume; //让volume的值 == 音量的值，但是不是设置音量值。
            volume = Math.round(volume * 10);
            addVolume.onclick = function () {
                if (volume == 10) {
                    return //当音量=1的时候，该函数无效。
                }
                volume += 1;
                audio.volume = volume / 10; //音量设置值
            }
            reduceVolume.onclick = function () {
                if (volume >= 1) {
                    volume -= 1;
                } else {
                    volume = 0;
                }
                audio.volume = volume / 10; //音量设置值
            }
            var count = 0;
            mute.onclick = function () {
                count++;
                if (count % 2 == 1) {
                    audio.muted = true; //静音
                } else {
                    audio.muted = false; //取消静音
                }
            }
        </script>

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

![70 10][]

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

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

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

**（3）playbackRate属性：播放速率**

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

<body>
        <audio id="audio1" controls>
            <source src="./audio.mp3" type="audio/mpeg">父亲写的散文诗
            <source src="./audio.ogg" type="audio/ogg">神话
        </audio>
        <button id="addPlayRate">速率+</button>
        <button id="reducePlayRate">速率-</button>
        
        <script>
            var audio = document.getElementById('audio1');
            addPlayRate.onclick = function(){
                audio.playbackRate += 0.1;
                console.log(audio.playbackRate);
            }
            reducePlayRate.onclick = function(){
                audio.playbackRate -= 0.1;
                console.log(audio.playbackRate);
            }
        </script>
    </body>

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

![70 11][]

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

<body>
        <audio id="audio1" controls>
            <source src="./audio.mp3" type="audio/mpeg">父亲写的散文诗
            <source src="./audio.ogg" type="audio/ogg">神话
        </audio>
        <button id="addCurrentTime">时间+</button>
        <button id="reduceCurrentTime">时间-</button>
        
        <script>
            var audio = document.getElementById('audio1');
            addCurrentTime.onclick = function(){
                audio.currentTime += 5;
                console.log(audio.currentTime);
            }
            reduceCurrentTime.onclick = function(){
                audio.currentTime -= 5;
                console.log(audio.currentTime);
            }
        </script>
    </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事件：当视频、音频在暂停状态时，可以触发该事件

![70 19][]

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

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

![70 20][]

注意：loadedmetadata事件先触发

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

## Media 事件 ##

由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onabort</td> 
   <td>script</td> 
   <td>在退出时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>oncanplay</td> 
   <td>script</td> 
   <td>当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。</td> 
  </tr> 
  <tr> 
   <td>oncanplaythrough</td> 
   <td>script</td> 
   <td>当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>ondurationchange</td> 
   <td>script</td> 
   <td>当媒介长度改变时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>onemptied</td> 
   <td>script</td> 
   <td>当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。</td> 
  </tr> 
  <tr> 
   <td>onended</td> 
   <td>script</td> 
   <td>当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。</td> 
  </tr> 
  <tr> 
   <td>onerror</td> 
   <td>script</td> 
   <td>当在文件加载期间发生错误时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>onloadeddata</td> 
   <td>script</td> 
   <td>当媒介数据已加载时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>onloadedmetadata</td> 
   <td>script</td> 
   <td>当元数据（比如分辨率和时长）被加载时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>onloadstart</td> 
   <td>script</td> 
   <td>在文件开始加载且未实际加载任何数据前运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>onpause</td> 
   <td>script</td> 
   <td>当媒介被用户或程序暂停时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>onplay</td> 
   <td>script</td> 
   <td>当媒介已就绪可以开始播放时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>onplaying</td> 
   <td>script</td> 
   <td>当媒介已开始播放时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>onprogress</td> 
   <td>script</td> 
   <td>当浏览器正在获取媒介数据时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>onratechange</td> 
   <td>script</td> 
   <td>每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。</td> 
  </tr> 
  <tr> 
   <td>onreadystatechange</td> 
   <td>script</td> 
   <td>每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。</td> 
  </tr> 
  <tr> 
   <td>onseeked</td> 
   <td>script</td> 
   <td>当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>onseeking</td> 
   <td>script</td> 
   <td>当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>onstalled</td> 
   <td>script</td> 
   <td>在浏览器不论何种原因未能取回媒介数据时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>onsuspend</td> 
   <td>script</td> 
   <td>在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>ontimeupdate</td> 
   <td>script</td> 
   <td>当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>onvolumechange</td> 
   <td>script</td> 
   <td>每当音量改变时（包括将音量设置为静音）时运行的脚本。</td> 
  </tr> 
  <tr> 
   <td>onwaiting</td> 
   <td>script</td> 
   <td>当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本</td> 
  </tr> 
 </tbody> 
</table>

**8.  readyState属性：音频当前就绪状态**

0 = HAVE\_NOTING 没有关于音频是否就绪的信息

1 = HAVE\_METADATA 关于音频就绪的元数据

2 = HAVE\_CURRENT\_DATA 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒

3 = HAVE\_FUTURE\_DATA 当前以及下一帧的数据是可用的

4 = HAVE\_ENOUGH\_DATA 可用数据足以开始播放

**9. networkState属性：返回音频当前网络状态**

0 = NETWORK\_EMPTY  音频尚未初始化

1 = NETWORK\_IDLE   音频资源以及读取到，但是还没有通过网络获取资源

2 = NETWORK\_LOADING  浏览器正在下载数据

3 = NETWORK\_NO\_SOURCE  未找到音频来源

**10. error事件：音频、视频加载发生错误时触发**

MediaError对象的code属性返回一个值，表示音频、视频的错误状态

1 = MEDIA\_ERR\_ABORTED 获取资源时，被用户中断

2 = MEDIA\_ERR\_NETWORK  下载时发生错误

3 = MEDIA\_ERR\_DECODE  当解码时发生错误

4 = MEDIA\_ERR\_STC\_NOT\_SUPPORTED 不支持音频、视频

[70]: /images/20220511/da1954da5fad45a3a1010252216d0243.png
[70 1]: /images/20220511/5624d086a4ae4020a6122f54d820db59.png
[70 2]: /images/20220511/6a553a50b57f4fcf8ea51bb495da74ab.png
[70 3]: /images/20220511/855c1034e34d45a8867a48ebc8e73eb2.png
[70 4]: /images/20220511/9bb507c51281407fbc77a1ae648e179f.png
[70 5]: /images/20220511/9e7fed2644104d4587607e2cc87b5dc6.png
[70 6]: /images/20220511/f699222c064745e3a5365f30438f35fd.png
[70 7]: /images/20220511/655adc2a6e8640c8bfc016d1e4da800d.png
[70 8]: /images/20220511/6c38b02cd1ee4044841e062bc21dbde7.png
[70 9]: /images/20220511/694762ade01046da81fad1e0428a7b8f.png
[70 10]: /images/20220511/71f0344daa1946c5983cee7da9baf15c.png
[70 11]: /images/20220511/0e4aa578c884471aa1fd83ef8d1f1bba.png
[70 12]: /images/20220511/215d643582564003a5c2fe2c3cf60513.png
[70 13]: /images/20220511/d250c366daa44c5dacd70d784ed87286.png
[70 14]: /images/20220511/23d5c176954a48a5a69d9a2e5d147ae3.png
[70 15]: /images/20220511/b3cac5839a4c46df940ad12224b3879f.png
[70 16]: /images/20220511/432f5fd0b8c84ac9b6097933eb4fae6c.png
[70 17]: /images/20220511/270731fe006f443fb43c0c0764de83bf.png
[70 18]: /images/20220511/8aeee7c3313f4a6aaa16f320108769dd.png
[70 19]: /images/20220511/15feddef615b4b02a47ee8409fb21795.png
[70 20]: /images/20220511/5b229911427d4126a689358448926ce0.png