元素

  1. 元素实现嵌入一段视频到网页。例如：
  1. <video src="rabbit320.webm" controls>
  2.   <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
  3. </video>
  • src 属性指向你想要嵌入网页当中的视频资源。
  • control 是布尔属性，向用户显示控件，比如播放按钮。你可以使用浏览器提供的控制接口，同时你也可以使用合适的 JavaScript API构建控制接口。
  • 标签内的段落，当浏览器不支持 标签的时候，它将会显示出来，它使我们能够对旧的浏览器做一些兼容处理。
  1. 这里有一个问题，浏览器的编解码器不一定支持所有格式的文件，所以你得使用几个不同格式的文件来兼容不同的浏览器。
<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

将不同格式的文件放在几个单独的标签 当中。浏览器将会检查 标签，并且播放第一个与其自身编解码器相匹配的媒体。你的视频应当包括 WebM 和 MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。

每个 标签页含有一个 type 属性，这个属性是可选的，但是建议你添加上这个属性 — 它包含了视频文件的媒体类型（指示文件类型的字符串，例如一个声音文件可能被标记为 audio/ogg，一个图像文件可能是 image/png），浏览器会通过检查这个属性来迅速的跳过那些不支持的格式（提高性能）。

  • 各浏览器对视频格式的支持情况

vedio.png

  1. 元素的其他属性 | 属性 | 功能 | | :—- | —- | | width 和 height | 控制视频的尺寸 | | autoplay | 这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。不建议使用。布尔元素 | | loop | 这个属性可以让音频或者视频文件循环播放。同样不建议使用。布尔元素 | | muted | 这个属性会导致媒体播放时，默认关闭声音。布尔元素 | | poster | 这个属性指向了一个图像的URL，这个图像会在视频播放前显示。（视频封面）poster=”poster.png” | | preload | 这个属性被用来缓冲较大的文件，有3个值可选：“none” ：不缓冲“auto” ：页面加载后缓存媒体文件“metadata” ：仅缓冲文件的元数据 |

值得注意：在Chrome浏览器中，autoplay属性被禁用了，除非添加了muted属性。