一. 媒体元素

<audio>标签:嵌入音频内容;

<video>标签:嵌入视频内容。

这两个元素的用法如下:

<!-- 嵌入视频 -->
<video src="test.mp4">Video player not available.</video>

<!-- 嵌入音频 -->
<audio src="test.mp3">Audio player not available.</audio>

使用这两个元素时,至少要在标签中包含src属性,指向要加载的媒体文件。还可以设置width和height属性,以指定视频播放器的大小。

位于开始和结束标签的任何内容都将作为后备内容,在浏览器不支持这两个媒体元素的情况下显示。

因为并非所有浏览器都支持所有媒体格式,所以可以指定多个不同的媒体来源。为此需要使用一或多个<source>元素。

<!-- 嵌入视频 -->
<video>
    <source src="test.webm" type="video/webm; codecs='vp8, vorbis'">
    <source src="test.ogv" type="video/ogg; codecs='theora, vorbis'">
    <source src="test.mpg">
    Video player not available.
</video>

<!-- 嵌入音频 -->
<audio src="test.mp3">
    <source src="test.ogg" type="audio/ogg">
    <source src="test.mp3" type="audio/mpeg">
    Audio player not available.
</audio>

二. 音频和视频的格式支持情况:

2.1 音频

音频 字符串 支持的浏览器
AAC audio/mp4; codecs=”mp4a.40.2″ IE9+、Safari 4+、iOS版Safari
MP3 audio/mpeg IE9+、Chrome
Vorbis audio/ogg; codecs=”vorbis” Firefox 3.5+、Chrome、Opera 10.5+
WAV audio/wav; codecs=”1″ Firefox 3.5+、Opera 10.5+、Chrome

2.2 视频

视频 字符串 支持的浏览器
H.264 video/mp4; codecs=”avc1.42E01E, mp4a.40.2″ IE9+、Safari 4+、iOS版Safari、Android版Webkit
Theora video/ogg; codecs=”theora” Firefox 3.5+、Opera 10.5、Chrome
WebM video/webm; codes=”vp8, vorbis” Firefox 4+、Opera 10.6、Chrome

三. <video><audio>的属性:

属性 数据类型 说明
autoplay Boolean 是否自动播放
buffered 时间范围 表示已下载的缓冲的时间范围的对象
bufferedBytes 字节范围 表示已下载的缓冲的字节范围的对象
bufferingRate Int 下载过程中每秒中平均接收到的位数
bufferingThrottled Boolean 表示浏览器是否对缓冲进行了节流
controls Boolean 是否显示或隐藏浏览器内置的控件
currentLoop Int 媒体文件已经循环的次数
currentSrc String 当前播放的媒体文件的URL
currentTime Float 已经播放的秒数
defaultPlaybackRate Float 取得或设置默认的播放速度。默认值为1.0
duration Float 媒体的总播放时间(秒数)
ended Boolean 表示媒体文件是否播放完成
loop Boolean 取得或设置媒体文件咋播放完成后是否再从头开始播放
muted Boolean 取得或设置媒体文件是否静音
networkState Int 表示当前媒体的网络连接状态:0表示空; 1表示正在加载; 2表示正在加载元数据; 3表示已经加载了第一帧; 4表示加载完成
paused Boolean 表示播放器是否暂停
playbackRate Float 取得或设置当前的播放速度。
played 时间范围 到目前为止已经播放的时间范围
readyState Int 表示媒体文件是否可以播放。0表示数据不可用;1表示可以显示当前帧;2表示可以开始播放;3表示媒体可以从头到尾播放可以搜索的时间范围
seekable 时间范围 可以搜索的时间范围
seeking Boolean 表示播放器是否正移动到媒体文件中的新位置
src String 媒体文件的来源
start Float 取得或设置媒体文件中开始播放的位置,以秒表示
totalBytes Int 当前资源所需的总字节数
videoHeight Int 返回视频高度。(只适用于<video>
videoWidth Int 返回视频宽度。(只适用于<video>
volume Float 取得或设置当前音量。值为0到1

四. <video><audio>的事件:

事件 说明
abort 下载中断
canplay 可以播放时。readyState值为2
canplaythrough 播放可以继续,而且应该不会中断;readyState值为3
canshowcurrentframe 当前帧已经下载完成。readyState值为1
dataunavailable 因为没有数据而不能播放。readyState值为0
durationchange duration属性的值改变
emptied 网络连接关闭
empty 发生错误阻止了媒体下载
ended 媒体已播放到末尾,播放停止
error 下载期间发生网络错误
load 所有媒体已加载完成。
loadeddata 媒体的第一帧已加载完成
loadedmetadata 媒体的元数据已加载完成
loadstart 下载已开始
pause 播放已暂停
play 媒体已到指令开始播放
playing 媒体已实际开始播放
progress 正在下载
ratechange 播放媒体的速度改变
seeked 搜索结束
seeking 正移动到新位置
stalled 浏览器尝试下载,但未接收到数据
timeupdate currentTime被以不合理或意外的方式更新
volumechange volume属性值或muted属性值已改变
waiting 播放暂停,等待下载更多数据
本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/js/1020