必学必会-音频和视频

比眉伴天荒 2021-07-24 18:42 441阅读 0赞

哪吒人生信条：如果你所学的东西 处于喜欢 才会有强大的动力支撑。

> 把你的前端拿捏得死死的，每天学习得爽爽的，微信搜索【程序员哆啦A梦】关注这个不一样的程序员，如果你所学的东西 处于喜欢 才会有强大的动力支撑。
> 
> 感谢不负每一份热爱前端的程序员，不论前端技能有多奇葩，欢迎关注加我入群vx:xiaoda0423

## 前言 ##

希望可以通过这篇文章，能够给你得到帮助。(感谢一键三连)

学习深入理解`HTML5`的`audio`和`video`。

### `HTML5`视频概述 ###

在`HTML5`播放一个视频，很简单，只需要一行代码：

### 了解多媒体术语 ###

了解视频文件格式：

Audio Video InterLeaved .avi
    
    Flash Video .flv
    
    MPEG-4 .mp4
    
    Matroska .mkv
    
    Ogg .ogv

音频和视频编解码器

编解码器可以理解为一些算法代码，用于处理视频，音频或者其元数据的编码格式。对音频或视频文件进行编码，可使得文件大大缩小，便于在因特网上传输。

音频编解码器：

`MP3`，使用`ACC`音频

`Wav`，使用`Wav`音频

`Ogg`，使用`OggVorbis`音频

视频编解码器：

`MP4`，使用`H.264`视频，`AAC`音频

`WebM`，使用`VP8`视频，`OggVorbis`音频

`Ogg`，使用`Theora`视频，`OggVorbis`音频

### 多媒体文件格式 ###

`audio`元素支持的音频格式`MP3,Wav,Ogg`；`video`元素支持的格式`MP4,WebM,Ogg`。

*  `audio`元素是专门用于在网页中播放网络音频的
 *  `video`元素是专门用于在网页中播放视频的

在`HTML5`中`audio`和`video`元素提供的接口包含了一系列的属性，方法和事件，这些接口可以帮助开发完成对音频和视频的操作。

那么如何在页面中添加音频和视频呢？

音频

视频

### 使用`source`元素 ###

因为各种浏览器对音频和视频的编解码器的支持不一样，为了能够在各种浏览器中正常使用，可以提供多个源文件。

> 使用`source`元素替代了`audio`或`video`的标签属性`src`。

1.  `src`属性用于指定媒体文件的`url`地址
2.  `type`属性用于指定媒体文件的类型，属性值为媒体文件的`MIME`类型，该属性值还可以通过`codes`参数指定编码格式

### `audio`和`video`特性和属性 ###

> 元素的标签特性

1.  `src`，源文件特性，用于指定媒体文件的`url`地址
2.  `autoplay`，自动播放特性，表示媒体文件加载后自动播放。

1.  `controls`，控制条特性，表示为视频或音频添加自带的播放控制条。

1.  `loop`，循环特性，表示音频或视频循环播放。

1.  `preload`，预加载特性，表示页面加载完成后如何加载视频数据。

*  `none`表示不进行预加载
 *  `metadata`表示只加载媒体文件的元数据
 *  `auto`表示加载全部视频或音频，默认值为`auto`

1.  `poster`是`video`元素独有的特性，替代内容属性，用于指定一副替代图片的`url`地址，当视频不可以用时，会显示该替代图片。

1.  `width`和`height`，`video`元素独有的特性，用于指定视频的宽度和高度

> 接口属性

1.  `currentSrc`，只读，获取当前正在播放或已加载的媒体文件的`url`地址
2.  `videoWidth`，只读，`video`元素特有属性，获取视频原始的宽度
3.  `videoHeight`，只读，`video`元素特有属性，获取视频原始的高度
4.  `currentTime`，获取或设置当前媒体播放位置的时间点
5.  `startTime`，只读，获取当前媒体播放的开始时间
6.  `duration`，只读，获取整个媒体文件的播放时长
7.  `volume`，获取或设置媒体文件播放时的音量，取值范围在`0.0`到`0.1`之间
8.  `muted`，获取或设置媒体文件播放时是否静音。`true`表示静音，`false`表示消除静音
9.  `ended`，只读，如果媒体文件已经播放完毕则返回`true`，否则返回`false`
10. `error`，只读，读取媒体文件的错误代码
11. `played`，只读，获取已播放媒体的`TimesRanges`对象，该对象内容包括已播放部分的开始时间和结束时间。
12. `paused`，只读，如果媒体文件当前是暂停或未播放则返回`true`，否则返回`false`
13. `seeking`，只读，获取浏览器是否正在请求媒体数据
14. `seekable`，只读，获取媒体资源已请求的`TimesRanges`对象，该对象内容包括已请求部分的开始时间和结束时间
15. `networkState`，只读，获取媒体资源的加载状态
16. `buffered`，只读，获取本地缓存的媒体数据的`TimesRanges`对象
17. `readyState`，只读，获取当前媒体播放的就绪状态
18. `playbackRate`，获取或设置媒体当前的播放速率
19. `defaultPlaybackRate`，获取或设置媒体默认的播放速率

