由 dawei 副标题#e#
1.1 video支持视频格式
常见的视频格式
视频的组成部分：画面、音频、编码格式
视频编码：H.264、Theora、VP8(google开源)
HTML5支持的视频格式：
1、Ogg
带有Theora视频编码+Vorbis音频编码的Ogg文件
支持的浏览器:F、C、O
2、MEPG4
带有H.264视频编码+AAC音频编码的MPEG4文件
支持的浏览器: S、C
3、WebM
带有VP8视频编码+Vorbis音频编码的WebM格式
支持的浏览器: I、F、C、O
劣势：视频少、转码器几乎没有，不好转码
想要video能自动填充慢父div的大小，只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可
1.2 标签原型
指定一种视频格式，不能播就提示
<video id="media" src=http://www.jb51.net/html5/"examp.mp4" width="500"
poster="examp1.jpg" >您的浏览器不支持video</video>
给定多种视频格式，浏览器根据自身支持程度选择播放哪一种
注意：多个source标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频
<video controls = “controls”>
<source src=http://www.jb51.net/html5/”1.mp4” type=”video/mp4” /> //src属性写到source标签中，要指定视频的type类型，例如MP4的即为type=“video/mp4”
<source src = “2.ogg” type=”video/ogg” /> //ogg格式
<source src=http://www.jb51.net/html5/”3.webm” type=”video/webm” /> //webm格式
</video>
1.3 重要的video标签属性
属性(常用)
值
功能描述
controls
controls
是否显示播放控件
autoplay
autoplay
设置是否打开浏览器后自动播放
width
Pilex（像素）
设置播放器的宽度
height
Pilex（像素）
设置播放器的高度
loop
loop
设置视频是否循环播放（即播放完后继续重新播放）
preload
preload
设置是否等加载完再播放
src
url
设置要播放视频的url地址
poster
imgurl
设置播放器初始默认显示图片
autobuffer
autobuffer
设置为浏览器缓冲方式，不设置autoply才有效
API 属性
属性
描述
audioTracks
返回表示可用音轨的 AudioTrackList 对象
buffered
返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller
返回表示音频/视频当前媒体控制器的 MediaController 对象
crossOrigin
设置或返回音频/视频的 CORS 设置
currentSrc
返回当前音频/视频的 URL
currentTime
设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted
设置或返回音频/视频默认是否静音
defaultPlaybackRate
设置或返回音频/视频的默认播放速度
duration
返回当前音频/视频的长度（以秒计）
ended
返回音频/视频的播放是否已结束
error
返回表示音频/视频错误状态的 MediaError 对象
mediaGroup
设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted
设置或返回音频/视频是否静音
networkState
返回音频/视频的当前网络状态
paused
设置或返回音频/视频是否暂停
playbackRate
设置或返回音频/视频播放的速度
played
返回表示音频/视频已播放部分的 TimeRanges 对象
readyState
返回音频/视频当前的就绪状态
seekable
返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking
返回用户是否正在音频/视频中进行查找
startDate
返回表示当前时间偏移的 Date 对象
textTracks
返回表示可用文本轨道的 TextTrackList 对象
videoTracks
返回表示可用视频轨道的 VideoTrackList 对象
volume
设置或返回音频/视频的音量
常用API属性
duration：返回当前音频/视频的长度（以秒计）
paused：设置或返回音频/视频是否暂停
currentTime：设置或返回音频/视频中的当前播放位置（以秒计）
ended：返回音频/视频的播放是否已结束
1.4 Video API
1.4.1 Video 方法
#p#副标题#e#
API
事件说明
play
video.play(); 播放视频
pause
video.pause(); 暂停播放视频
load
video.load(); 将全部属性回复默认值，视频恢复重新开始状态
canPlayType
var support = videoid.canPlayType(‘video/mp4′);
判断浏览器是否支持当前类型的视频格式
返回值：
空字符串：不支持Maybe：可能支持Probably：完全支持
常用方法
play()：开始播放音频/视频
pause()：暂停当前播放的音频/视频
1.4.2网络状态
获取video对象
Media = document.getElementById("media");
1.Media.currentSrc;
返回当前资源的URL
2.Media.src = value;
返回或设置当前资源的URL
3.Media.canPlayType(type);
是否能播放某种格式的资源
4.Media.networkState;
0.此元素未初始化
1.正常但没有使用网络
2.正在下载数据
3.没有找到资源
5.Media.load();
重新加载src指定的资源
6.Media.buffered;
返回已缓冲区域，TimeRanges
7.Media.preload;
none:不预载
metadata:预载资源信息
auto:
1.4.3 准备状态
1.Media.readyState
2.Media.seeking;
是否正在seeking
1.4.4 回放状态
1.Media.currentTime = value;
当前播放的位置，赋值可改变位置
2.Media.startTime;
一般为0，如果为流媒体或者不从0开始的资源，则不为0
3.Media.duration;
当前资源长度 流返回无限
4.Media.paused;
是否暂停
5.Media.defaultPlaybackRate = value;
默认的回放速度，可以设置
6.Media.playbackRate = value;
当前播放速度，设置后马上改变
7.Media.played;
返回已经播放的区域，TimeRanges，关于此对象见下文
8.Media.seekable;
返回可以seek的区域 TimeRanges
9.Media.ended;
是否结束
10.Media.autoPlay;
是否自动播放
11.Media.loop;
是否循环播放
12.Media.play();
播放
13.Media.pause();
暂停
1.4.5 视频控制
Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
1.4.6 相关事件
1.首先绑定事件的话可以通过js中的addEventListener方法来绑定事件
#p#副标题#e##p#分页标题#e#
事件
说明
loadstart
客户端开始请求数据
progress
客户端正在请求数据
suspend
延迟下载
abort
客户端主动终止下载（不是因为错误引起）
loadstart
客户端开始请求数据
progress
客户端正在请求数据
error
请求数据时遇到错误
stalled
网速失速
play
play()和autoplay开始播放时触发
pause
pause()触发
loadedmetadata
成功获取资源长度
loadeddata
-
waiting
等待数据，并非错误
playing
开始回放
canplay
可以播放，但中途可能因为加载而暂停
canplaythrough
可以播放，歌曲全部加载完毕
seeking
寻找中
seeked
寻找完毕
timeupdate
播放时间改变
ended
播放结束
ratechange
播放速率改变
durationchange
资源长度改变
volumechange
音量改变
2.常用事件
oncanplay：当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
ontimeupdate： 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
onended：当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
1.4.7 其他
1.全屏:
element.webkitRequestFullScreen();( webkit)
element.mozRequestFullScreen(); (Firefox )
element.requestFullscreen(); (W3C )
2.退出全屏：
document.webkitCancelFullScreen(); (webkit )
document.mozCancelFullScreen(); (Firefox)
document.exitFullscreen(); (W3C)
二、audio
2.1 audio格式
1.常见的音频格式
音频编码：ACC、MP3、Vorbis
2.HTML5支持的音频格式：
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S
2.2 audio标签中的一些常用属性
#p#副标题#e#
属性
属性值
注释
src
url
播放的音乐的url地址（火狐只支持ogg的音乐，而IE9只支持MP3格式的音乐。chrome貌似全支持）
preload
preload
预加载（在页面被加载时进行加载或者说缓冲音频），如果使用了autoplay的话那么该属性失效。
loop
loop
循环播放
controls
controls
是否显示默认控制条（控制按钮）
autoplay
autoplay
自动播放
对于音乐格式的支持
音频格式
Chrome
Firefox
IE9
Opera
Safari
OGG
支持
支持
支持
不支持
不支持
MP3
支持
不支持
支持
不支持
支持
WAV
不支持
支持
不支持
支持
不支持
audio可通过new来创建。也可以通过用document来获取
#p#副标题#e##p#分页标题#e#
//通过new关键字来创建Audio对象
var Music = new Audio("test.mp3");
//通过document来获取已经存在的Audio对象
var Music = document.getElementById("audio");
//当然这里也可以使用document.getElementsByClassName('className')等其他的方法来获取。
2.3 api所提供的对audio标签操作的一些属性和方法
属性
注释
duration
获取媒体文件的总时长，以s为单位，如果无法获取，返回NaN
paused
如果媒体文件被暂停，那么paused属性返回true，反之则返回false
ended
如果媒体文件播放完毕返回true
muted
用来获取或设置静音状态。值为boolean
volume
控制音量的属性值为0-1;0为音量最小，1为音量最大
startTime
返回起始播放时间
error
返回错误代码，为uull的时候为正常。否则可以通过Music.error.code来获取
currentTime
用来获取或控制当前播放的时间，单位为s。
currentSrc
以字符串形式返回正在播放或已加载的文件
2.4 常用的控制用的函数
函数
作用
load()
加载音频、视频软件
play()
加载并播放音频、视频文件或重新播放暂停的的音频、视频
pause()
暂停出于播放状态的音频、视频文件
canPlayType(obj)
测试是否支持给定的Mini类型的文件
2.5 audio标签API中的常用事件
首先绑定事件的话可以通过js中的addEventListener方法来绑定事件
事件名称
事件作用
loadstart
客户端开始请求数据
progress
客户端正在请求数据（或者说正在缓冲）
play
play()和autoplay播放时
pause
pause()方法促发时
ended
当前播放结束
timeupdate
当前播放时间发生改变的时候。播放中常用的时间处理
canplaythrough
歌曲已经载入完全完成
canplay
缓冲至目前可播放状态。
其实video的api和audio几乎一致。稍稍有点不同。所以基本上会了一个其他的也就都会了