<div style="padding: 0 30px 0px;">
<article class="page_index_swiper swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- <div class="video_tip">直播中</div> -->
<div class="video_poster">
<img
src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/qlimg/aisibg.jpg"
alt=""
/>
<p class="iconfont video_play"></p>
</div>
<video
class="index_video"
src="http://culturetv.hanyastar.com.cn/standard/nationalculturecloud/res/live/20190409lubo_1.mp4"
poster="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/qlimg/aisibg.jpg"
controls
width="100%"
playsinline="isiPhoneShowPlaysinline"
x5-video-player-type="h5-page"
t7-video-player-type="inline"
webkit-playsinline="isiPhoneShowPlaysinline"
x-webkit-airplay=""
preload="auto"
></video>
<div class="headline">乡村春晚——白县万村网络联动</div>
</div>
<div class="swiper-slide">
<!-- <div class="video_tip">直播中</div> -->
<div class="video_poster">
<img
src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/qlimg/aisibg.jpg"
alt=""
/>
<p class="iconfont video_play"></p>
</div>
<video
class="index_video"
src="http://culturetv.hanyastar.com.cn/standard/nationalculturecloud/res/live/20190409lubo_1.mp4"
poster="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/qlimg/aisibg.jpg"
controls
width="100%"
playsinline="isiPhoneShowPlaysinline"
x5-video-player-type="h5-page"
t7-video-player-type="inline"
webkit-playsinline="isiPhoneShowPlaysinline"
x-webkit-airplay=""
preload="auto"
></video>
<div class="headline">乡村春晚——白县万村网络联动</div>
</div>
</div>
<div class="swiper-pagination index_pagination"></div>
</article>
</div>
<script>
var pageIndexSwiper = new Swiper(".page_index_swiper", {
observer: true,
observeParents: true,
pagination: {
el: ".swiper-pagination",
},
on: {
init: function () {
var videoBor = $(".page_index_swiper .swiper-slide"); //video的swiper对象数组
var videolist = videoBor.find("video"); //video对象数组
videoBor.on("click", ".video_poster", function () {
pageIndexSwiper.autoplay.stop();
var $video = $(this).parent().find("video")[0];
if ($video.paused) {
$(this).hide();
$video.play();
$(this).parent().find("video").show();
} else {
$(this).show();
$video.pause();
$(this).parent().find("video").hide();
}
});
},
slideChange: function () {
$("video").hide();
$(".video_poster").show();
$("video").trigger("pause");
},
},
});
</script>
轮播且播放视频的代码块
最新推荐文章于 2022-11-29 14:41:02 发布