每日进步一点点：用CanPlayType方法测试google、IE、火狐浏览器对video的兼容性

最新推荐文章于 2023-10-19 16:39:45 发布

TimyChen

最新推荐文章于 2023-10-19 16:39:45 发布

阅读量761

点赞数

CC 4.0 BY-SA版权

分类专栏：自学感悟

本文链接：https://blog.youkuaiyun.com/TimyChen/article/details/50513374

自学感悟专栏收录该内容

10 篇文章

订阅专栏

本文通过测试展示了不同浏览器对于webm、ogv和mp4等视频格式的支持情况。结果显示，IE不支持以上三种格式；Google浏览器支持mp4和webm，但不支持ogv；Firefox的表现与Google浏览器相同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>example</title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<video id="media" controls="controls" preload="metadata" width="360" height="240">
			video cannot be displayed
		</video>
		<table id="info" border="1">
			<tr><th>property</th><th>value</th></tr>
		</table>
		<script>
			var mediaelem=document.getElementById("media");
			var tableelem=document.getElementById("info");
			var mediaFiles=["1.mp4","1.ogv","1.webm"];
			var mediaType=["video/mp4","video/ogv","video/webm"];
			for(var i=0;i<mediaType.length;i++){
				var playable=mediaelem.canPlayType(mediaType[i]);
				if(!playable){
					playable="no";
				}
				tableelem.innerHTML+="<tr><td>"+mediaType[i]+"</td><td>"+playable+"</td></tr>";
				if(playable=="probably"){
					mediaelem.src=mediaFiles[i];
				}
			}
		</script>
	</body>
</html>

IE测试结果