H5中Video的使用及相关控制

<div id="bodys" style="display:none;">
	<!-- muted 如果出现该属性，视频的音频输出为静音。  loop="loop" -->
	<video id="myVideo" autoplay muted  style="width:100vw;height:100vh">  
		<source src="<?=$var_video_path?>mp4/2020/yure_2020_1.mp4" type="video/mp4">
	</video> 
	
	<audio id="bgmp3" >
	  <source src="<?=$var_video_path?>mp3/2020/chunjiexuqu2.mp3" type="audio/mpeg">
	</audio>	
 
 
	
	<script>
	var bgmp3 = document.getElementById("bgmp3"); 
	bgmp3.loop = true;/*必须是false才能监听停止事件*/
	bgmp3.play();
	
	var video=document.getElementById('myVideo');
	var index = 0;
	var action = 1;
	
	//截止最后2秒，淡出，下一个淡入
	myVideo.addEventListener("timeupdate",function(){
		var timeDisplay;
		var timeDisplay_all;
		
		//用秒数来显示当前播放进度
		timeDisplay = Math.floor(myVideo.currentTime);//当前时间
		//console.log(Math.floor(myVideo.currentTime))
		timeDisplay_all = Math.floor(myVideo.duration);//总时长
		
		if (timeDisplay_all-timeDisplay<=2 && action==1){
			//myVideo.currentTime=3.21
			action=0;
			
			$("#bodys").fadeOut(2000,function(){
				if(index==0){
					index = 1;
					action = 1;
					video.src="<?=$var_video_path?>mp4/2020/yure_2020_2.mp4";
					$("#bodys").fadeIn(2000);
				}else{
					index = 0;
					action = 1;
					video.src="<?=$var_video_path?>mp4/2020/yure_2020_1.mp4";
					$("#bodys").fadeIn(2000);
				}
			});
		}
 
	},false);
	
	/* 这种也可以，但没有上一个的方法实现的切换效果过渡好
	video.addEventListener('ended',function(){//两段循环，第一个视频，不能设置为循环
	
		$("#bodys").fadeOut(2000,function(){
			if(index==0){
				index = 1;
				video.src="<?=$var_video_path?>mp4/2020/yure_2020_2.mp4";
				$("#bodys").fadeIn(2000);
			}else{
				index = 0;
				video.src="<?=$var_video_path?>mp4/2020/yure_2020_1.mp4";
				$("#bodys").fadeIn(2000);
			}
		});
	},false);
	
	*/
	</script> 
	
	<!--2020年，视频静音，单独加音乐循环，保证音频能长时间播放，又不因视频过长占用内存 -->
 
</div>
 
<script>$("#bodys").fadeIn(3000);</script><!--淡入淡出效果 -->

以上就是H5中Video的使用及相关控制的详细内容，更多关于H5中Video的使用及相关控制的资料请关注九品源码其它相关文章！