视频弹窗自动播放 关闭停止

 通过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来停止视频的播放