检测浏览器是否支持 HTML5 视频:
function checkVideo()
{
if(!!document.createElement('video').canPlayType)
{
varvidTest=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="Sorry.No video support."
}
else
{
if (h264Test=="probably")
{
document.getElementById("checkVideoResult").innerHTML="Yes!Full support!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="Well.Some support.";
}
}
}
else
{
if (oggTest=="probably")
{
document.getElementById("checkVideoResult").innerHTML="Yes!Full support!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="Well.Some support.";
}
}
}
else
{
document.getElementById("checkVideoResult").innerHTML="Sorry.No video support."
}
}
当前,video 元素支持三种视频格式:
Ogg = 带有 Theora视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和Vorbis 音频编码的 WebM 文件
control属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
<video>与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的内容
video 元素允许多个 source元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
Demo:
<videowidth="320" height="240" controls="controls">
<source src="movie.ogg"type="video/ogg">
<source src="movie.mp4"type="video/mp4">
Your browser doesnot support the video tag.
</video>
<video>标签的属性 HTML 5<video> 标签