HTML5视频支持检测(检查浏览器是否支持视频播放)

elaine198945

elaine198945

2016-02-19 10:34

有了下面这个HTML5视频支持检测(检查浏览器是否支持视频播放)教程,不懂HTML5视频支持检测(检查浏览器是否支持视频播放)的也能装懂了,赶紧get起来装逼一下吧!

代码如下:

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
h1HTML 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"
展开更多 50%)
分享

猜你喜欢

HTML5视频支持检测(检查浏览器是否支持视频播放)

Web开发
HTML5视频支持检测(检查浏览器是否支持视频播放)

检测浏览器是否支持html5视频的代码

Web开发
检测浏览器是否支持html5视频的代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

傲游浏览器3开始支持HTML5视频

浏览器
傲游浏览器3开始支持HTML5视频

html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式

Web开发
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

html5中canvas学习笔记2-判断浏览器是否支持canvas

Web开发
html5中canvas学习笔记2-判断浏览器是否支持canvas

检测浏览器是否支持CSS3的方法

Web开发
检测浏览器是否支持CSS3的方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

删除mysql数据库中的重复数据记录

删除mysql数据库中的重复数据记录

[JS]实现动态增加框架!未完成

[JS]实现动态增加框架!未完成
下拉加载更多内容 ↓