H5 两个video视频的无缝切换

最新推荐文章于 2024-08-29 16:36:55 发布

夕空

最新推荐文章于 2024-08-29 16:36:55 发布

阅读量1.1w

点赞数

分类专栏： javascript 文章标签：视频无缝切换 video无缝切换

本文链接：https://blog.csdn.net/zhi_jie/article/details/100849915

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

经过测试发现，很多手机无法自动播放，也试了很多网友的方法，还是会遇到意外情况，比如两个video切换播放问题就很头疼，最终还是在一个video上变src地址来解决，至于中间的闪烁问题，只好覆盖上一个视频的最后一帧的图片解决，虽然会卡一下，唉~

        vplayer.addEventListener("timeupdate",function(e){
			if(vplayer.currentTime>0){
				$('.startimg').attr('src',playPath[playNum].img);
				$('.startimg').css('visibility','hidden');
			}
			if(vplayer.currentTime>=vplayer.duration-0.2 && playPath[playNum].img){
				$('.startimg').css('visibility','visible');
			}
		});

在timeupdate的快要结束时及开始播放时来显示隐藏图片并更换图片的src

还发现ios手机的点击播放问题，需要在div上写点击事件来执行播放视频的函数： οnclick="playcontr()"

否则无法播放，原因没有排查。。。

-------------------------------------------------------------------------------X 以下代码因不同机型原因，作废

在网上找了好多方法都不知所以然，试了很多方法都无法做到中间不闪烁无缝切换，最终自己想到了一个方案。

原理是先将video标签overflow: hidden;（不能使用display:none;会被禁止预载播放），让第二个视频play()后在canplay事件里暂停自身，然后播放第一个视频，第一个视频播放结束事件ended里执行第二个视频的播放，以此做到无缝切换。

方法是不是很另类，不过倒是解决问题了，切换不会闪烁了，缺点可能就是两个视频一起缓冲了吧，不知有没有大神有更好的解决方案？

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta charset="UTF-8">
	<title>视频交互</title>

	<style type="text/css">

		/*视频*/
		#video_box{position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;}
		#video_box video{
			display: block; margin: 0 auto; width: 100%;height: 100%; /*object-fit:fill;*/
			position: absolute;left: 0;top: 0;visibility: hidden;
		}

	</style>
</head>
<body>
	<!-- 视频播放区 -->
	<div id="video_box">
		<video id="vplayer_start" src="images/bg1.mp4" autoplay="false" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill"></video>
		<video id="vplayer" src="images/bg2.mp4" autoplay="false" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill;"></video>
	</div>


	<script>

		var startPlay=true;
		var vplayer_start = document.getElementById('vplayer_start');
		var vplayer = document.getElementById('vplayer'),
		video_box = document.getElementById('video_box');

		vplayer_start.pause();
		vplayer.play();
		// 播放结束
		vplayer_start.addEventListener("ended",function(e){
			vplayer.style.visibility = "visible";
			vplayer.play();
			e.target.style.display = "none";
		});
        //循环播放第二个视频
		vplayer.addEventListener("ended",function(e){
			e.target.play();
		});

		vplayer.addEventListener('canplay', function(e){
			if(startPlay){
				e.target.pause();
				vplayer_start.style.visibility = "visible";
				vplayer_start.play();
				startPlay=false;
			}
		})


	</script>
</body>
</html>