h5使用video标签播放视频

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

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%;
	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 封面图

方法说明

<!-- 音量控制 -->
  <video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_volume"></video>
<script>
    var video = document.getElementById('_volume')
    video.volume = 2 // 取值范围：0 到 1，0 是静音，0.5 是一半的音量，1 是最大音量（默认值）
  </script>
  
    <!-- 播放时间控制 -->
  <video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_time"></video>
  <script>
    var video = document.getElementById('_time')
    console.log(video.currentTime)  // 视频当前正在播放的时间（单位：s），进度条拖到哪就显示当前的时间
    video.currentTime = 60  // 默认从60秒处开始播放
  </script>
<!-- 播放地址切换 （常见于切换超清  高清 流畅，不同画质的视频地址不同） -->
  <video src="test.mp4" controls autoplay width="400" height="300" id="_src"></video>
  <script>
    var video = document.getElementById('_src')
    console.log(video.src)     // http://127.0.0.1:8001/test.mp4   绝对地址，DOM 中是相对地址
    // video.src = 'test-2.mp4'   // 直接替换掉了原来的视频src
    setTimeout(() => {
      video.src = 'test-2.mp4'  // 播放到第 30s 的时候，自动切换视频
    }, 30000)
  </script>
  
  <video src="test.mp4" controls width="400" height="300" id="video"></video>
  
  <script>
    var video = document.getElementById('video')

    // 1、loadstart：视频查找。当浏览器开始寻找指定的音频/视频时触发，也就是当加载过程开始时
    video.addEventListener('loadstart', function(e) {
      console.log('提示视频的元数据已加载')
      console.log(e)
      console.log(video.duration)            // NaN
    })
	
	// 6、canplay：可播放监听。当浏览器能够开始播放指定的音频/视频时触发
    video.addEventListener('canplay', function(e) {
      console.log('提示该视频已准备好开始播放')
      console.log(e)
    })
 // 8、play：播放监听
    video.addEventListener('play', function(e) {
      console.log('提示该视频正在播放中')
      console.log(e)
    })

    // 9、pause：暂停监听
    video.addEventListener('pause', function(e) {
      console.log('暂停播放')
      console.log(e)
    })
	// 12、waiting：视频加载等待。当视频由于需要缓冲下一帧而停止，等待时触发
    video.addEventListener('waiting', function(e) {
      console.log('视频加载等待')
      console.log(e)
    })

    // 13、playing：当视频在已因缓冲而暂停或停止后已就绪时触发
    video.addEventListener('playing', function(e) {
      console.log('playing')
      console.log(e)
    })

    // 14、timeupdate：目前的播放位置已更改时，播放时间更新
    video.addEventListener('timeupdate', function(e) {
      console.log('timeupdate')
      console.log(e)
    })

    // 15、ended：播放结束
    video.addEventListener('ended', function(e) {
      console.log('视频播放完了')
      console.log(e)
    })

    // 16、error：播放错误
    video.addEventListener('error', function(e) {
      console.log('视频出错了')
      console.log(e)
    })

    // 17、volumechange：当音量更改时
    video.addEventListener('volumechange', function(e) {
      console.log('volumechange')
      console.log(e)
    })

插件播放 （zyMedia —— 一个轻量级媒体播放器） https://github.com/ireaderlab/zyMedia

转载于:https://my.oschina.net/u/2393989/blog/3048942