
上QQ阅读APP看书,第一时间看更新
6.3 音频和视频中的方法
在HTML5网页中,操作音频或视频文件的常用方法包括canPlayType()方法、load()方法、play()方法和pause()方法。
6.3.1 canPlayType()方法
canPlayType()方法用于检测浏览器是否能播放指定的音频或视频类型。canPlayType()方法返回值包含如下:
(1)probably:浏览器全面支持指定的音频或视频类型。
(2)maybe:浏览器可能支持指定的音频或视频类型。
(3)" "(空字符串):浏览器不支持指定的音频或视频类型。
注意,目前所有主流浏览器都支持canPlayType()方法。Internet Explorer 8及之前的版本不支持该方法。
【例6.3】(实例文件:ch06\6.3.html)

在IE 11.0中浏览效果如图6-5所示。单击【检查】按钮,即可查看浏览器对音频和视频的支持情况,如图6-6所示。

图6-5 预览效果

图6-6 查看浏览器对音频和视频的支持情况
6.3.2 load()方法
load()方法用于重新加载音频或视频文件。load()方法的语法格式如下:
audio|video.load()
【例6.4】(实例文件:ch06\6.4.html)

在IE 11.0中浏览效果如图6-7所示。单击【更改加载视频】按钮,即可重新加载视频文件,如图6-8所示。

图6-7 预览效果

图6-8 重新加载视频文件
6.3.3 play()方法和pause()方法
play()方法用于开始播放音频或视频文件。pause()方法用于暂停当前播放的音频或视频文件。
【例6.5】(实例文件:ch06\6.5.html)

在IE 11.0中浏览效果如图6-9所示。单击【播放视频】按钮,则视频开始播放;单击【暂停视频】按钮,则视频暂停播放。

图6-9 预览效果