兼容windows、mac的视频播放

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

你可能感兴趣的:(前端,视频,video,swf)