第6章 HTML5中的视频和音频
H5新增video,audio,播放视频和音频，统称为多媒体元素。
6.1 多媒体元素基本属性
video用于电影文件和其他视频流的播放。
audio用于音乐文件和其他音频流的播放。
video的属性
- src：文件路径，本地或者网络上。
- autoplay：自动播放，一进页面就自动播放。
- width和height：媒体元素大小，单位像素，若不设置则播放源文件大小，只设置1个值会等比例控制视频大小。
- controls:设置为true时，视频底部有控制条工具，包括播放/暂停，进度条，音量开关大小和速度等功能。
- poster：所选图片的URL，添加后播放前显示当前图片而不是视频第一帧，视频不可用时遮盖空白，美观。
- networkState：返回视频文件网络状态，当浏览器读取文件时，将触发progress事件，获取不同各阶段的网络状态值，本属性为只读属性。
- NETWORK_EMPTY，返回值 0，数据加载初始化
- NETWORK_IDLE，返回值 1，文件加载成功，等待请求播放
- NETWORK_LOADING，返回值 2，文件正在加载过程中
- NETWORK_NO_SOURCE，返回值 3，加载出错，一般原因是没有找到支持的编码格式
audio的属性
- src：文件路径，本地或者网络上。
- autoplay：设置为true时，可以直接写属性也是一样的，自动播放，一进页面就自动播放。
- controls:设置为true时，会出现控制组件，包括进度条，声音大小，静音，播放速度等功能。
1.功能描述
创建video和audio,并在元素的src属性中设置播放的视频和音频，页面加载后自动播放。
需提前准备视频和音频各一个。
2.代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用多媒体元素播放文件</title>
<script>
function $$(id) {
return document.getElementById(id);
}
function progress(e) {
var intState = e.networkState;
var strState = strByNum(intState);
var newLi = document.createElement('li');
newLi.textContent = strState;
$$("ulVideo").appendChild(newLi)
}
/*
- NETWORK_EMPTY，返回值 0，数据加载初始化
- NETWORK_IDLE，返回值 1，文件加载成功，等待请求播放
- NETWORK_LOADING，返回值 2，文件正在加载过程中
- NETWORK_NO_SOURCE，返回值 3，加载出错，一般原因是没有找到支持的编码格式
*/
function strByNum(n) {
switch (n) {
case 0: return "数据加载初始化!";
case 1: return "文件加载成功，等待请求播放!";
case 2: return "文件正在加载过程中...";
case 3: return "加载出错，一般原因是没有找到支持的编码格式!";
}
}
function vdoerror(e) {
var intState = e.error.code;
var strState = strByErrorNum(intState);
var newLi = document.createElement('li');
newLi.textContent = strState;
$$("ulError").appendChild(newLi)
}
/*
- MEDIA_ERR_ABORTED，返回值 1，被中止
- MEDIA_ERR_NETWORK，返回值 2，出现网络错误，获取资源出错
- MEDIA_ERR_DECODE，返回值 3，媒体资源可用，解码出错
- MEDIA_ERR_SRC_NOT_SUPPORTED，返回值 4，没找到可以播放的媒体文件格式
*/
function strByErrorNum(n) {
switch (n) {
case 1: return "被中止!";
case 2: return "出现网络错误，获取资源出错!";
case 3: return "返回值 3，媒体资源可用，解码出错!";
case 4: return "没找到可以播放的媒体文件格式!";
}
}
</script>
</head>
<body>
<!--./static/黑悟空.mp4 -->
<video id="vdo" src="./static/黑悟空.mp4" autoplay="true" poster="./img/moon.jpg" onprogress="progress(this)"
onerror="vdoerror(this)" controls width="800px">您的浏览器不支持视频</video>
<ul id="ulVideo">
<li>progress事件：</li>
</ul>
<ul id="ulError">
<li>error事件：</li>
</ul>
<audio id="ado" src="./static/黄风起兮.mp3" controls="true"></audio>
</body>
</html>3.页面效果
路径故意写错：
4.源码分析
用两个ul来记录调用progress和error的过程，通过switch来将code转化为对应的意思。
其他属性，了解为主
- readyState：只读属性，返回当前播放文件的各种状态，属性返回值省略，有需要去查资料。
- currentTime,startTime,duration：当前播放时间，开始播放时间，总体播放时间。
- palyed,paused,ended：开始时间和结束时间，是否出于暂停，是否已结束。
- defaultPlaybackRate,playbackRate：默认播放速率，当前播放速率。
- volume,muted：播放音量0-1，是否静音。
6.2 多媒体元素常用方法
通过添加"controls"属性显示控制条工具栏。
也可以自定义播放按钮，调用多媒体元素播放文件时的方法。
- load()，调用时进行文件的加载，将playbackRate设置为默认值，error设置为null。
- canPlayType(type)，检测当前浏览器是否支持媒体文件类型,type=空(不支持),maybe(可能支持),Probably(支持)
6.2 多媒体元素重要事件
除上述networkState和error对应的progress和error事件以外，还有如下事件：
- playing()，媒体播放事件。
- timeupdate()，播放位置发生变化，触发该事件。
- durationchange()，播放总长度改变时触发。
- volumechange()，改变或启动静音时触发。
其他的事件有需要查资料。