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

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

转载请注明来源网址：https://www.mubanyun.com/bcyy/2730.html