您的位置：首页 > 其它

兼容windows、mac的视频播放

2016-04-13 11:08 204 查看

1、windows和mac下video的区别

在windows浏览器下播放视频，基本上都是可以用embed标签去解决，嵌套一个swf的外壳就可以实现视频的播放（我这里选择ckplayer的swf外壳，它里面提供了js，我这里只用把embed里面的代码拷出来，然后player文件夹下面的内容加载一下就可以了，没必要加载js）

在mac下，不支持swf或者提示要安装flash插件，这里采用video即可

2、代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频播放</title>
</head>
<body>

<embed allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#FFF" wmode="transparent"
src="ckplayer/ckplayer.swf" flashvars="f=../FrontEnd.mp4&c=0&b=1"
width="600" height="400" align="left"
type="application/x-shockwave-flash">

<script>

var userAgent = navigator.userAgent.toLowerCase();

if (/safari/.test(userAgent) && /mac/.test(userAgent)) {

var domEmbeds = document.getElementsByTagName('embed');
for (var i = 0; i < domEmbeds.length; i++) {
var domEmbed = domEmbeds[i];
var sFlashvars = domEmbed.getAttribute('flashvars'),
sUrl = sFlashvars.substring(2, sFlashvars.indexOf('&')),
sWidth = domEmbed.getAttribute('width'),
sHeight = domEmbed.getAttribute('height'),
sAlign = domEmbed.getAttribute('align');

var domVideo = document.createElement('video');
domVideo.setAttribute('width', sWidth);
domVideo.setAttribute('height', sHeight);
domVideo.setAttribute('align', sAlign);
domVideo.setAttribute('controls', 'controls');
domVideo.setAttribute('autoplay', 'autoplay');

var domSource = document.createElement('source');
domSource.setAttribute('src', sUrl);
domSource.setAttribute('type', 'video/mp4');

domVideo.appendChild(domSource);

domEmbed.parentNode.insertBefore(domVideo, domEmbed);
domEmbed.parentNode.removeChild(domEmbed);

}
}

</script>
</body>
</html>


3、Github代码地址

https://github.com/cangowu/player
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航