• 129129

    文章

  • 809

    评论

  • 12

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

h5使用video标签播放视频

服了这份高薪指南,涨多少你说了算>>

html区域

<div class="video_file">
				<button id="video_btn" >播放/暂停</button>
				<img src="images/video-img.jpg" id="video_img" >
				<video name="media" id="video" preload="auto" >
					<source src="https://static.appstore.czfw.cn/video-jiayou2.mp4" type="video/mp4">
					<source src="https://static.appstore.czfw.cn/video-jiayou.webm" type="video/webm">
					<source src="https://static.appstore.czfw.cn/video-jiayou.Ogg" type="video/ogg">
					您的浏览器暂不支持视频播放
				</video>
				</div>

css 区域

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

.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: 99;
	border: none;
}

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

.video_file #video_img{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 90;
}
#video_img,#video_btn{opacity: 1;}
#video_img.displayno,#video_btn.displayno{
         opacity: 0;
     }   
	 

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');
		}
		else {
			myVideo.pause();
			$('#video_img').removeClass('displayno');
			$('#video_btn').removeClass('displayno');
		}
	}
	$('.video_file').on('click',function(){
		playVideo(myVideo)
	})
	

695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客