HTML5实现视频播放代码

在HTML5之前,网页语言是不能直接进行视频播放的,只能借助Flash,Flash实际上是一种插件,用Flash播放网页视频性能不高,这就是为什么电脑网友上的视频往往不流畅而且占用大量性能。

而HTML5支持了视频的插入与播放,标签是<video> 与 </video>,其中视频的属性写在<video> 里,比如

<video src="movie.ogg" width="640" height="480" controls="controls"></video>
其中src="movie.ogg"是视频文件的名称和所在的位置,width和height大家应该都熟悉分别是宽度和高度,controls定义控制键,与之相对于的是autoplay是自动播放<video> 与 </video>的中间的内容会在不支持HTML5的浏览器中显示,比如
<video src="movie.ogg" width="640" height="480" controls="controls">您当前浏览器不支持HTMT5视频播放</video>

目前HTML5支持三种视频格式,Ogg、MPEG 4和WebM

Ogg 是 Theora 视频编码和 Vorbis 音频编码


MPEG4 是H.264 视频编码和 AAC 音频编码


WebM 是 VP8 视频编码和 Vorbis 音频编码

三种格式在各主流浏览器中的支持情况如下:
格式 IE Firefox Opera Chrome Safari
Ogg 不支持 3.5+ 10.5+ 5.0+ 不支持
MPEG 4 9.0+ 不支持 不支持 5.0+ 3.0+
WebM 不支持 4.0+ 10.6+ 6.0+ 不支持
为了兼容不同浏览器,我们需要设置不同的文件源,比如
<video width="640" height="480" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您当前浏览器不支持HTMT5视频播放
</video>
这样浏览器会先识别ogg如果无法播放就识别MP4。

标签:  |  | 


顶部