HTML5 多媒体音视频处理

audio.currentTime +=10; // 在当前进度上加 10s

audio.play();

}

// 快退

function aback() {

audio.currentTime -=10; // 在当前进度上减 10s

audio.play();

}

// 静音

function amuted() {

audio.muted = !audio.muted; // 设置静音

}

视频处理 - video

---

HTML5 中提到最多的是视频处理，视频也是互联网的重要应用。

在HTML5中，增加了一个 video 元素，以便在HTML中插入和播放视频。

video 元素提供了播放、暂停、和音量控制功能，同时也提供了尺寸属性。

使用 video 视频至善要提供一下视频格式的文件

OGG：包含 Theora 视频 和 Vorbis 音频解调码。

MP4：包含 H.264 视频 和 AAC 音频解调码。

WebM：包含 VP8 视频 和 Ogg Vorbis 音频解调码。

各大主流浏览器对视频文件格式的支持力度

video 元素

---

video 元素可以实现在HTML页面中嵌入视频内容。

元素属性可以设置是否自动播放、是否与加载、以及视频的宽高尺寸等。

- src 属性：用于读取媒体文件。

- autoplay 属性： 设置该视频是否自动播放。

- width 和 height 属性：设置该视频的宽度和高度。

案例代码

视频不能播放(如果浏览器不支持此格式，用此行文本代替)

• 注意：自动播放属性：autoplay     控制属性：controls

video 元素

---

video 元素也可以使用 source 子元素来向浏览器提供备选的视频格式。

- source 元素中的 src 属性 和 video元素中的 src属性作用相同。

- 都是用于读取每天文件的。

- 注意：使用 source 元素读取流媒体文件时，video 元素就不需要使用 src 属性了。

案例代码

视频不能播放(如果浏览器不支持此格式，用此行文本代替)

 

video 属性

---

loop 属性可以使视频播放结束后自动循环播放、

poster 属性用于设置视频封面。

视频不能播放(如果浏览器不支持此格式，用此行文本代替)

编程（JavaScript）实现视频播放器

---

在不同浏览器实现 video 代码，播放器控件的图形设计会有一定的差别。

每一种浏览器斗殴自己的特殊的按钮和进度条，有的甚至还有一些特殊的特性。

为了在所有浏览器中显示效果保持一致，需要使用视频事件、属性和方法。

HTML5 中加入了新的事件API，在视频处理过程中，包含了一些通知媒体状态的事件。

• 例如 下载进度、视频是否结束等。

编程实现视频播放器 - 常用事件

---

video 元素的一些常用事件

- progress：用于更新媒体的下载进度，会周期性触发。

- canplaythrough：当整个媒体顺利播放时会触发的事件。

- canplay：不考虑整体状态，只要下载了一定的可放帧就会触发的事件。

- ended：媒体到达末尾时触发。

- pause：媒体暂停时触发。

- play：媒体开始播放时触发。

- error：媒体播放出现错误时触发。

案例代码

视频不能播放(如果浏览器不支持此格式，用此行文本代替)

案例代码：

视频不能播放(如果浏览器不支持此格式，用此行文本代替)

编程实现视频播放 - 媒体处理的方法

---

下面是 HTML5 新增加的媒体处理方法

- play() ：播放媒体文件。

- pause()：暂停播放。

- load()：加载媒体文件。

- canPlayType(type)：查看浏览器是否支持这种文件格式的媒体文件。

案例代码

播放

编程实现视频播放器 - 属性

---

HTML5 新增加的针对视频元素处理的属性如下

- paused：视频处于暂停或者未播放状态时，这个值为 true。

- ended：视频已经结束播放时，这个值为 true。

- duration：返回媒体时长，以秒为单位。

- currentTime：获取或设置媒体播放位置。

案例代码

0:00

/

0:00

播放