首页 » 编程语言 » html » 正文

HTML5标签:video元素的使用方法及作用

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>标签属性

属性描述
srcurl要播放的视频 URL地址。
autoplay
autoplay如果出现该属性,则视频在就绪后马上播放。
controls
controls如果出现该属性,则向用户显示控件,比如播放按钮。
widthpixels设置视频播放器的宽度。
height
pixels设置视频播放器的高度。
loop
loop如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted
muted如果出现该属性,视频的音频输出为静音。
autobuffer
autobuffer
设置视频缓冲
poster
URL规定视频正在下载时显示的图像,直到用户点击播放按钮。
preload
auto
metadata
none

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

auto - 当页面加载后载入整个视频;

meta - 当页面加载后只载入元数据;

none - 当页面加载后不载入视频;

<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、设置自动播放视频

<video src="视频地址" autoplay="autoplay" >当前浏览器不支持video标签</video>

D、设置有播放、暂停、音量控件的视频

<video src="视频地址"  controls="controls">当前浏览器不支持video标签</video>

E、设置视频循环播放

<video src="视频地址"  loop="loop">当前浏览器不支持video标签</video>

F、设置视频自动缓冲

<video src="视频地址" autobuffer="autobuffer">当前浏览器不支持video标签</video>

注意:如果使用了autoplay属性的话,那么,autobuffer属性将会失效。 

G、多个<video> 标签属性配合使用

我们可以在<video> 标签内,同时使用多个属性,比如,设置视频可以自动循环播放的同时,还带有控制视频暂停/播放的控件,演示代码如下:

< 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标签的兼容性也会越来越好,但为了照顾更早版本的浏览器,也有必要考虑尽量能兼容以前的版本!



欢迎您发表评论或留言