HTML5 新增了两个与媒体相关的标签,分别是 audio 和 video。用法如下:

1
2
3
4
5
<!-- 嵌入音频 -->
<audio src="song.mp3" id="myAudio">Audio player not available.</audio>

<!-- 嵌入视频 -->
<video src="conference.mpg" id="myVideo">Video player not available.</video>

属性

属性数据类型说明
autoplay布尔值取得或设置 autoplay 标志
buffered时间范围表示已下载的缓冲的时间范围的对象
bufferedBytes字节范围表示已下载的缓冲的字节范围的对象
bufferingRate整数下载过程中每秒钟平均接收到的位数
bufferingThrottled布尔值表示浏览器是否对缓冲进行了节流
controls布尔值取得或设置 controls 属性,用于显示或隐藏浏览器内置的控件
currentLoop整数媒体文件已经循环的次数
currentSrc字符串当前播放的媒体文件的 URL
currentTime浮点数已经播放的秒数
defaultPlaybackRate浮点数取得或设置默认的播放速度。默认值为 1.0 秒
duration浮点数媒体的总播放时间(秒数)
ended布尔值表示媒体文件是否播放完成
loop布尔值取得或设置媒体文件在播放完成后是否再从头播放
muted布尔值取得或设置文件是否静音
networkState整数表示当前媒体的网络连接状态:0-空,1-正在加载,2-正在加载元数据,3-已经加载了第一帧,4-加载完成
paused布尔值表示播放器是否暂停
playbackRate浮点数取得或设置当前的播放速度。用户可以改变这个值,让媒体播放速度变快或变慢,这与只能由程序猿修改的 defaultPlaybackRate 不同
played时间范围到目前为止已经播放的时间范围
readyState整数表示媒体是否已经就绪。0-数据不可用,1-可以显示当前帧,2-可以开始播放,3-媒体可以从头到尾播放
seekable时间范围可以搜索的时间范围
seeking布尔值表示播放器是否正移动到媒体文件中的新位置
src字符串媒体文件的来源。任何时候都可以重写这个属性
start浮点数取得或设置媒体文件中开始播放的位置,以秒表示
totalBytes整数当前资源所需的总字节数
videoHeight整数返回视频(不一定是元素)的高度。只适用于 video
videoWidth整数返回视频(不一定是元素)的宽度,只适用于 video
volume浮点数取得或设置当前音量,值为 0.0 到 1.0

事件

事件触发时机
abort下载中断
canplay可以播放时;readyState 值为 2
canplaythrough播放可继续,而且应该不会中断;readyState 值为 3
canshowcurrentframe当前帧已经下载完成;readState 值为 1
dataunavailable因为没有数据而不能播放;readState 值为 0
durationchangeduration 属性的值改变
emptied网络连接关闭
empty发生错误阻止了媒体下载
ended媒体已经播放到末尾,播放停止
error下载期间发生网络错误
load所有媒体已经加载完成。这个事件可能会被废弃,建议使用 canplaythrough
loadeddata媒体的第一帧已加载完成
loadedmetadata媒体的元数据已加载完成
loadstart下载已开始
pause播放已暂停
play媒体已接收到指令开始播放
playing媒体已实际开始播放
progress正在下载
ratechange播放媒体的速度改变
seeked搜索结束
seeking正移动到新位置
stalled浏览器尝试下载,但未接收到数据
timeupdatecurrentTime 被已不合理或意外的方式更新
volumechangevolume 属性值或 muted 属性值已改变
waiting播放暂停,等待下载更多数据