开发者俱乐部

标题: [HTML5] HTML5视频标签的应用 [打印本页]

---

作者: xman    时间: 2016-3-15 21:44
标题: [HTML5] HTML5视频标签的应用
与音频一样，在过去，我们如果想在Web上播放视频，也是都是通过Flash来播放，同样并不是所有的浏览器都安装了Flash播放器插件，而现在我们在HTML5中，就能完全脱离Flash或其他的插件来播放视频了。

    video标签：

	IE9	FireFox 5.0	Safari 5.5	Chrome 12	Opera 11.5
Mpeg4	√	×	√	√	×
Ogg	×	√	×	√	√
WebM	×	√	×	√	√

    Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

    MPEG4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件


    WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

    video标签的属性有：

属性	值(可省略)	描述
src	url	要播放的视频的 URL，路径可为网络路径或相对路径。
controls	controls	向用户显示控件，比如播放按钮。
loop	loop	每当视频结束时重新开始播放。
preload	preload	视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
autoplay	autoplay	则视频在就绪后马上播放。
width	autoplay	则视频的宽度。
height	autoplay	则视频的高度。

    注：video的属性与audio的属性基本一致，只不过多出了Width和height属性。


    source子标签

    此标签是用来指定视频的路径，一般存在此子标签的时候则不能再video中出现src属性，在不同的浏览器下对video标签有不同的视频支持，那么我们为了让其能够在不同的浏览器下播放，可以有多种视频格式，那么我们只需要加入此标签，来指定视频即可，浏览器则会是video播放所支持的视频格式。Source有两个属性，分别是：

属性	描述
src	要播放的视频的 URL，路径可为网络路径或相对路径。
type	视频类型

• <h1>请看视频，视频来自搜狗浏览器首页的实验室：</h1>
• <video width="600" height="400" controls="controls" autoplay="true">
•         <source src="http://ie.sogou.com/lab/inc/BigBuckBunny.mp4" type="video/mp4"/>
•         <source src="http://ie.sogou.com/lab/inc/BigBuckBunny.ogv" type="video/ogg"/>
• </video>
  

[color=rgb(51, 102, 153) !important]复制代码

---

欢迎光临 开发者俱乐部 (http://xodn.com/)

Powered by Discuz! X3.2