video视频控制点击播放点击背景暂停并消失

index。html 

<!-- video -->
		<div class="video_file none" style="width: 100%;height: 100vh;">
			<!-- <p class="video_bg pos-ab"></p> -->
			<video name="media" id="video" preload="auto" class="home-video" loop src="" poster="" controls webkit-playsinline='true' playsinline='true' style="width: 100%;object-fit: fill;">
			</video>
		</div>

js

//传img和poster的值
function showShare2(source_url,poster_url){
				    console.log(source_url)
				$(".home-video").attr("src",source_url)
				$(".home-video").attr("poster",poster_url)
				$(".video_file").css({"display":"block","z-index":"99"})
				$(".video_bg").css({"display":"block","z-index":"99"})
			}


//video
			playVideo();
			function playVideo(){
				var myVideoBtn =document.getElementById("video_btn");
				var myVideo =document.getElementById("video");

				function playVideo(obj) {
					if (myVideo.paused) {
						console.log("playVideo1")
						myVideo.play();
						$("#video").removeClass("hide");
					}
					else {
						console.log("playVideo2")
						myVideo.pause();
						$("#video").addClass("hide");
					}
				}

				myVideo.addEventListener("pause",function(){
				$("#video").removeClass("hide");
				});
				//阻止事件冒泡 点击子，点不到父（子不能控制父）
				$('#video').click(function(e){
					console.log("视频呗点击了")
					e.stopPropagation()
					playVideo(myVideo)
				})
				$('.video_file').bind("click",function(){
					console.log('video_file被点击了!');
					$(".video_file").css({"display":"block"})
					myVideo.pause();
					$(".video_file").hide();
				})

			}

index控制case的video

case.html

//视频
			$(".p4_slide2").click(function(){
				console.log("视频智库:"+index2);
				var p4_url = "https://wx.whyimingkeji.com/wx/zciv/aiCard/zcCard/"
				if(index2==3 || index2==8 ){
					console.log(index2);
					window.parent.showShare2(p4_url+"video/hankoufenghui2.mp4",p4_url+"img/fm_hankou.png");
					
				}else if(index2==4){
					window.parent.showShare2(p4_url+"video/shidaizhongguo2.mp4",p4_url+"img/fm_shidai.png");
					
				}else if(index2==5){
					window.parent.showShare2(p4_url+"video/changjiangqingniancheng2.mp4",p4_url+"img/fm_changjiang.png");
					
				}
				else if(index2==6){
					window.parent.showShare2(p4_url+"video/lantingdajing2.mp4",p4_url+"img/fm_jindi.png");
					
				}
				else if(index2==7 || index2==2 ){
					window.parent.showShare2(p4_url+"video/wankechengshizhiguang2.mp4",p4_url+"img/wanke.png");
					
				}
			})

//vedio原生手写控制播放暂停快进等按钮

js实现视频播放、进度条拖动、快进、快退，静音，全屏操作 - 灰信网（软件开发博客聚合）

//video设置从头播放

video.currentTime = 0