您的位置：首页 > Web前端 > HTML5

HTML5第七章视频和音频

2018-03-13 10:34 274 查看

第七章视频和音频
1.浏览器支持性检测
通过html5test.com或者一些其他工具可以检测出浏览器是否支持<video>视频和<audio>音频标签。但是浏览器品种多样,且依赖第三方检测也不是妥善之策,所以检测浏览器是否支持<video>和<audio>标签最简单的方式是使用脚本创建它,然后检测特定的属性是否存在:
用法：<script>
//检测浏览器是否支持<video>和<audio>标签的方法,用脚本创建标签,然后检测其属性是否存在
var canPlayVideo=!!(document.createElement('video').canPlayType);
document.write(canPlayVideo);//如果支持返回true
//这里会在内存里动态创建一个video标签,不显示在页面上,然后检查独有的canPlayType()方法是否存在,
//其他独有的方法属性也可以检测出来,通过"!!"运算符将结果转换为布尔值,这样就可以知道视频对象是否创建成功
//也即是说明浏览器是否支持视频。音频同理。
var canPlayAudio=!!(document.createElement('audio').canPlayType);
document.write('<br>'+canPlayAudio);//如果支持返回tru
</script>2.使用source元素来兼容
一般来说,我们想要向页面中插入视频或音频元素,只需要在<video>或<audio>标签中设置一个src指向媒体文件就可以了,但是对于不同的浏览器来说,支持的文件格式,目前仍然是各不相同的,部分支持如下表

各浏览器支持的文件格式
文件格式或编码	ie	firefox	chrome
.oga/.ogv	不支持	支持	支持
*.mp4	支持	不支持	支持
*.webm	不支持	支持	支持
H.264编码文件	支持	不支持	支持

用法：<body>

<video controls>
<source src="xxx.ogg">
<source src="xxx.mp4">
<source src="xxx.webm">
</video>
<script>
//*****************一般情况下,可以通过代码来检测该浏览器是否支持该文件格式
document.write(document.createElement('video').canPlayType('video/ogg')+'\n');//maybe
document.write(document.createElement('video').canPlayType('video/mp4')+'\n');//maybe
var result = document.createElement('video').canPlayType('video/mp3')+'\n' ;//空字符串
alert(result);
document.write(document.createElement('video').canPlayType('video/webm')+'\n');//maybe
document.write(document.createElement('video').canPlayType('video/webm; codecs="vp8.0,vorbis"'));//probably
//probably表示最有可能支持;maybe表示也许支持;空字符串表示不支持。
//如果包含了codecs="vp8.0,vorbis",这样只会返回probably或者空字符串
</script>
</body>.
3.<video>和<audio>属性

视频音频元素的属性<video>支持全部9个;<audio>支持5个;以下是通过html代码中设置的属性
属性名	属性值	支持元素	描述
src	url	video/audio	播放的链接资源地址
autoplay	autoplay	video/audio	自动播放
controls	controls	video/audio	显示播放控件
loop	loop	video/audio	循环播放
preload	preload	video/audio	预先加载视频
width	px	video	视频宽度
height	px	video	视频高度
muted	Boolean	video	设置静音
poster	url	video	指定视频加载前显示的图片

用法：
<body>
<audio id="music" src="start.mp3" autoplay controls="controls"></audio>
</body>
4.通过JavaScript设置的属性

属性名	属性值	支持元素	描述
volume	0.0~1.0	video/audio	设置音量值
duration	number	video/audio	返回播放的总时长,单位为秒
ended	Boolean	video/audio	返回当前播放是否结束
paused	Boolean	video/audio	设置或返回当前播放是否暂停
currentTime	number	video/audio	设置或返回当前播放位置(以秒计)
mediaGroup	string	video/audio	设置或返回音频/视频所属的组合(允许对个音频视频保持同步)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5视频和音频

相关文章推荐

新的分享

章节导航

HTML5第七章 视频和音频

HTML5第七章视频和音频