使用H5与flash兼容不同浏览器的视频播放

通过

 var hasVideo = !!(document.createElement('video').canPlayType);

判断当前浏览器是否支持<video>标签，如果支持，则使用h5自带的<video>标签播放，否则，使用flash播放。

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<script src="http://js.kuwo.cn/yinyue/webmv/swfobject.js"></script>
		<style>
			#video_play{width:500px;margin:0 auto;}
		</style>
	</head>
	<body>
		<!--视频播放-->
		<div class="content1" style="margin-top:40px;" id="video_play">
			<div class="video_box">
				<div id="video_box_left"><video src="http://media.cdn.kuwo.cn/resource/m1/webkge/2015/7/10/201507101126_4.mp4" id="video_show" width="100%" height="100%" controls="controls"></video></div>
			</div>
		</div>
		<!--flash视频播放-->
		<div class="content1" style="margin-top:40px;display:none;" id="flash_play">
			<div class="video_box">
				<div class="video_w" id="videoDivhtmlid" style="float:left;">
					<div id="videoDiv">
						
					</div>
				</div>
				<h6 class="clear">
			</div>
		</div>
	</body>
	<script>
		//判断是否支持video标签
        var hasVideo = !!(document.createElement('video').canPlayType);
        function is_use_video(){
			if (hasVideo==false){
				document.getElementById('video_play').style.display='none';
				document.getElementById('flash_play').style.display='block'
			}else{
				document.getElementById('video_play').style.display='block';
				document.getElementById('flash_play').style.display='none'
			}
		}
		is_use_video();
		//初始化
		var SWF_ID = "KwVideo";
		var SWF_NAME = "http://www.kuwo.cn/yy/jsp/webMv/KwVideo.swf?05";
		function EmbedSWF_SWF(divId, mp4Url){
			var flashvars = {
				url: mp4Url
			};
			var params = {
				allowFullscreen: "true",
				allowScriptAccess: "always",
				autostart:'no',
				wmode: "transparent" // can cause issues with FP settings & webcam
			};
			var attributes = {
				id: SWF_ID,点击打开链接
				name: SWF_ID
			};
			swfobject.embedSWF(
				SWF_NAME,
				//这里可以设置播放设置播放视频宽高
				divId, "950", "528", "10.0.0", 
				"expressInstall.swf",
				flashvars, params, attributes
			);
		}
		function playflashmv(urlmp4) {
			var html = [];
			html[html.length] = '<div id="videoDiv">';
			//html[html.length] = '<a href="javascript:playflashmv(\'http://media.cdn.kuwo.cn/resource/m1/webkge/2015/7/10/201507101126_4.mp4\');" class="butm_middle"></a>';
			html[html.length] = '</div>';
			$('#videoDivhtmlid').html(html.join(""));
			EmbedSWF_SWF("videoDiv", urlmp4);
		}
		playflashmv('http://media.cdn.kuwo.cn/resource/m1/webkge/2015/7/10/201507101126_4.mp4');
	</script>
</html>

demo入口:点击打开链接

使用H5与flash兼容不同浏览器的视频播放

猜你喜欢