視頻彈窗自動播放 關閉停止

 通過js，實現點擊視頻，視頻彈窗並自動播放

HTML代碼

視頻網頁顯示部分
<div id="videopic" class="videopic">
                                <div id="gamevideostyle" class="gamevideostyle">
                                    <div id="gamevideo" class="gamevideo">
                                        <div id="gamevideoleft" class="gamevideoleft">
                                            <a href="javascript:;">
                                                <img src="img-shouye/15512387126842.jpg" alt="">
                                                <span><img src="img-shouye/span.png" alt=""></span>
                                            </a>
                                        </div>
                                        <div id="gamevideoright" class="gamevideoright">
                                            <a href="javascript:;">
                                                <img src="img-shouye/15512386055369.jpg" alt="">
                                                <span><img src="img-shouye/spans.png" alt=""></span>
                                            </a>
                                            <a href="javascript:;">
                                                <img src="img-shouye/15512385506036.jpg" alt="">
                                                <span><img src="img-shouye/spans.png" alt=""></span>
                                            </a>
                                            <a href="javascript:;">
                                                <img src="img-shouye/15512384995461.jpg" alt="">
                                                <span><img src="img-shouye/spans.png" alt=""></span>
                                            </a>
                                            <a href="javascript:;">
                                                <img src="img-shouye/15512384789014.jpg" alt="">
                                                <span><img src="img-shouye/spans.png" alt=""></span>
                                            </a>
                                            <a href="javascript:;">
                                                <img src="img-shouye/15512384553554.jpg" alt="">
                                                <span><img src="img-shouye/spans.png" alt=""></span>
                                            </a>
                                            <a href="javascript:;">
                                                <img src="img-shouye/15512367481680.jpg" alt="">
                                                <span><img src="img-shouye/spans.png" alt=""></span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div> 
視頻內容
<div id="videoup" class="videoup">
                        <div class="videoshow">
                            <video width="800px" height="449px" style="object-fit: fill"  controls="controls">
                                <source src="http://dota.cdn.longtugame.com:8080/video/give_me_five(finally).mp4" type="video/mp4">
                            </video>
                            <a  href="javascript:;" class="videoclose"></a>
                        </div>
                        <div class="videoshow">
                            <video width="800px" height="449px" style="object-fit: fill"  controls="controls">
                                <source src="http://dota.cdn.longtugame.com:8080/video/小冰冰傳奇綠燈俠.mp4" type="video/mp4">
                            </video>
                            <a href="javascript:;" class="videoclose"></a>
                        </div>
                        <div class="videoshow">
                            <video width="800px" height="449px" style="object-fit: fill"  controls="controls">
                                <source src="http://dota.cdn.longtugame.com:8080/video/小冰冰傳奇海王.mp4" type="video/mp4">
                            </video>
                            <a href="javascript:;" class="videoclose"></a>
                        </div>
                        <div class="videoshow">
                            <video width="800px" height="449px" style="object-fit: fill"  controls="controls">
                                <source src="http://dota.cdn.longtugame.com:8080/video/小冰冰傳奇神奇女俠.mp4" type="video/mp4">
                            </video>
                            <a href="javascript:;" class="videoclose"></a>
                        </div>
                        <div class="videoshow">
                            <video width="800px" height="449px" style="object-fit: fill"  controls="controls">
                                <source src="http://dota.cdn.longtugame.com:8080/video/小冰冰傳奇閃電俠.mp4" type="video/mp4">
                            </video>
                            <a href="javascript:;" class="videoclose"></a>
                        </div>
                        <div class="videoshow">
                            <video width="800px" height="449px" style="object-fit: fill"  controls="controls">
                                <source src="http://dota.cdn.longtugame.com:8080/video/小冰冰傳奇鋼骨.mp4" type="video/mp4">
                            </video>
                            <a href="javascript:;" class="videoclose"></a>
                        </div>
                        <div class="videoshow">
                            <video width="800px" height="449px" style="object-fit: fill"  controls="controls">
                                <source src="http://dota.cdn.longtugame.com:8080/video/小冰冰傳奇超人.mp4" type="video/mp4">
                            </video>
                            <a href="javascript:;" class="videoclose"></a>
                        </div>
                    </div>

網頁頁面顯示

js代碼部分

    var gamevideo=document.getElementById('gamevideo');
    var videoa=gamevideo.getElementsByTagName('a');
    var videoup=document.getElementById('videoup');
    var videoplay=videoup.getElementsByTagName('div');
    var videoclose=videoup.getElementsByTagName('a');
    var mainvideo=videoup.getElementsByTagName('video');
    for(var m=0;m<videoa.length;m++){
        videoa[m].index=m;
        videoa[m].onclick=function () {
            bgc.style.display='block';
            videoup.style.display='block';
            videoplay[this.index].style.display='block';
            mainvideo[this.index].play();
        };

        for(var mm=0;mm<videoa.length;mm++){
            videoclose[mm].index=mm;
            videoclose[mm].onclick=function () {
                bgc.style.display='none';
                videoplay[this.index].style.display='none';
                mainvideo[this.index].pause();
            };
        }
    }

彈窗顯示

點擊彈窗視頻右上角關閉彈窗 停止播放

這里通過video的play屬性實現點開之后自動播放

點擊關閉之后 video的pause來停止視頻的播放