HTML5-网页添加视频-菜鸟笔记

一、标签 <video>

在html5中，有这么个标签 <video> 标签。

<video> 允许你简单的嵌入一段视频。

二、浏览器的兼容性问题

 

• WebM 容器通常包括了 Ogg Vorbis 音频和 VP8/VP9 视频。主要在 FireFox 和 Chrome 当中支持。
• MP4 容器通常包括 AAC 以及 MP3 音频和 H.264 视频。主要在 Internet Explorer 和 Safari 当中支持。

三、如何添加视频代码例子

<video controls>
  <source src="xxx.mp4" type="video/mp4">　　 //xxx.mp4  前面的xxx是代表要播放的视频名称
  <source src="xxx.webm" type="video/webm">  //xxx.mp4 前面的xxx是代表要播放的视频名称
  <p>Your browser doesn't support HTML5 video. Here is a <a href="xxx.mp4">turn to the video</a> instead.</p>  //如果两个格式的视频都不能播放，这里有了herf标签，帮助选择跳转到对应的视频
</video>

  1、我们在浏览器中代码中，每个 <source> 标签页含有一个 type 属性，这个属性是可选的，如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。

  2、这里有两个<source> 标签，是为了不同浏览器支持的格式，能两者选一个去播放。

  3、control属性，是使用户必须能够控制视频和音频的回放功能。

  4、我们也可以添加其他属性，如width宽，height高，autoplay自动播放，loop循环，preload缓冲属性（"none（不缓冲）","auto（页面加载后缓存媒体文件）","metadata（仅缓冲文件的元文件）"），poster属性，这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。