HTML中的音频和视频
浏览量:2462
-
HTML5的audio和video元素代表这音频你和视频。这里有两个概念需要先理解一下。
视频容器:这里有个封装的概念。封装了音频轨道、视频轨道、元数据(视频封面、标题、子标题、字幕)。主流视频容器支持以下格式的视频文件:.avi、.flv、.mp4、.mkv和.ogg。
音频和视频编解码器:一组用来对音频和视频编码、解码以便能正常播放的算法。主流音频编解码器:AAC、MPEG-3和Ogg Vorbis。主流视频编解码器:H.264、VP8和Ogg Theora。
目前除IE以外的主流浏览器都支持audio和video。 -
使用HTML5audio和video的优势:
浏览器自带,因而无需安装。
更容易通过脚本来控制和播放内容。
缺点是:缺少通用编解码器支持。 - 通过脚本进行兼容性检测。
var hasVideo=!!(document.createElement('vedio').canPlayType);
这段脚本会动态创建vedio元素,然后检查canPlayType()函数是否存在。通过“!!”将结果转换为布尔值。如果检测结果是当前浏览器不支持该元素,则需要触发另外一套脚本向页面中引入媒体标签。可以把Flash等插件方式播放放到<video>备选代码</video>中。
<video src="video.ogg">
<object data="videoplayer.swf"type="application/x-shockwave-flash">
<param name="movie"value="video.swf"/>
</object>
</video>
-
如果不使用contros特性怎么让媒体文件正常播放呢?可以设置成这样:<audio autoplay></audio>,效果是当媒体文件加载完成后自动播放。不过大部分用户对此比较反感。还有一种比较好的方式是用js控制播放。
(1)常用控制函数
load():通常不必调用。除非是动态生成的元素,用来在播放前预加载。
play():除非音频/视频已经暂停在其他位置,否则重头播放。
pause():暂停播放。
canPlayType():测试video元素是否支持给定MIME类型的文件。下面的代码可以快速判断是否支持fooType类型播放。
1varsupportsFoolVideo=!!(document.createElement('video').canPlayType('fooType'));
(2)部分只读特性
duration:整个媒体文件的播放时长(s),无法获取返回NaN。
paused:如果媒体文件当前被暂停,返回true,否则返回false。
ended:如果媒体文件已经播放完毕,返回true。
startTime:返回最早的播放时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不再缓冲区。
error:在发生错误的时候返回错误代码。
currentSrc:以字符串的形式返回当前正在播放或已经加载的文件。
(3)部分可被脚本修改并直接影响播放的媒体元素特性
autoplay:将媒体文件设置为创建后自动播放,或者查询是否已经设置为autoplay。
loop:设置为true表示循环播放。或者查询。
currentTime:返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来进行搜索,并定位到媒体文件的特定位置。
controls:显示或隐藏用户控制界面,或者查询。
volume:从0.0到1.0之间设置音量大小,或者查询。
muted:设置或消除静音,或者查询。
autobuffer:通知播放器在媒体文件开始播放前,是否进行缓冲加载。如果媒体文件已经设置了autoplay则忽略此设置。
video比audio多了一些特性:
poster:在视频加载完成之前,代表视频内容图片URL地址。类似于电影海报。该特性可读写。
width、height:读写视频尺寸。
videoWidth、videoHeight:返回视频的固有或自适应宽度和高度。只读。
除了这些之外,video还有一个audio不支持的特性:抓取图像帧。这里要与Canvas一起使用。使用drawImage()方法。
CRM定制 办公OA找沈阳易势科技有限公司
下一篇:js级联