### 视频播放的快进 ###

<!DOCTYPEHTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>视频播放时的快进</title>
    <script type="text/javascript">
    function Forward() {
     var el = document.getElementById("myPlayer");
     var time = el.currentTime;
     el.currentTime = time+300;
    }
    </script>
    </head>
    <body>
    <video id="myPlayer" src="resources/video.mp4" width="600" height="200" controls>
    </video>
    <br/>
    <input type="button" value="快进" onclick="Forward()"/>
    </body>
    </html>

### `audio`和`video`接口方法 ###

> 接口方法

1.  `load()`，加载媒体文件，为播放做准备。
2.  `play()`，播放媒体文件。
3.  `pause()`，暂停播放媒体文件。
4.  `canPlayType()`，测试浏览器是否支持指定的媒体类型。

代码示例使用接口：

<!DOCTYPEHTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>播放与暂停</title>
    <script type="text/javascript">
    var videoEl = null;
    function Play() {
     videoEl.play();
    }
    function Pause() {
     videoEl.pause();
    }
    window.onload = function(){
     videoEl = document..getElementById("myPlayer");
    }
    </script>
    </head>
    <body>
    <video id="myPlayer" width="600">
     <source src="resources/video.mp4" type="video/mp4">
    </video><br>
    <input type="button" value="播放" onclick="Play()"/>
    <input type="button" value="暂停" onclick="Pause()"/>
    </body>
    </html>

### `audio`和`video`事件 ###

> 捕获事件的方式

捕获事件有两种方法：一种是添加事件句柄，一种是监听。

<video id="myPlayer" src="resources/video.mp4" width="500" onplay="video_playing()">
    </video>
    
    // 监听方式
    var videoEl = document.getElementById("myPlayer");
    videoEl.addEventListener("play",video_playing);

> 接口事件

1.  `play`，当执行方法`play()`时触发
2.  `playing`，正在播放时触发
3.  `pause`，当执行了方法`pause()`时触发
4.  `timeupdate`，当播放位置被改变时触发
5.  `ended`，当播放结束后停止播放时触发
6.  `waiting`，在等待加载下一帧时触发
7.  `ratechange`，在当前播放速率改变时触发
8.  `volumechange`，在音量改变时触发
9.  `canplay`，以当前播放速率需要缓冲时触发
10. `canplaythrough`，以当前播放速率不需要缓冲时触发
11. `durationchange`，当播放时长改变时触发
12. `loadstart`，当浏览器开始在网上寻找数据时触发
13. `progress`，当浏览器正在获取媒体文件时触发
14. `suspend`，当浏览器暂停获取媒体文件，且文件获取并不是正常结束时触发
15. `abort`，当中止获取媒体数据时触发
16. `error`，在获取媒体过程中出错时触发
17. `emptied`，当所在网络变为初始化状态时触发
18. `stalled`，在浏览器尝试获取媒体数据失败时触发
19. `seeking`，在浏览器正在请求数据时触发
20. `seeded`，在浏览器停止请求数据时触发

> 定义全局的视频对象

代码如下：

> 添加进度显示功能

代码如下：

> 添加静音和调节音量的功能

消除静音`videoEl.muted=false`；静音效果`videoEl.muted=true`；`videoEl.volume=e.value;`修改音量的值。

> 添加慢进和快进功能

videoEl.playbackRate-=0.2;
    videoEl.playbackRate-=1;
    // 显示播放速率
    document.getElementById("rate").innerHTML=fps2fps(videoEl.playbackRate);

## 点赞、收藏和评论 ##

我是Jeskson(达达前端)，感谢各位人才的：点赞、收藏和评论，我们下期见！(如本文内容有地方讲解有误，欢迎指出☞谢谢，一起学习了)

## 我们下期见！ ##

> 文章持续更新，可以微信搜一搜「 程序员哆啦A梦 」第一时间阅读，回复【资料】有我准备的一线大厂资料，本文 http://www.dadaqianduan.cn/\#/ 已经收录