网站留住人气必备给网页右侧添加一个竖屏视频H5播放器

网站留住人气必备给网页右侧添加一个竖屏视频H5播放器

一个网站能不能让游客停留更多的时间，就看用什么去吸引游客了。停留的越久越好。

调用短视频链接即可，后端有txt文件直接批量添加，自动随机播放

自动切换下一个视频 竖屏版频也可以放自己服务器的视频

 

 网页调用代码

 <div class="video-div">
            <div id="main">
                <video id="player" src="video.php" controls controlsList="nodownload" webkit-playsinline playsinline autoplay="autoplay"></video>
            </div>
            <div id="buttons">
                <button id="switch">连续: 开</button>
                <button id="next">播放下一个</button>
            </div>
        </div>

JS代码【注意】将JS代码里搜索 video.php  改成你的域名/video.php 或者/子目录/video.php

<script>
        (function(window, document) {
            function IsPC() {
                var userAgentInfo = navigator.userAgent;
                var Agents = ["Android", "iPhone",
                    "SymbianOS", "Windows Phone",
                    "iPad", "iPod"
                ];
                var flag = true;
                for (var v = 0; v < Agents.length; v++) {
                    if (userAgentInfo.indexOf(Agents[v]) > 0) {
                        flag = false;
                        break;
                    }
                }
                return flag;
            }
            var ispc = IsPC();
            var calHeight = function() {
                if (ispc) {
                    var contentHeight = document.body.clientHeight - 150;
                } else {
                    var contentHeight = document.body.clientHeight - 40;
                }
                var videoH = get('video');

                var footerH = get('footer').offsetHeight
                videoH.style.height = (document.body.clientHeight - footerH - 40) + 'px'
                var topNh = get('top_nav').offsetHeight
                var calVideoWidth = contentHeight * 9 / 16;
                var player = document.getElementById('player')
                var footer = get('footer')
                if (player) {
                    player.addEventListener('canplay', function() {
                        footer.style.marginTop = (260) + 'px';
                    })
                    player.style.maxHeight = contentHeight + 'px'
                    player.style.maxWidth = calVideoWidth + 'px'

                }
            }
            if (top != self) {
                window.top.location.replace(self.location.href);
            }

            var get = function(id) {
                return document.getElementById(id);
            }
            var bind = function(element, event, callback) {
                return element.addEventListener(event, callback);
            }
            var auto = true;
            var player = get('player');

            var randomm = function() {
                player.src = 'video.php?_t=' + Math.random();
                player.play();
            }
            bind(get('next'), 'click', randomm);
            bind(player, 'error', function() {
                randomm();
            });
            bind(get('switch'), 'click', function() {
                auto = !auto;
                this.innerText = '连续: ' + (auto ? '开' : '关');
            });
            bind(player, 'ended', function() {
                if (auto) randomm();
            });
            calHeight()

            document.onkeydown = function(e) {
                console.log(e)
                if (e.keyCode == '40') {
                    randomm()
                }
            }

            if (!ispc) {
                var hvtcenter = get('hvtcenter')
                if (hvtcenter) {
                    hvtcenter.style.display = 'none'
                }
            }
             /**处理session 用户登录*/            
             var fscreen = document.getElementById('full_screen')
            if(fscreen){
                var sess = sessionStorage.getItem('customer')
                if(sess && sess == 'kuaidoushe'){
                    full_screen.style.display = "none"
                }else{                    
                    full_screen.style.display = "block"
                }              
                
            }
        })(window, document);

        var goto = function(type) {
            var homeBtn = document.getElementById("home")
            var aboutusBtn = document.getElementById("about_us")
            var messageBtn = document.getElementById("message_btn")
            var video = document.getElementById('video')
            var usDiv = document.getElementById('us')
            var messageDiv = document.getElementById('message')
            switch (type) {
                case 'home':
                    video.style.display = 'block';
                    usDiv.style.display = 'none';
                    messageDiv.style.display = 'none';
                    homeBtn.className = 'nav-item active';
                    aboutusBtn.className = 'nav-item cancel';
                    messageBtn.className = 'nav-item cancel';
                    break;
                case 'aboutus':
                    video.style.display = 'none';
                    usDiv.style.display = 'block';
                    messageDiv.style.display = 'none';
                    aboutusBtn.className = 'nav-item active';
                    homeBtn.className = 'nav-item cancel';
                    messageBtn.className = 'nav-item cancel';
                    break;
                case 'message':
                    video.style.display = 'none';
                    usDiv.style.display = 'none';
                    messageDiv.style.display = 'block';
                    messageBtn.className = 'nav-item active';
                    aboutusBtn.className = 'nav-item cancel';
                    homeBtn.className = 'nav-item cancel';
                    break;
            }

        }
        function validCode(){
           var code =  document.getElementById('dialog_code')
           if(code){
            if(code.value == '6666'){
                sessionStorage.setItem('customer', 'kuaidoushe');
                document.getElementById('full_screen').style.display = "none"
            }
           }
            
        }
    </script>

 

给网页添加一个快手抖音竖屏小姐姐视频H5播放器源码-PHP文档类资源-CSDN下载给网页添加一个快手抖音竖屏小姐姐视频H5播放器源码自动切换下一个视频竖屏版更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/foxi666/85207135