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

2016-02-19 10:34 91 1 收藏

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

【 tulaoshi.com - Web开发 】


代码如下:

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"

来源:http://www.tulaoshi.com/n/20160219/1595103.html

延伸阅读
标签: Web开发
CSS3与HTML5的推出,也让各种浏览器的兼容性成了许多设计师关心的问题,本文以表格形式排列了目前 主流浏览器对于CSS3与HTML5支持情况 。 支持 CSS3 和 HTML5 的浏览器越来越多,甚至包括最新版的 IE,当然,所谓支持仅仅是部分支持,因为 CSS3 和 HTML5 的W3C 规范都尚未形成。如果你现在就希望使用 CSS3 和 HTML5 创建你的站点,至少要对各...
标签: Web开发
AJAX-浏览器支持 AJAX的要点是XMLHttpRequest对象。 不同的浏览器创建XMLHttpRequest对象的方法是有差异的。 IE浏览器使用ActiveXObject,而其他的浏览器使用名为XMLHttpRequest的JavaScript内建对象。 如需针对不同的浏览器来创建此对象,我们要使用一条"tryandcatch"语句。您可以在我们的JavaScript教程...
标签: Web开发
判断访问者的浏览器是否支持JavaScript和Cookies 许多网站需要客户端做许多复杂的工作,比如:用客户端 JavaScript 进行数据合法性校验,这需要客户浏览器的JavaScript enabled;使用 Session 变量记录身份等信息,需要浏览器 Cookies enabled。因此,有必要确定用户浏览器中的这些选项被打开。在我的网站中,我使用了一串简洁的代码实...
标签: Web开发
终究CSS3 和 HTML5 的组合会成为下一个Web标准,而且越来越多的浏览器开始支持更多的新属性,Firefox 3.5.3就给我们 带来了很多的惊喜,相信在以后也会。 是一个简单实用的在线应用,帮助我们检测使用的浏览器版本是否支持CSS3 和 HTML5,支持哪些属性。 让我们来看下当前 各种不同的浏览器对CSS3 和 HTML5的支持状况 吧。 排名第一的是Saf...
标签: Web开发
作为下一代的网页语言,HTML5 拥有很多让人期待已久的新特性,其中之一就是 video 标签,让开发者可以在网页中和添加图片一样简单的方式添加视频。在这篇文章中,我收集了7个很棒的HTML5视频播放器,你可以很容易的应用到你的网站 中,文章最后还将与大家分享使用 CSS3 和 jQuery 开发一个自定义 HTML5 视频播放器的教程。 VideoJS Video...

经验教程

208

收藏

47
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部