h5使用video标签播放视频

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

html区域

css 区域

.video_file {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 100%;
	height: 44vw;
}

.video_file button {
	background-image: url(http://static.kaiba315.com/video_bg_grey.png);
	background-color: transparent;
	background-size: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 50px;
	height: 50px;
	margin-left: -25px;
	margin-top: -25px;
	text-indent: -9999px;
	z-index:40;
	border: none;
}

.video_file #video_img,
.video_file video {
	width: 100%;
	height: 44vw;
}

.video_file #video_img {
	position: absolute;
	left: 0;
	top: 0;
}

#video_img,#video_btn{opacity: 1;}
#video_img.displayno,#video_btn.displayno{
         opacity: 0;
}   
.video_file video.hide{
  width:1px;
  height:1px;
}

js 区域

		var myVideoBtn =document.getElementById("video_btn");
		var myVideo =document.getElementById("video");
		var myVideoImg =document.getElementById("video_img");
	function playVideo(obj) {
		if (myVideo.paused) {
			myVideo.play();
			$('#video_img').addClass('displayno');
			$('#video_btn').addClass('displayno');
			$("video").removeClass("hide");
		}
		else {
			myVideo.pause();
			$('#video_img').removeClass('displayno');
			$('#video_btn').removeClass('displayno');
			$("video").addClass("hide");
		}
	}
	myVideo.addEventListener("pause",function(){
		$('#video_img').removeClass('displayno');
		$('#video_btn').removeClass('displayno');
		$("video").addClass("hide");
	});
	$('.video_file').on('click',function(){
		playVideo(myVideo)
	})
	
	

有遮罩层存在时,视频层级最高,遮罩层无法遮挡问题

function shareAct(){
		$(".popUpBox").show();
		myVideo.pause();
		$('#video_img').removeClass('displayno');
		$('#video_btn').removeClass('displayno'); 
		$("video").hide();
	}
		//分享蒙版 关闭
    $(".popUpBox").click(function () {
    	$(this).hide();
    });
	

属性说明

muted 静音播放(iphone可以,安卓不行)
poster 封面图

方法说明


  

  
    
  
  

  
  
  
  
  
  
                    
                    

你可能感兴趣的:(h5使用video标签播放视频)