今天公司网站要插入一个视频，公司介绍视频，折腾了好久都不识别视频标签，后来突然想到，这已经是html5了，尝试放一个html5标签试试，结果真的好用了，简介大方高大上！
今天公司网站要插入一个视频，公司介绍视频，折腾了好久都不识别视频标签，后来突然想到，这已经是html5了，尝试放一个html5标签试试，结果真的好用了，简介大方高大上！接下来是我的记录：
HTML5 是有 <video></video> 标签的，可以像以前用 <img></img> 标签插入图片一样来插入视频了。例如，
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag. 您的浏览器不支持视频标签。
</video>
当然也可以这样，
<video src="movie.mp4" type="video/mp4" width="640" height="360" controls>
Your browser does not support the video tag. 您的浏览器不支持视频标签。
</video>
真的是简单到无以复加。其中，
controls属性为视频添加诸如播放、暂停和音量调节等基本控制功能。类似的属性还有autoplay、muted、loop 等。width和height指定视频显示在网页中占的位置大小。<source>给出视频源文件，如果有多个则浏览器会选取最先遇到的、能支持的那个，或者直接在<video>中用src给出唯一一个视频源文件。- <video></video> 里除
<source>外的那行字，只有当浏览器不支持这些标签的时候才会显示，让用户知道发生了什么情况。 - 还可以使用
poster属性设置一张图片作为封面，
<video src="movie.mp4" type="video/mp4" poster="url-to-cover.png" width="640" height="360" controls>
Your browser does not support the video tag. 您的浏览器不支持视频标签。
</video>
- 还可以使用
<track>内嵌字幕的（详见这里），
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitle_en.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag. 您的浏览器不支持视频标签。
</video>
现在所有的主流浏览器都支持这种标记，也基本都支持这几种视频格式。貌似也仅支持这几种视频格式，其中 Ogg 和 Google 推出的 WebM 这种格式的支持率可能要差些。详见这里。
然后就是如果有闲还可以利用 CSS 和 JavaScript 为之增加各种效果和功能，可以参考这里。WordPress 本身也很早就开始注意整合对音视频资源的支持了。
当然对音频的支持也不会缺，标签为 <audio></audio>。
但是有个问题需要注意，就是如果这个视频或者音频是公共的，别人也是可以拿来用的，除非你有防盗链功能。否则被别人用了之后，会占用服务器的带宽。