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

简介: <p>如何检测您的浏览器是否支持HTML5视频,看下面代码:</p> <p></p> <pre code_snippet_id="533369" snippet_file_name="blog_20141126_1_8608487" name="code" class="javascript">function checkVideo(){ if(!!document.createE

如何检测您的浏览器是否支持HTML5视频,看下面代码:

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."
	}
} 
代码就是这么简单!!看看运行效果:


欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共同学习!

目录
相关文章
|
1月前
|
JavaScript 前端开发 开发者
如何检测浏览器是否支持最新的 image lazy loading 特性
如何检测浏览器是否支持最新的 image lazy loading 特性
19 0
|
1月前
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性,浏览器将不会翻译整个页面。
37 0
|
4月前
|
JavaScript 前端开发 小程序
js 实现浏览器下载视频2种方法
js 实现浏览器下载视频2种方法
482 0
|
9天前
|
移动开发 前端开发 JavaScript
如何实时准确地从HTML5视频中截取当前播放画面
如何实时准确地从HTML5视频中截取当前播放画面
24 4
|
11天前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
|
12天前
|
前端开发 JavaScript
浏览器通过构建DOM树来解析HTML代码
【4月更文挑战第30天】浏览器通过构建DOM树来解析HTML代码
24 1
|
27天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何检测浏览器是否支持某个特性?
【4月更文挑战第15天】使用Modernizr库检测浏览器特性:添加 `<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>` 到HTML,然后通过 `Modernizr.localstorage` 进行检测,如支持localStorage则执行相应代码,否则执行备用逻辑。
18 0
|
1月前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
28 0
|
2月前
|
Web App开发 前端开发 安全
编程笔记 html5&css&js 031 HTML视频
编程笔记 html5&css&js 031 HTML视频
|
3月前
|
Web App开发
将B站视频设置为浏览器背景,你确定不试试?
将B站视频设置为浏览器背景,你确定不试试?
35 0