一个页面多个video的使用,初始化播放时间

一个页面多个video的使用

html代码
视频和图片需要自己更换一下路径, controls向用户显示播放、暂停、全屏等控件

    <div class="video_scroll">
        <div class="video_item">
            <video src="tao.mp4" loop="loop" controls></video>
            <div class="video_text"><span>韬韬</span><img data-id="0" src="/supervise/images/video.png"></div>
        </div>
        <div class="video_item">
            <video src="tao.mp4" loop="loop" controls></video>
            <div class="video_text"><span>韬韬</span><img data-id="1" src="/supervise/images/video.png"></div>
        </div>
        <div class="video_item">
            <video src="tao.mp4" loop="loop" controls></video>
            <div class="video_text"><span>韬韬</span><img data-id="2" src="/supervise/images/video.png"></div>
        </div>
        <div class="video_item">
            <video src="tao.mp4" loop="loop" controls></video>
            <div class="video_text"><span>韬韬</span></span><img data-id="3" src="/supervise/images/video.png"></div>
        </div>
        <div class="video_item">
            <video src="tao.mp4" loop="loop" controls></video>
            <div class="video_text"><span>韬韬</span><img data-id="4" src="/supervise/images/video.png"></div>
        </div>
        <div class="video_item">
            <video src="tao.mp4" loop="loop" controls></video>
            <div class="video_text"><span>韬韬</span><img data-id="5" src="/supervise/images/video.png"></div>
        </div>
        <div class="video_item">
            <video src="tao.mp4" loop="loop" controls></video>
            <div class="video_text"><span>韬韬</span><img data-id="6" src="/supervise/images/video.png"></div>
        </div>
        <div class="video_item">
            <video src="tao.mp4" loop="loop" controls></video>
            <div class="video_text"><span>韬韬</span><img data-id="7" src="/supervise/images/video.png"></div>
        </div>
        <div class="video_item">
            <video src="tao.mp4" loop="loop" controls></video>
            <div class="video_text"><span>韬韬</span><img data-id="8" src="/supervise/images/video.png"></div>
        </div>
        <div class="video_item">
            <video src="tao.mp4" loop="loop" controls></video>
            <div class="video_text"><span>韬韬</span><img data-id="9" src="/supervise/images/video.png"></div>
        </div>
        <div class="video_item">
            <video src="tao.mp4" loop="loop" controls></video>
            <div class="video_text"><span>韬韬</span><img data-id="10" src="/supervise/images/video.png"></div>
        </div>
        <div class="video_item">
            <video src="tao.mp4" loop="loop" controls></video>
            <div class="video_text"><span>韬韬</span><img data-id="11" src="/supervise/images/video.png"></div>
        </div>
        <div class="video_item">
            <video src="tao.mp4" loop="loop" controls></video>
            <div class="video_text"><span>韬韬</span><img data-id="12" src="/supervise/images/video.png"></div>
        </div>
    </div>

jq代码

 $(".video_text").mousemove(function () {
        $(this).find("span").hide();
        $(this).find("img").show();
    })
    $(".video_text").mouseleave(function () {
        $(this).find("span").show();
        $(this).find("img").hide();
    })
    $(".video_text img").click(function () {
        $(this).closest(".video_text").siblings()[0].play();   //播放视频
        //$(this).closest(".video_text").siblings()[0].webkitRequestFullScreen();    //进入全屏
        $(this).closest(".video_item").siblings().find("video").trigger('pause');     //停止播放其他视频
      var num = $(this).attr('data-id');
        $(".video_item").siblings().find("video")[num].currentTime=0;    //每次进入初始化播放时间
        $(".video_item .fa-close").click(function () {
            $(this).closest(".video_item").removeClass("active");
            $(this).siblings("video")[0].pause();
        })
    })

CSS样式

.video_scroll{
	display: flex;
	justify-content: end;
	flex-wrap: wrap;
}
.video_item{
	width: 23%;
	height: 200px;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	margin-left: 1.6%;
	margin-bottom: 18px;
}
.video_text{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 200px;
	background-color: rgba(0,0,0,0.6);
	color: #ffffff;
	font-size: 22px;
}
.video_text img{display: none;}
.video_item video{width:100%;height: 100% !important;}
.video_item.active video{
     position: fixed;
     height: 100% !important;
     left: 50%;
     top: 1%;
     margin-left: -50%;
     z-index: 99;
 }
.video_item .fa-close{display: none;}
.video_item.active .fa-close{
     display: block;
     position: fixed;
     right: 1%;
     top: 1%;
     z-index: 100;
     color: #ffffff;
     font-size: 24px;
}