更换视频播放按钮

最新推荐文章于 2024-06-19 16:42:00 发布
小铁柱来咯
最新推荐文章于 2024-06-19 16:42:00 发布
阅读量680
点赞数
分类专栏： js
本文链接：https://blog.csdn.net/Supercaojh/article/details/81184485
版权
js 专栏收录该内容
14 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$Think.config.sitename}</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
    <link href="{$Think.HTML_STATIC}/css/mui.css" rel="stylesheet">
    <link rel="stylesheet" href="{$Think.HTML_STATIC}/css/showimgs.css">
    <link rel="stylesheet" type="text/css" href="{$Think.HTML_STATIC}/css/webuploader.css">
    <link href="{$Think.HTML_STATIC}/css/add.css" rel="stylesheet" type="text/css">
    <link href="{$Think.HTML_STATIC}/css/style.css" rel="stylesheet">
    <style type="text/css">
   
        .videoPlay{position: absolute;z-index: 5;left: 50%;top: 50%;margin-left: -2.25rem;margin-top: -2.25rem;}
        .videoPlay img{width: 4.5rem;height: 4.5rem;}
        video{width: 100%;}
    </style>

</head>
<body class="bodyb">

<div class="asktopss">
    <div class="m" style="width:100%;position: relative;">
        <video id="video" preload="auto" 
            poster="{$stagearticle.a_img}"  webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" 
            x5-playsinline="true" style="object-fit: fill;" src="{$stagearticle.a_video}" >
        </video>
        <i class="video-i videoPlay" id="play" data-src="{$stagearticle.a_video}">
             <img src="{$Think.HTML_STATIC}/images/125.png" class="video-go " />
        </i>
    </div>


<script type="text/javascript">
    // js代码
 /**
         * 视频加载兼容处理
         */
        var creat_video = function() {
            var _video = document.getElementsByClassName('video-i');
            var video=document.getElementById('video')
            if (_video.length > 0) {
                for (var i = 0; i < _video.length; i++) {
                    var _that = _video[i];
                    _that.addEventListener('click', function(e) {
                        var _this = e.currentTarget,
                            _videoUrl = _this.getAttribute('data-src'),
                            _img = _this.children[0].getAttribute('src'),
                            _dom = document.createElement('video'),
                            _autoPlayAllowed = true,
                            _loading = document.createElement('div'),
                            _p,
                            _process = document.createElement('i');
                            _noSound = document.createElement('em');
                        if (_this.getAttribute('data-video')) {
                            var _video = _this.parentNode.querySelectorAll('video');
                            var _noSound = _this.parentNode.querySelectorAll('.no-sound');
                            if (_video.length > 0) {
                                _dom = _video[0];
                                // if (_dom.ended) {
                                if (isIPhone) {
                                    //修改Ios11状态不准，视频无法播放的问题
                                    if (_dom.src.indexOf('random') > -1) {
                                        _dom.src = _dom.src.split('random=')[0] + 'random=' + _dom.src.split('random=')[1] + 1;
                                    } else {
                                        _dom.src = _dom.src + '?random=' + Math.floor(Math.random() * (100 - 10 + 1) + 10);
                                    }
                                }
                                video.classList.add('hide')
                                _noSound[0].classList.remove('hide');
                                _dom.play();
                                _this.classList.add('hide');
                                _dom.classList.remove('hide');
                                // }
                            }
                            return;
                        }
                        _this.setAttribute('data-video', '1');
                        _process.setAttribute('class', 'vjs-process');
                        _dom.setAttribute('style', 'object-fit: fill !important');
                        _dom.setAttribute('poster', '{$stagearticle.a_img}');
                        _dom.setAttribute('preload', 'auto');
                        _dom.setAttribute('controls', 'controls');
                        _dom.setAttribute("webkit-playsinline",'true')
                        _dom.setAttribute('x-webkit-airplay','true')
                        _dom.setAttribute('playsinline','true')
                        _dom.setAttribute('x5-playsinline','true')
                        _dom.setAttribute('autoPlay', 'false');
                        _loading.setAttribute('class', 'vjs-loading-spinner');
                        _dom.setAttribute('src', _videoUrl);
                        // _dom.setAttribute('x5-video-player-type', 'h5');
                        _this.parentNode.appendChild(_loading);
                        _this.parentNode.appendChild(_process);
                        _this.parentNode.classList.add('vjs-waiting');
                        _noSound.setAttribute('class', 'no-sound');
                        // _dom.setAttribute('webkit-playsinline', 'webkit-playsinline');
                        // _dom.setAttribute('playsinline', 'playsinline');
//                      _dom.setAttribute('poster', _img);
                        _p = _dom.play();
                        console.time("加载毫秒");
                        var _dom_buffered_promise = function() {
                            var _end = _dom.buffered.end(0);
                            var _duration = _dom.duration;
                            var _a = Math.round(_end / _duration * 100);
                            _process.innerHTML = _a + '%';
                            console.log(_end + ' ' + _duration)
                            if (_a < 10) {
                                setTimeout(_dom_buffered, 200);
                            } else {
                                _dom_buffered();
                            }
                        };
                        var _dom_buffered = function() {
                            video.classList.add('hide')
                            _this.parentNode.classList.remove('vjs-waiting');
                            _this.classList.add('hide');
                            _process.classList.add('hide');
                            _this.parentNode.appendChild(_dom);
                            _dom.addEventListener('ended', function() {
                                console.log("ok")
                            });
                            _dom.currentTime = 0;
                            console.timeEnd("加载毫秒");
                        };
                        if (_p instanceof Promise) {
                            _p.catch(function(error) {
                                console.log(error.message);
                                if (error.name === 'NotAllowedError') {
                                    _autoPlayAllowed = false;
                                }
                            }).then(function(e) {
                                if (_autoPlayAllowed) {
                                    _dom_buffered_promise();
                                }
                            });
                        } else {
                            //ios8-9拿不到promise需要给个延时处理
                            setTimeout(function() {
                                _dom_buffered();
                            }, 4000);
                        }
                    });
                }
            }
        };

new creat_video();

</script>
</body>
</html>
小铁柱来咯
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
更换视频播放按钮

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;{$Think.config.sitename}&lt;/title&gt; &lt;meta content="width=dev
复制链接

扫一扫
专栏目录