Video autoplay pop stop closed

 js, click on the video realized by, pop and video autoplay

HTML code

视频网页显示部分
<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/ small Ice Legend Steel .mp4 " =" Video / MP4 "of the type>
                            </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>

Web page display

js code portion

    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.='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();
            };
        }
    }

Pop display

Click on the upper right corner to close pop pop video stop playing

Here automatically play after opening the properties achieved by the video's play

Click Close after the pause to stop the video play video