HTML5视频支持检测(检查浏览器是否支持视频播放)
程序员文章站
2023-11-21 12:57:52
HTML5 提供了展示视频的标准。那么如何检查你的浏览器是否支持视频播放呢,下面与大家分享个小例子,感兴趣的朋友可以了解下哈... 13-06-08...
复制代码
代码如下:<strong>现在越来越多的网站都提供视频播放(非插件)。html5 提供了展示视频的标准。那么如何检查你得浏览器是否支持视频播放呢,下面我们来写一个列子。</strong>
复制代码
代码如下:<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<h1>html 5 视频</h1>
<p>检测您的浏览器是否支持 html5 视频:</p>
<div id="checkvideoresult" style="margin:10px 0 0 0; border:0; padding:0;">
<button style="font-family:arial, helvetica, sans-serif;" onclick="checkvideo()">check</button>
</div>
</div>
</body>
</html>
下边是js代码:
复制代码
代码如下:function checkvideo()
{
if(!!document.createelement('video').canplaytype)
{
//创建video元素
var vidtest=document.createelement("video");
//检测是否可以播放ogg格式的视频
oggtest=vidtest.canplaytype('video/ogg; codecs="theora, vorbis"');
if (!oggtest)
{
//检测是否可以播放mp4格式的视频
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."
}
}
复制代码
代码如下:canplaytype方法说明:
1.定义:检测浏览器是否能播放指定的音频/视频类型。
2.返回值:
"probably" ,表示浏览器最可能支持该视频或音频。
"maybe" ,表示浏览器可能支持该视频或音频。
"" (空字符串),表示浏览器不支持该视频或音频。
注:internet explorer 8 以及更早版本不支持该方法。
语法:audio|video.canplaytype(type))
参数说明:
type:要检测的音频或视频类型,
常用值:video/ogg;video/mp4;video/webm; audio/mpeg;audio/ogg;audio/mp4
常用值(包括要检测的音频或视频编解码器):
video/ogg; codecs="theora, vorbis"
video/mp4; codecs="avc1.4d401e, mp4a.40.2"
video/webm; codecs="vp8.0, vorbis"
audio/ogg; codecs="vorbis"
audio/mp4; codecs="mp4a.40.5"
推荐阅读
-
检测浏览器是否支持html5视频的代码
-
HTML5视频支持检测(检查浏览器是否支持视频播放)
-
win10 Build 10130 Edge浏览器新特性:支持视频全屏播放
-
Win10预览版10547:Edge浏览器支持谷歌VP9视频流播放功能
-
html5 placeholder 属性 并检测浏览器是否支持这个属性
-
HTML5视频支持检测
-
html5 placeholder 属性 并检测浏览器是否支持这个属性
-
使用js检测浏览器是否支持html5中的video标签的方法_javascript技巧
-
html5中浏览器是否能播放指定的音频/视频类型的方法canPlayType()
-
使用js检测浏览器是否支持html5中的video标签的方法_javascript技巧