HTML5 Video 视频
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 元素三种视频格式:
Ogg = 带有 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 browser 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 browser does not support the video tag. </video>
Internet Explorer
Internet Explorer 8 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的。
<video> 的
autoplay
controls
height
loop
preload
如果出现该,则视频在加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该。
src
width