因为视频被背景图片遮盖和安卓设备在一个页面具备多个视频时
$(function(){
$(".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;
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;
}).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){
$("#carousel01").animate({
"top":"-=" + imgHeight + "px"
},400)
}
if(y>0 && parseInt($("#carousel01").css("top"))<0 && Math.abs(y)>distance){
$("#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;
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;
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>