swiper轮播嵌入视频:
效果:正常swiper自动播放;子元素swiper-slide有个别带有视频,并且默认初始化为不播放状态。
效果1:在视频未播放状态,用户点击视频,视频会进行播放;此时,swiper会停止自动轮播;
效果2:在视频播放状态,用户点击视频,视频会进行停止播放;此时,swiper会自动轮播并切换到下一屏;
效果3:视频播放结束,轮播会重新开始自动轮播;
前置条件:
引入swiper3和jquery
效果演示:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge, chrome=1" http-equiv="x-ua-compatible">
<meta content="webkit" name="renderer">
<meta content="telephone=no" name="format-detection">
<meta content="initial-dpr=1" name="hotcss">
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<link href="css/swiper.min.css" rel="stylesheet" type="text/css">
<!--Jquery-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<!--basic-->
<script src="js/swiper.min.js" type="text/javascript"></script>
</head>
<style>
.video-section {}
.video-section .videoContent {
display: none;
}
.video-section .video-details {
padding: 10px;
background: #FFFFFF;
border-radius: 5px;
box-sizing: border-box;
}
.video-section .video {
}
.video-section .poster {
position: relative;
display: block;
width: 100%;
}
.video-section .poster:after {
content: '';
transition: all .3s;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000000;
opacity: .4;
z-index: 1;
}
.video-section .poster .video-bg {
display: block;
}
.video-section .poster:hover .icon-play {
opacity: .5;
}
.video-section .icon-play {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
z-index: 2;
width: 50px;
height: 50px;
transition: all .3s;
opacity: 1;
}
</style>
<body>
<main class="container">
<!-- S 视频 section-->
<section class="video-section index-section section" id="video-section">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="video">
<a class="poster">
<img class="video-bg" src="images/Community-media4_03.png" width="100%"/>
<div class="icon-play">
<img src="images/icon-play.png" width="100%"/>
</div>
</a>
<video class="videoContent" controls poster="images/Community-media4_03.png" width="100%">
<source src="images/movie.mp4" type="video/mp4" width="100%"/>
</video>
</div>
</div>
<div class="swiper-slide">
<div class="video">
<a class="poster">
<img class="video-bg" src="images/Community-media4_03.png" width="100%"/>
<div class="icon-play">
<img src="images/icon-play.png" width="100%"/>
</div>
</a>
<video class="videoContent" controls poster="images/Community-media4_03.png" width="100%">
<source src="images/movie.mp4" type="video/mp4" width="100%"/>
</video>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<!-- E 视频 section-->
</main>
</body>
<script>
$(function () {
// S 视频 video-section
// 第2屏轮播
var videoSection = new Swiper('#video-section .swiper-container', {
autoplay: 8000,
speed: 800,
loop: true,
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,
autoplayDisableOnInteraction: false,
pagination: '#video-section .swiper-pagination',
paginationClickable: true,
});
videoSection.on('SlideChangeStart',function () {
$('.videoContent').hide();
$('.poster').show();
$('.video video')[0].pause();
videoSection.startAutoplay();
// alert(swiper.activeIndex) //切换结束时,告诉我现在是第几个slide
})
$('.video').on('click', function () {
if ($(this).children('.videoContent').is(':hidden')) {
$(this).children('.videoContent').show();
$(this).children('video')[0].play()
$(this).children('.poster').hide();
videoSection.stopAutoplay();
} else {
$(this).children('.videoContent').hide();
$(this).children('.poster').show();
$(this).children('video')[0].pause()
videoSection.startAutoplay();
setTimeout(()=>{
videoSection.slideNext();
},500)
}
})
// 监听视频播放
$('.video video').on('ended', function () {
$('.video .videoContent').hide();
$('.video .poster').show();
videoSection.startAutoplay();
videoSection.slideNext();
})
// E 视频
})
</script>
</html>