解决视频播放问题

Love The Way You Lie 2022-12-10 07:07 206阅读 0赞

## 因为视频被背景图片遮盖和安卓设备在一个页面具备多个视频时 ##

$(function(){ 
    	//问题：因为视频被背景图片遮盖，所以单击视频是不会播放的。
        //解决方案：在背景图片的上方制作一个和视频同宽同高的div，背景颜色为transparent。
        //在js文件中对该div绑定click事件
    	$(".audioPlay").on("touchstart",function(event){ 
    		var $video = $("video").get(0);
    		console.log($video)
    		if($video.paused){ 
    			$video.play();
    		}else{ 
    			$video.pause();
    		}
    	})
    
    
    	// 问题：安卓设备在一个页面具备多个视频时，多个视频可以同时播放。
    	$("video").on("touchstart",function(event){ 
    		if(/android/gi.test(navigator.userAgent)){ 
    			if($(this).get(0).paused){ 
    				for(var i=0;i<$("video").length;i++){ 
    					$("video").get(i).pause();
    				}
    				$(this).get(0).play();
    			}else{ 
    				$(this).get(0).pause();
    			}
    		}
    	})
    
    
    })

## 匹配iphoneX系列手机’ ##

## H5整张图向上或向下滑动 ##

$(function(){ 
    	var imgHeight = $("#carousel01 .photoList img").eq(0).height();
    	var imagesLength = $("#carousel01 .photoList img").length;
    	console.log(imgHeight,imagesLength)
    
    	var startX,startY;
    	var endX,endY;
    	var distance=30;
    	$("#carousel01").on("touchstart",function(event){ 
    		startX = event.touches[0].clientX;
    		startY = event.touches[0].clientY;
    		// console.log(startX,startY)
    	}).on("touchmove",function(event){ 
    		event.preventDefault();
    	}).on("touchend",function(event){ 
    		event.preventDefault();
    		endX = event.changedTouches[0].clientX;
    		endY = event.changedTouches[0].clientY;
    
    		var x = endX-startX;
    		var y = endY-startY;
    
    		if(y<0 && Math.abs(parseInt($("#carousel01").css("top")))<=imgHeight*(imagesLength-2) && Math.abs(y)>distance){ 
    			// console.log("从下向上")
    			$("#carousel01").animate({ 
    				"top":"-=" + imgHeight + "px"
    			},400)
    		}
    		if(y>0 && parseInt($("#carousel01").css("top"))<0 && Math.abs(y)>distance){ 
    			// console.log("从上向下")
    			$("#carousel01").animate({ 
    				"top":"+=" + imgHeight + "px"
    			},400)
    		}
    	})
    
    
    	$("#carousel01 .photoList .mask").on("touchstart",function(event){ 
    		$("#carousel01").animate({ 
    			"top":"-=" + imgHeight + "px"
    		},400)
    	})	
    
    
    
    
    
    })

## 根据上面的html代码布局 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    	<title>养生堂</title>
    	<link rel="stylesheet" href="css/carousel01.css">
    	<style>
    		.photoList:nth-of-type(2){ 
    			height: 100vh;
    			background-color: #19161d;
    		}
    		.photoList:nth-of-type(2) img{ 
    			position: absolute;
    			z-index: 200;
    		}
    		.photoList .audioPlay{ 
    			width: 100vw;
    			height: 56vw;
    			position: absolute;
    			top: 70vw;
    			z-index: 300;
    			background-color: transparent;
    		}
    		.photoList .myAudio{ 
    			width: 100vw;
    			position: absolute;
    			top: 70vw;
    			left: 0;
    			z-index: 100;
    		}
    		.photoList .mask{ 
    			width: 8vw;
    			height: 10.67vw;
    			/*background-color: #f00;*/
    			position: absolute;
    			left: 46vw;
    			bottom: 6.93vw;
    			z-index: 400;
    		}
    		.photoList .left{ 
    			/*龚洪海博士上集*/
    			width: 56.8vw;
    			height: 29.87vw;
    			border: 0.13vw solid #a08e6f;
    			border-radius: 0.67vw;
    			position: absolute;
    			top: 53vw;
    			left: 7.33vw;
    			z-index: 200;
    		}
    		.photoList .right{ 
    			/*龚洪海博士下集*/
    			width: 56.8vw;
    			height: 29.87vw;
    			border: 0.13vw solid #a08e6f;
    			border-radius: 0.67vw;
    			position: absolute;
    			top: 81vw;
    			right: 7.33vw;
    			z-index: 300;
    		}
    		.photoList .left p,
    		.photoList .right p{ 
    			position: absolute;
    			top: 0;
    			left: 0;
    			width: 13vw;
    			height: 6vw;
    			background-color: #a08e6f;
    			text-align: center;
    			line-height: center;
    		}
    		.photoList .left video,
    		.photoList .right video{ 
    			width: 100%;
    		}
    	</style>
    	<script src="js/jquery.js"></script>
    	<script>
    		var reg = /iphone/gi;	//g--全局匹配;i--忽略大小写
    		// var reg = RegExp("iphone","gi"); 
    		if(reg.test(navigator.userAgent) && screen.height>=812){ 
    			console.log('iphoneX系列手机')
    			location.href = "carousel02X.html"
    		}
    	</script>
    </head>
    <body>
    	<div id="carousel01">
    		<div class="photoList">
    			<img src="./images/carousel02/s0201.jpg" />
    		</div>
    		<div class="photoList">
    			<div class="audioPlay"></div>
    			<img src="./images/carousel02/s0202.png" />
    			<div class="mask"></div>
    			<video class="myAudio" controls poster="./images/carousel02/fm02.png" src="https://dsm.hebwj.net/wz/nz/wzyst.mp4" 
    			playsinline webkit-playsinline></video>
    		</div>
    		<div class="photoList">
    			<img src="./images/carousel02/s0203.jpg" />
    			<div class="left">
    				<p>上集</p>
    				<video poster="./images/carousel02/fm0201.png" controls src="https://dsm.hebwj.net/ghh/bxb1.mp4"></video>
    			</div>
    			<div class="right">
    				<p>下集</p>
    				<video poster="./images/carousel02/fm0202.png" controls src="https://dsm.hebwj.net/ghh/bxb2.mp4"></video>
    			</div>
    			<div class="mask"></div>
    		</div>
    		<div class="photoList">
    			<img src="./images/carousel02/s0204.jpg" />
    			<div class="mask"></div>
    		</div>
    		<div class="photoList">
    			<img src="./images/carousel02/s0205.jpg" />
    		</div>
    	</div>
    
    	
    	<script type="text/javascript" src="js/carousel01.js"></script>
    	<script type="text/javascript" src="js/carousel02.js"></script>
    </body>
    </html>