您现在的位置是：网站首页> 编程资料编程资料

HTML5视频支持检测(检查浏览器是否支持视频播放)html5视频播放_动力节点Java学院整理 b站怎么切换到html5视频播放器的效果?使用HTML5在网页中嵌入音频和视频播放的基本方法HTML5中如何显示视频呢 HTML5视频播放demoHTML5视频播放插件 video.js介绍

2021-09-01 1070人已围观

简介 HTML5 提供了展示视频的标准。那么如何检查你的浏览器是否支持视频播放呢，下面与大家分享个小例子，感兴趣的朋友可以了解下哈


复制代码
代码如下:

现在越来越多的网站都提供视频播放（非插件）。HTML5 提供了展示视频的标准。那么如何检查你得浏览器是否支持视频播放呢，下面我们来写一个列子。


复制代码
代码如下:





HTML 5 视频


检测您的浏览器是否支持 HTML5 视频：









下边是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视频播放demohtml5视频播放_动力节点Java学院整理 html5 视频播放解决方案浅谈基于HTML5的在线视频播放方案HTML5中的音频和视频媒体播放元素小结HTML5 视频播放(video),JavaScript控制视频的实例代码

下一篇：html5的画布canvas——画出弧线、旋转的图形实例代码+效果图调用HTML5的Canvas API绘制图形的快速入门指南深入解析HTML5 Canvas控制图形矩阵变换的方法实例讲解利用HTML5 Canvas API操作图形旋转的方法HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvahtml5-Canvas可以在web中绘制各种图形H5最强接口之canvas实现动态图形功能

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网