兼容windows、mac的视频播放

最新推荐文章于 2021-06-16 20:02:26 发布

cangowu

最新推荐文章于 2021-06-16 20:02:26 发布

阅读量1.4k

点赞数

分类专栏： javascript 文章标签：前端 video 视频 swf

本文链接：https://blog.csdn.net/wzgdjm/article/details/51141501

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

cangowu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
兼容windows、mac的视频播放

1、windows和mac下video的区别在windows浏览器下播放视频，基本上都是可以用embed标签去解决，嵌套一个swf的外壳就可以实现视频的播放（我这里选择ckplayer的swf外壳，它里面提供了js，我这里只用把embed里面的代码拷出来，然后player文件夹下面的内容加载一下就可以了，没必要加载js）在mac下，不支持swf或者提示要安装flash插件，这里采用vide
复制链接

扫一扫