HTML5 Video(视频)
优质
小牛编辑
118浏览
2023-12-01
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."
}
}
很多站点都会使用到视频. HTML5 提供了展示视频的标准。
检测您的浏览器是否支持 HTML5 视频：
Web站点上的视频
直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
浏览器支持
你的浏览器不支持 HTML5 video. var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=600; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=480; }
上面的例子调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。
var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=600; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=480; }更多参考请查看 HTML5 Audio/Video DOM 参考手册。
HTML5 Video 标签
| 标签 | 描述 |
|---|---|
| <video> | 定义一个视频 |
| <source> | 定义多种媒体资源,比如 <video> 和<audio> |
| <track> | 定义在媒体播放器文本轨迹 |