HTML5视频video

直到现在，仍然不存在一项旨在网页上显示视频的标准。

目前，大多数视频是通过插件（比如 flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

html5 规定了一种通过 video 元素来包含视频的标准方法。

当前html5只支持三种格式的视频。

格式

ie

firefox

opera

chrome

safari

ogg

no

3.5+

10.5+

5.0+

mpeg 4

9.0+

3.0+

webm

4.0+

10.6+

6.0+

注：

ogg = 带有 theora 视频编码和 vorbis 音频编码的 ogg 文件

mpeg4 = 带有 h.264 视频编码和 aac 音频编码的 mpeg 4 文件

webm = 带有 vp8 视频编码和 vorbis 音频编码的 webm 文件

开发例子源码如下：

解释：

1、control 属性供添加播放、暂停和音量控件。

2、<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。

3、video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

支持的部分属性列举：

属性

值

描述

<a target="_blank" href="http://www.w3school.com.cn/tags/att_video_autoplay.asp">autoplay</a>

autoplay

如果出现该属性，则视频在就绪后马上播放。

<a target="_blank" href="http://www.w3school.com.cn/tags/att_video_controls.asp">controls</a>

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

<a target="_blank" href="http://www.w3school.com.cn/tags/att_video_height.asp">height</a>

pixels

设置视频播放器的高度。

<a target="_blank" href="http://www.w3school.com.cn/tags/att_video_loop.asp">loop</a>

loop

如果出现该属性，则当媒介文件完成播放后再次开始播放。

<a target="_blank" href="http://www.w3school.com.cn/tags/att_video_preload.asp">preload</a>

preload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

<a target="_blank" href="http://www.w3school.com.cn/tags/att_video_src.asp">src</a>

url

要播放的视频的 url。

<a target="_blank" href="http://www.w3school.com.cn/tags/att_video_width.asp">width</a>

设置视频播放器的宽度。

欢迎大家关注我的博客！如有疑问,请加qq群：135430763共同学习！