HTML5增加了对媒体类型的支持(在HTML5之前是通过flash或者其他插件实现的)
- 音频:
<audio>
- 视频:
<video>
- 音频:
HTML
<audio>
元素用于在文档中表示音频内容。HTML
<video>
元素用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放。“
<video><audio>
“元素常见属性:- src:媒体的来源
- controls:增加控制工具栏
- autoplay:自动播放
- muted:静音,增加后不静音并且自动播放会生效
- loop:循环播放
<source>
元素- 如果存在兼容性问题,可以将多个视频格式数据源放到source元素中
- src:指定src指定数据的来源
举例
1
2
3<video src="music/Pianoboy高至豪%20-%20The%C2%A0truth%C2%A0that%C2%A0you%C2%A0leave.mp4" controls autoplay>
<source src="music/Pianoboy高至豪%20-%20The%C2%A0truth%C2%A0that%C2%A0you%C2%A0leave.mp4">
</video>
DOM networkState 属性
- networkState:获得视频的当前网络状态:
- 0=network_empty - 音频/视频尚未初始化
- 1=network_idle - 音频/视频是活动的且已选取资源,但并未使用网络
- 2=network_loading - 浏览器正在下载数据|出现网络错误,获取媒体资源出错
- 3= etwork_no_source - 未找到音频/视频来源
多媒体元素的error属性
error返回值
1 = MEDIA_ERR_ABORTED - 取回过程被用户中止
2 = MEDIA_ERR_NETWORK - 当下载时发生错误
3 = MEDIA_ERR_DECODE - 当解码时发生错误
4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频
音频/视频处于加载过程中的事件
- loadstart
- 当浏览器开始寻找指定的音频/视频时,会发生 loadstart 事件。即当加载过程开始时。
- durationchange
- 当指定音频/视频的时长数据发生变化时,发生 durationchange 事件。
- loadedmetadata
- 当指定的音频/视频的元数据已加载时
- 元数据包括:时长、尺寸(仅视频)以及文本轨道
- 当指定的音频/视频的元数据已加载时
- loadeddata
- 当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时
- progress
- 当浏览器正在下载指定的音频/视频时(视频正在下载中)
- canplay
- 当浏览器能够开始播放指定的音频/视频时(该视频已准备好开始播放)
- canplaythrough
- 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时(视频能够不停顿地一直播放)