swiper 视频轮番
百度搜索：swiper 视频轮番
转载1：https://blog.csdn.net/Aimee1608/article/details/79637929
项目中使用swiper插件嵌套video标签
正常的swiper插件里面嵌套video标签，如下写法就够了,在ios 和PC端上完全没有问题，但是在安卓机上，播放视频后，视频的层级会居上，覆盖住下面的层，导致左右滑块被遮挡，并且滑动video标签也无法滑动。
<div class="swiper-container video-box">
<div class="swiper-wrapper">
<div class="swiper-slide" >
<video class="video1" controls="controls" src="video/bt03.mp4" poster="img/vbg01.png" playsinline="true" webkit-playsinline="true" preload="auto"></video>
</div>
<div class="swiper-slide" >
<video class="video1" controls="controls" src="video/bt02.mp4" poster="img/vbg02.png" playsinline="true" webkit-playsinline="true" preload="auto"></video>
</div>
</div>
</div>
设置层级并不好使；改用在当前小窗口播放的方法，给video标签设置webkit-playsinline playsinline x5-playsinline属性，然而也不起作用。
最后考虑video暂停播放时，设置video的display 为hidden，滑动到下一个视频的时候，暂停播放当前的视频，显示视频的图片。
修改
html修改，添加播放的图片和播放按钮
<div class="swiper-container video-box">
<div class="swiper-wrapper">
<div class="swiper-slide" >
<video class="video1" controls="controls" src="video/bt03.mp4" poster="img/vbg01.png" playsinline="true" webkit-playsinline="true" preload="auto"></video>
<div class="posterBg" style="background-image: url(img/vbg01.png)">
<img src="img/btn-v_03.png" alt=""/>
</div>
</div>
<div class="swiper-slide" > <video class="video1" controls="controls" src="video/bt02.mp4" poster="img/vbg02.png" playsinline="true" webkit-playsinline="true" preload="auto"></video>
<div class="posterBg" style="background-image: url(img/vbg02.png)">
<img src="img/btn-v_03.png" alt=""/>
</div>
</div>
<div class="swiper-slide" >
<video class="video1" controls="controls" src="video/bt02.mp4" poster="img/vbg03.png" playsinline="true" webkit-playsinline="true" preload="auto"></video>
<div class="posterBg" style="background-image: url(img/vbg03.png)">
<img src="img/btn-v_03.png" alt=""/>
</div> </div>
<div class="swiper-slide" >
<video class="video1" controls="controls" src="video/bt04.mp4" poster="img/vbg04.png" playsinline="true" webkit-playsinline="true" preload="auto"></video>
<div class="posterBg" style="background-image: url(img/vbg04.png)">
<img src="img/btn-v_03.png" alt=""/>
</div> </div>
<div class="swiper-slide" >
<video class="video1" controls="controls" src="video/bt05.mp4" poster="img/vbg05.png" playsinline="true" webkit-playsinline="true" preload="auto"></video>
<div class="posterBg" style="background-image: url(img/vbg05.png)">
<img src="img/btn-v_03.png" alt=""/>
</div> </div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev sw-car-prev"></div>
<div class="swiper-button-next sw-car-next"></div>
</div>
添加监听播放暂停的逻辑，点击swiper-slide，隐藏播放的图片和按钮，显示当前video标签，正常播放。暂停播放时，隐藏video标签，显示播放的图片和按钮。
这样就和ios一样正常播放啦。
var swipervideo = new Swiper('.video-box', {
direction: 'horizontal',
speed:500,
autoplay:{
delay:3000,
},
loop:true,
pagination: {
el: '.video-box .swiper-pagination',
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.video-box .sw-car-next',
prevEl: '.video-box .sw-car-prev',
},
on: {
init:function(){
var videoBor = $(".video-box .swiper-slide");//video的swiper对象数组
var videolist = videoBor.find("video");//video对象数组
videoBor.on("click",function(){
swipervideo.autoplay.stop();
var $video = $(this).find("video")[0];
if($video.paused){
var videoPoster =$(this).find(".posterBg");//当前封面对象
videoPoster.hide();
$video.play();
}
});
videolist.on("pause",function(){
/*所有封面浮层show&所有视频hide*/
videoBor.find(".posterBg").show();
videoBor.find("video").hide();
});
videolist.on("play",function(){
/*当前视频show*/
$(this).show();
if($(this)[0].play){
swipervideo.autoplay.stop();
}
});
},
slideChange: function(){
var videolist = $(".video-box .swiper-slide").find("video");//video对象数组
for(var k = 0 ;k<videolist.length;k++){
videolist[k].pause();
}
}
}
});
转载2：https://blog.csdn.net/hhf235678/article/details/80390758
在swiper插件中放置使用videojs插件的视频
由于要使用videojs插件，所以需要引入video.js和css文件（自己从网上找）
- swiper轮播图的布局可以根据自己的喜好来排布。
- 当视频播放时停止轮播。播放完毕时开始轮播。
html:
<div class="last-swiper-container" id="last_page">
<div class="swiper-wrapper">
<div class="swiper-slide pic-slide slide1 last_slider">
<video id="my_video_1" class="playVideo playVideo1 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
data-setup='{}' width="100%" poster="img/Lingshan.png">
<source src="视频链接">
</video>
</div>
<div class="swiper-slide pic-slide slide2 last_slider">
<video id="my_video_2" class="playVideo playVideo2 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
data-setup='{}' width="100%" poster="img/xh.png">
<source src="视频链接">
</video>
</div>
<div class="swiper-slide pic-slide slide3 last_slider">
<video id="my_video_3" class="playVideo playVideo3 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
data-setup='{}' width="100%" poster="img/factory.png">
<source src="视频链接">
</video>
</div>
<div class="swiper-slide pic-slide slide4 last_slider">
<video id="my_video_4" class="playVideo playVideo4 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
data-setup='{}' width="100%" poster="img/wisdom.png">
<source src="视频链接">
</video>
</div>
<div class="swiper-slide pic-slide slide5 last_slider">
<video id="my_video_5" class="playVideo playVideo5 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
data-setup='{}' width="100%" poster="img/Tianjin.png">
<source src="视频链接">
</video>
</div>
<div class="swiper-slide pic-slide slide6 ">
<video id="my_video_6" class="playVideo playVideo6 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
data-setup='{}' width="100%" poster="img/rose.png">
<source src="视频链接">
</video>
</div>
</div>
<div class="swiper-button last-swiper-button-next">
<img src="图片链接">
</div>
<div class="swiper-button last-swiper-button-prev">
<img src="图片链接">
</div>
<div class="swiper_pagination last-swiper-pagination"></div>
</div>
css:
#last_page{
height: 70%;
position: relative;
bottom: -10%;
margin: 40px auto;
padding-bottom: 45px;
// width: 100%;
.swiper-slide.pic-slide{
width: 50%;
overflow: hidden;
// display: table-cell;
text-align: center;
}
.pic-slide > img{
width: 100%;
vertical-align: middle;
}
.swiper_pagination{
display: inline-block;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -60px;
}
.swiper-button{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 4%;
z-index:;
margin-top: -1%;
padding: 50px;
img{
width: 25%;
display: block;
}
}
.last-swiper-button-next{
right:14%;
}
.last-swiper-button-prev{
left: 17%;
}
.pic-slide .playBtn{
position: absolute;
top: 50%;
left: 50%;
margin-left: -4%;
margin-top: -4%;
z-index:;
width: 8%;
cursor: pointer;
}
}
.last_slider{
min-height: 300px;
}
.playVideo{
min-height: 300px;
}
#last_page_con{
padding-top: 60px;
.last_top{
width: 100%;
text-align: center;
margin: 0 auto;
.last_tit{
font-size: 34px;
margin-bottom: 14px;
font-weight: lighter;
color: #333333;
}
.last_line{
width: 44px;
height: 1px;
border-bottom: 2px solid #999;
display: inline-block;
text-align: center;
}
.last_desc{
height: 78px;
margin-top: 14px;
font-size: 16px;
width: 50%;
margin: 14px auto 0;
padding: 0px 5px;
line-height: 26px;
color: #666;
text-align: center;
font-weight: lighter;
}
}
}
.last-swiper-container .playVideo{
width: 100%;
}
.videoCon .vjs-poster{
background: none;
}
.video-js{
width: 100%;
}
.video-js .vjs-control-bar .vjs-volume-panel{
display: none;
opacity:;
}
.playVideo .video-js .vjs-big-play-button{
display: none;
}
.video-js .vjs-control-bar .vjs-play-control{
margin-top: 2px;
}
.video-js .vjs-control-bar .vjs-fullscreen-control{
margin-top: 3px;
}
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}
.swiper-slide .video-js .vjs-big-play-button{
font-size: 2.5em;
line-height: 2.5em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: #73859f;
background-color: rgba(115,133,159,.5);
border-width: 0.09em;
margin-top: -1.25em;
margin-left: -1.75em;
}
/* 中间的播放箭头 */
.swiper-slide .vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
/* 加载圆圈 */
.swiper-slide .vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
js：
window.onload = function () {
// 获取轮播图片的宽度从而计算高度，
var lastWidth = $('#last_page .swiper-wrapper').width();
var swiperWidth = lastWidth * 0.5;
$('#last_page_con .swiper-slide').css('width',swiperWidth);
var swiperHeight = swiperWidth*9/16;
$(window).resize(function(){
lastWidth = $('#last_page .swiper-wrapper').width()
swiperWidth = lastWidth/2
swiperHeight = swiperWidth*9/16
$('.playVideo').css('height',swiperHeight)
$('#last_page .swiper-slide').css('height',swiperHeight)
})
$('.playVideo').css('height',swiperHeight)
$('#last_page .swiper-slide').css('height',swiperHeight)
$('.videoCon .vjs-big-play-button').css('display','none');
var $lastSwiper = new Swiper('.last-swiper-container',{
pagination : '.last-swiper-pagination',
autoplay: 2000,
autoplayDisableOnInteraction: false,
paginationClickable :true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: '7.5%',
loop: true,
nextButton: '.last-swiper-button-next',
prevButton: '.last-swiper-button-prev',
onSlideChangeEnd : function(e) {
if (e.activeIndex === 6 || e.activeIndex === 12) {
$('.last_desc').text('每一个轮播图所对应的文字');
e.slideTo(6,0,false);
e.startAutoplay();
$click = 0;
} else if (e.activeIndex === 7) {
$('.last_desc').text('每一个轮播图所对应的文字')
$click = 1;
} else if (e.activeIndex === 8) {
$('.last_desc').text('每一个轮播图所对应的文字')
$click = 2;
} else if (e.activeIndex === 9) {
$('.last_desc').text('每一个轮播图所对应的文字')
$click = 3;
} else if (e.activeIndex === 10) {
$('.last_desc').text('每一个轮播图所对应的文字')
$click = 4;
} else if (e.activeIndex === 5 || e.activeIndex === 11) {
$('.last_desc').text('每一个轮播图所对应的文字')
e.slideTo(11,0,false);
e.startAutoplay();
$click = 5;
}
videojs("my_video_1").pause();
videojs("my_video_1").currentTime(0);
videojs("my_video_2").pause();
videojs("my_video_2").currentTime(0);
videojs("my_video_3").pause();
videojs("my_video_3").currentTime(0);
videojs("my_video_4").pause();
videojs("my_video_4").currentTime(0);
videojs("my_video_5").pause();
videojs("my_video_5").currentTime(0);
videojs("my_video_6").pause();
videojs("my_video_6").currentTime(0);
}
})
$('#last_page').mouseenter(function(){
$lastSwiper.stopAutoplay();
})
videojs("my_video_1").on('play',function(){
$click = 0;
$lastSwiper.stopAutoplay();
});
videojs("my_video_2").on('play',function(){
$click = 1;
$lastSwiper.stopAutoplay();
});
videojs("my_video_3").on('play',function(){
$click = 2;
$lastSwiper.stopAutoplay();
});
videojs("my_video_4").on('play',function(){
$click = 3;
$lastSwiper.stopAutoplay();
});
videojs("my_video_5").on('play',function(){
$click = 4;
$lastSwiper.stopAutoplay();
});
videojs("my_video_6").on('play',function(){
$click = 5;
$lastSwiper.stopAutoplay();
});
var videoPanelMenu = $(".vjs-fullscreen-control");
videoPanelMenu.before('<div class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button" aria-live="polite" aria-expanded="false" aria-haspopup="true">'
+ '<div class="vjs-menu" role="presentation">'
+ '<ul class="vjs-menu-content" role="menu">'
+ '<li class="vjs-menu-item vjs-menu-item2" tabindex="-1" role="menuitemcheckbox">高清 1080P</li>'
+ '<li class="vjs-menu-item vjs-menu-item1" tabindex="-1" role="menuitemcheckbox">标清 720P</li>'
+ '</ul></div>'
+' <button class="vjs-subs-caps-button vjs-control vjs-button" id="change_btn" type="button" aria-live="polite" title="清晰度切换" aria-disabled="false">'
+'标清</button>'
+'</div>'
);
var obj={tag:false,ctime:0};
window.obj=obj;
$('.vjs-menu-item1').click(function(){
changeVideo(1);
})
$('.vjs-menu-item2').click(function(){
changeVideo(2);
})
videojs("my_video_1").on("timeupdate", function(){
var myVideo = "my_video_1"
timeChange(myVideo);
});
videojs("my_video_1").on('ended',function(){
var myVideo = "my_video_1"
$lastSwiper.startAutoplay();
console.log('start');
videoEnd(myVideo);
})
videojs("my_video_2").on("timeupdate", function(){
var myVideo = "my_video_2"
timeChange(myVideo);
});
videojs("my_video_2").on('ended',function(){
var myVideo = "my_video_2"
$lastSwiper.startAutoplay();
console.log('start');
videoEnd(myVideo);
})
videojs("my_video_3").on("timeupdate", function(){
var myVideo = "my_video_3"
timeChange(myVideo);
});
videojs("my_video_3").on('ended',function(){
var myVideo = "my_video_3"
$lastSwiper.startAutoplay();
console.log('start');
videoEnd(myVideo);
})
videojs("my_video_4").on("timeupdate", function(){
var myVideo = "my_video_4"
timeChange(myVideo);
});
videojs("my_video_4").on('ended',function(){
var myVideo = "my_video_4"
$lastSwiper.startAutoplay();
console.log('start');
videoEnd(myVideo);
})
videojs("my_video_5").on("timeupdate", function(){
var myVideo = "my_video_5"
timeChange(myVideo);
});
videojs("my_video_5").on('ended',function(){
var myVideo = "my_video_5"
$lastSwiper.startAutoplay();
console.log('start');
videoEnd(myVideo);
})
videojs("my_video_6").on("timeupdate", function(){
var myVideo = "my_video_6"
timeChange(myVideo);
});
videojs("my_video_6").on('ended',function(){
var myVideo = "my_video_6"
$lastSwiper.startAutoplay();
console.log('start');
videoEnd(myVideo);
})
$('.H3_play_btn').click(function(){
$click = -1;
})
function styleFormat(num){
num = num + 1;
var playDoc = '.playBtn' + num;
var swiperImgDoc = '.swiperImg' + num;
var videoConDoc = '.videoCon' + num;
$(playDoc).css('display','none');
$(swiperImgDoc).css('display','none');
$(videoConDoc).css('display','block');
}
function changeVideo(type){
var my_video = "my_video_" + ($click+1);
var slide = '.slide' + ($click + 1);
var change_btn = slide + " #change_btn";
var ctime=videojs(my_video).currentTime();
if(type==1){
if ($click === 0) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 1) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 2) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 3) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 4) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 5) {
videojs(my_video).src([{src: "视频连接" }]);
}
$(change_btn).html('标清');
videojs(my_video).play();
}
if(type==2){
if ($click === 0) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 1) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 2) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 3) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 4) {
videojs(my_video).src([{src: "视频连接" }]);
} else if ($click === 5) {
videojs(my_video).src([{src: "视频连接" }]);
}
$(change_btn).html('高清');
videojs(my_video).play();
}
window.obj.ctime=ctime;
window.obj.tag=true;
}
function timeChange (myVideo) {
if(window.obj.tag){
videojs(myVideo).currentTime(window.obj.ctime)
videojs(myVideo).play();
window.obj.tag=false;
}
}
function videoEnd (myVideo) {
var videoCon = ".videoCon" + ($click + 1);
var play_control = videoCon + " .vjs-play-control";
var control_text = videoCon + " .vjs-control-text";
}
}
swiper 视频轮番的更多相关文章
- 基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
- 视频swiper轮播
关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...
- swiper中有视频时，滑动停止后视频停止播放
我们经常能够看到在图片轮播中,穿插着视频的播放,如下图为淘宝的一个产品轮播图,放个视频能够让顾客对产品有个更全面的认识. 我们可以用swiper实现这个功能.用法就跟放图片一样,只是这里把图片换成视频 ...
- swiper 仿淘宝详情页面 视频图片切换
1.好兄弟,看一下是否是你需要的 2.废话不多说 直接上代码,复制粘贴一下 自己引用一下swiper.js和css 然后就可以开始玩儿了 <!DOCTYPE html> <html& ...
- 小程序 swiper 轮播图滚动图片 + 视频
直奔代码主题wxml: <view class="test_box"> <swiper indicator-dots="{{indicatorDots} ...
- vue脚手架使用swiper /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...
- Android--SurfaceView播放视频
前言 本篇博客讲解一下如何在Android下,使用SurfaceView播放一个视频流媒体.之前有讲到如何使用MediaPlayer播放音频流媒体,其实MediaPlayer还可以播放视频,只需需要S ...
- 前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）
写在前面 参考答案及资源在看云平台发布,如果大家想领取资源以及查看答案,可直接前去购买.一次购买永久可看,文档长期更新!有什么意见与建议欢迎您及时联系作者或留言回复! 文档描述 本文是关注微信小程序的 ...
- Android 拍摄（横\竖屏）视频的懒人之路
想一想,我们聊过AudioReord,AudioTrack,MediaPlayer,那多媒体四大金刚,就剩下了MediaRecorder了(SoundPool?我这里信号不好···).其实MediaR ...
随机推荐
- iOS开发-- 开发中遇到的问题汇总
1. CUICatalog: Invalid asset name supplied: 今天写了加载图片,默认图片写的是[UIImage imageNamed:@""],之后就报下 ...
- Linux设备驱动剖析之IIC（四）
558行,又重试2次. 560行,调用s3c24xx_i2c_doxfer函数: static int s3c24xx_i2c_doxfer(struct s3c24xx_i2c *i2c, stru ...
- fs项目---->migrate-mongo的使用（一）
tw项目中用的是mongo数据库,数据的迁移也是需求的一部分.这时我们可以使用migrate-mongo在nodejs中方便的进行数据的迁移,以下记录一下使用的过程. 一.migrate-mongo的 ...
- 排查java进程cpu占用高的问题
一.思路 分两步,主要是找出占用cpu高的进程,再找出该进程内到底是哪个线程占用cpu高. 二.找出占用cpu高的进程 参考: https://blog.csdn.net/hfhwfw/article ...
- python3之end关键字
end 关键字 关键字end可以用于将结果输出到同一行,或者在输出的末尾添加不同的字符,实例如下: #!/usr/bin/python3 # Fibonacci series: 斐波纳契数列 # 两个 ...
- Ubuntu 配置vsftpd实现FTP服务器
0.vsftpd是啥玩意 都不知道安装了个啥东西,那就没意思了,所以先去了解下什么是vsftpd.vsftpd意思为“very secure FTP daemon(非常安全的FTP进程)”,当然只有更 ...
- 配置数据源的三种方式和sql心跳的配置
三种方式配置数据源连接池: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...
- centos7 LANMP 安装
没有开头语. 操作系统:CentOs7.6 64位. Nginx:系统自带 nginx1.12.2包. Mysql:系统自带 MariaDB 5.6 ,更换为 Mysql5.6 PHP:系统php5. ...
- 170828、Eclipse Java注释模板设置详解以及版权声明
编辑注释模板的方法:Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元素 ...
- J - Vertical Histogram(1.5.7)
J - Vertical Histogram(1.5.7) Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d &am ...