html5 提供了 <video> 元素用于在网页中展示视频
检测浏览器 支持
我们可以使用下面的 JavaScript 脚本来检测浏览器是否 支持 html5 视频和 支持 视频的格式
function?checkVideo(){
if(!!document.createElement('video').canPlayType)
??{
var?vidTest=document.createElement("video");
??oggTest=vidTest.canPlayType('video/ogg;?codecs="theora,vorbis"');
??if?(!oggTest)
????{
????h264Test=vidTest.canPlayType('video/mp4;?codecs="avc1.42E01E,mp4a.40.2"');
????if?(!h264Test)
??????{
??????document.getElementById("checkVideoResult").innerHTML="抱歉你的浏览器 不支持 HTML5?video 标签 ！"
??????}
????else
??????{
??????if?(h264Test=="probably")
????????{
????????document.getElementById("checkVideoResult").innerHTML="非常棒！你的浏览器 支持 HTML5?video 标签 ";
????????}
??????else
????????{
????????document.getElementById("checkVideoResult").innerHTML="Meh.?Some?support.";
????????}
??????}
????}
??else
????{
????if?(oggTest=="probably")
??????{
??????document.getElementById("checkVideoResult").innerHTML="非常棒！你的浏览器 支持 HTML5?video 标签 ！";
??????}
????else
??????{
??????document.getElementById("checkVideoResult").innerHTML="Meh.?Some?support.";
??????}
????}
??}
else
??{
??document.getElementById("checkVideoResult").innerHTML="Sorry.?No?video?support."
??}
}
Web 上的视频
直到现在，仍然不存在一项旨在网页上 显示 视频的标准。
今天，大多数视频是通过 插件 （比如 Flash）来 显示 的。然而，并非所有浏览器都拥有同样的 插件 。
HTML5 规定了一种通过 video 元素来包含视频的标准 方法 。
视频格式
当前，video 元素 支持 三种视频格式：
格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ NoOgg = 带有 Theora 视频编码 和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码 和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码 和 Vorbis 音频编码的 WebM 文件
如何工作
如需在 HTML5 中 显示 视频，您所有需要的是：
<video?src="movie.ogg"?controls="controls"> </video>
controls 属性 供 添加 播放、暂停和音量控件。
包含宽度和高度 属性 也是不错的主意。
<video> 与 </video> 之间插入的 内容 是供 不支持 video 元素的浏览器 显示 的：
实例
<video?src="movie.ogg"?width="320"?height="240"?controls="controls">
Your? bro wser?does?not?support?the?video?tag.
</video>
上面的例子使用 一个 Ogg 文件 ，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频 文件 必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以 链接 不同的视频 文件 。浏览器将使用第 一个 可识别的格式：
实例
<video?width="320"?height="240"?controls="controls">
??<source?src="movie.ogg"?type="video/ogg">
??<source?src="movie.mp4"?type="video/mp4">
Your? bro wser?does?not?support?the?video?tag.
</video>
Internet Explorer
Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的 支持 。
<video> 标签 的 属性 属性 值 描述
a utop lay
a utop lay 如果出现该 属性 ，则视频在就绪后马上播放。controls
controls 如果出现该 属性 ，则向 用户 显示 控件，比如播放按钮。height
pixels 设置视频播放器的高度。loop
loop 如果出现该 属性 ，则当媒介 文件 完成播放后再次开始播放。preload
preload如果出现该 属性 ，则视频在 页面 加载时进行加载，并预备播放。
如果使用 "a utop lay"，则忽略该 属性 。
src
url 要播放的视频的 URL。width
pixels 设置视频播放器的宽度。 HTML 5 Video + DOM ? ?HTML5 新元素