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

宥嗜

宥嗜

2016-02-19 11:21

下面是个超简单的检测浏览器是否支持html5视频的代码教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

在http://www.w3school.com.cn学习html5的时候,看到一个检测您的浏览器是否支持 HTML5 视频的方法:

运行效果:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

1.在EditPlus中运行

2.在chrome浏览器中运行

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

=======================================================

代码部分:

=======================================================

代码如下:

!DUCTYPE HTML
html
script type="text/javascript"
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="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."
}
}
/script
body
p检测您的浏览器是否支持 HTML5 视频:/p
div id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0;"
button onclick="checkVideo()" style="font-family:Arial, Helvetica, sans-serif;"Check/button
/div
/body
/html

展开更多 50%)
分享

猜你喜欢

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

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

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

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

s8lol主宰符文怎么配

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

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

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

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

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

lol偷钱流符文搭配推荐

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

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

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

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

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

lolAD刺客新符文搭配推荐

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

两种比较常见的蓝屏解决方法

两种比较常见的蓝屏解决方法

iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果

iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果
下拉加载更多内容 ↓