解决视频播放问题

最新推荐文章于 2021-05-08 14:12:27 发布

裴嘉靖

最新推荐文章于 2021-05-08 14:12:27 发布

阅读量327

点赞数

分类专栏： H5视频播放小程序

本文链接：https://blog.csdn.net/peijiajing/article/details/108773534

版权

小程序同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

H5视频播放

1 篇文章 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系列手机’

<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>

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>

裴嘉靖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
解决视频播放问题

因为视频被背景图片遮盖和安卓设备在一个页面具备多个视频时$(function(){ //问题：因为视频被背景图片遮盖，所以单击视频是不会播放的。 //解决方案：在背景图片的上方制作一个和视频同宽同高的div，背景颜色为transparent。 //在js文件中对该div绑定click事件 $(".audioPlay").on("touchstart",function(event){ var $video = $("video").get(0); console.log($vi
复制链接

扫一扫