html元素<video>标签是html5中新增的标签,用于定义网页文档中的视频资源文件,有关<video>标签的使用方法及作用详解如下: <video>标签的定义<video>标签可以把指定的视频资源文件插入页面中播放; <video> 标签是 HTML 5 中新增的标签。 <video>标签语法:<video width="高度" height="宽度" src="视频资源URL地址"> 提示文本 </video> <video>标签可以设置播放视频的高度和宽度,默认单位是px,而src属性用来指定视频资源的URL地址; 在<video>和</video>之间的“提示文本”,是用于当前浏览器不支持<video>标签时显示的文本内容;
<video>标签支持的视频格式 目前,<video>标签支持以下三种视频格式: 1、Ogg格式:带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件。 2、MP4格式:带有 H.264 视频编码和 AAC 音频编码的 MPEG-4 文件。 3、WebM格式:带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。
<video>标签属性
<video>标签用法1. 检测浏览器是否支持<video>标签 <video>标签和<audio>标签一样,都可以放置提示文本“当前浏览器不支持video标签”,演示代码如下: <video width="600" height="325" src="shipin.mp4">当前浏览器不支持video标签</video> 如果当前浏览器不支持<video>标签,就会显示提示文本“当前浏览器不支持video标签”,如果没有显示提示本文,则是支持的。
2、<video>标签属性设置 <video>标签的属性用法基本上和<audio>标签的属性用法一样,但<video>标签可以设置高度和宽度,以及设置视频封面的poster属性
A、设置视频资源宽度和高度 在<video>标签中,我们可以设置播放视频的高度和宽度,演示代码如下: <video width="600" height="325" src="shipin.mp4" >当前浏览器不支持video标签 </video> width="600"是设置宽度为600px,height="325"是设置高度为325px,高宽尺寸的单位默认是px,单位还可以设置成cm、em、pt、%(百分比)等;
B、设置视频封面; 视频封面,就是视频还没有播放时显示的图片 <video src="视频地址" poster="视频封面图片地址">当前浏览器不支持video标签</video> C、设置自动播放视频 Markup <video src="视频地址" autoplay="autoplay" >当前浏览器不支持video标签</video> D、设置有播放、暂停、音量控件的视频 Markup <video src="视频地址" controls="controls">当前浏览器不支持video标签</video> E、设置视频循环播放 Markup <video src="视频地址" loop="loop">当前浏览器不支持video标签</video> F、设置视频自动缓冲 Markup <video src="视频地址" autobuffer="autobuffer">当前浏览器不支持video标签</video> 注意:如果使用了autoplay属性的话,那么,autobuffer属性将会失效。
G、多个<video> 标签属性配合使用 我们可以在<video> 标签内,同时使用多个属性,比如,设置视频可以自动循环播放的同时,还带有控制视频暂停/播放的控件,演示代码如下:
Markup < video src="视频地址" autoplay="autoplay" controls="controls" loop="loop" >当前浏览器不支持video标签</video> 3、使用<source>标签设置多个视频资源 我们可以在<video>标签内放入多个<source> 标签, 就可以链接多个不同的视频资源文件,浏览器将根据<source>标签的先后顺序进行判断,优先选择最先支持的视频格式。 <video controls> <source src="shipin.webm" type="video/webm"> <source src="shipin.ogg" type="video/ogg"> <source src="shipin.mp4" type="video/mp4"> 当前浏览器不支持 video 标签 </video> 在<video>标签内使用<source> 标签插入相同视频的多个不同格式,这样就可以让不同的浏览器自动判断选择自己支持的视频格式,判断顺序是按照从上到下的顺序,直到浏览器选择自己支持的播放格式为止!
4、使用<track> 标签设置带有字幕的视频 下面,设置一个带有两个字幕轨道的视频,演示代码如下:
<video width="320" height="240" controls="controls"> <source src="shipin.mp4" type="video/mp4" /> <source src="shipin.ogg" type="video/ogg" /> <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese"> <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English"> </video>
<track> 标签可以为<video>标签之类的媒体资源规定字幕文件,或其他的外部文本文件,当媒体资源播放时,这些文本是可见的。
一个video标签可以包含多个<track>标签 。 相关连接:<track> 标签的用法及作用
5、video标签的浏览器兼容性问题 不同的浏览器可能支持的视频格式有所不同,但为了兼容更加的广泛,我们可以参看下面的代码实现更加优良的兼容性: <video> <!--如果浏览器支持video,也支持H.264,用movie.mp4--> <source src="movie.mp4"> <!--如果浏览器支持video,仅支持Ogg,用movie.ogv--> <source src="movie.ogg"> <!--如果浏览器不支持video,尝试Flash--> <object data="videoplayer.swf" type="application/x-shockwave-flash"> <param name="movie" value="movie.swf"/> </object> <!--如果浏览器不支持video,也不支持Flash,给出下载链接--> <a href="下载链接">当前浏览器不支持video标签,你可以下载该视频</a> </video> 以上代码仅供参考学习,随着html5应用越来越成熟,浏览器对video标签的兼容性也会越来越好,但为了照顾更早版本的浏览器,也有必要考虑尽量能兼容以前的版本! |