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>标签属性
| 属性 | 值 | 描述 |
|---|---|---|
| src | url | 要播放的视频 URL地址。 |
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| width | pixels | 设置视频播放器的宽度。 |
| 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、设置自动播放视频
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标签的兼容性也会越来越好，但为了照顾更早版本的浏览器，也有必要考虑尽量能兼容以前的版本！
添加微信，免费咨询