video多视频轮播Swiper 播放视频不轮播不循环
在实际工作中经常会遇到swiper轮播多个视频，播放视频不轮播不循环
loop:true下问题：
解决方法：不要在html绑定@click事件监听不到 使用swiper的onclick回调函数即：$(".video").on("click",function(){...})，
on: {
slideChangeTransitionEnd: function(){
console.log(this.activeIndex)
},
},
(3)loop:true下当前选中slide带有class：.swiper-slide-active 做相关操作在这个class下处理
$(".swiper-slide-active video").on('play',function(){
//播放状态
});
$(".swiper-slide-active video").on('pause',function(){
//暂停状态
});
停止自动轮播：_this.swiper1.autoplay.stop();
启动自动轮播：_this.swiper1.autoplay.start();
3、loop:false下问题：
on: {
slideChangeTransitionEnd: function(){
console.log(this.activeIndex)
},
},
不循环loop去掉就行
------------------------------------------------------------------------------------------------------------------------
例：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3、video多视频swiper播放停止轮播循环loop=true</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!-- 公用css -->
<link rel="stylesheet" href="css/public/reset.css">
<link rel="stylesheet" href="css/public/common.css">
<link rel="stylesheet" href="css/public/swiper.min.css">
<!-- rem.js -->
<script src="js/must/rem.js"></script>
<style>
.video{position:relative;overflow:hidden;width:60%;height:60%;margin:10% auto 0 auto}
.video-cover{position:absolute;z-index:10;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,0.3)}
img{display:block;width:100%}
.video-cover .play-ico{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- 页面进入视频倒计时播放 -->
<div class="video">
<div class="swiper-container">
<div class="swiper-wrapper" style='height:auto'>
<div class="swiper-slide" style='height:100%' v-for='item,index in videoData'>
<div class="video-cover">
<img class="play-ico" style="width: .5rem;" src="data:images/play.png" alt="">
<img class="videoImg":src="item.image_cover" alt="" >
</div> <div class="video-box" :class = "'dialog'+index">
<video :id="'video'+index" type="video/mp4" :src="item.videoPlay" controls="controls" class="videos" style='width:100%;'></video>
</div>
</div>
</div>
<div class="swiper-pagination" style ="width: 20%;transform: translateX(-50%);left: 50%;height: 34px;"></div>
</div>
</div>
</div>
<!-- 公用js -->
<script src="js/must/vue.js"></script>
<script src="js/must/swiper.min.js"></script>
<script src="js/must/jquery_1.12.3_jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
index.js
var vm = new Vue({
el:'#app',
data:{
// 视频data
videoData:[
{
image_cover: "http://mall.faw-vw.com/shop-m/page/activity/2020-0606/images/playImg1.png",
videoPlay: "http://mall.faw-vw.com/shop-m/page/activity/2020-0606/images/video1.mp4",
},
{
image_cover: "http://mall.faw-vw.com/shop-m/page/activity/2020-0606/images/playImg2.jpg",
videoPlay: "http://mall.faw-vw.com/shop-m/page/activity/2020-0606/images/video2.mp4",
}
],
swiper1:''
},
created(){
},
mounted: function () {
var _this = this;
_this.swiper1 = new Swiper('.swiper-container',{
observer: true, //解决刷新不能滑动问题
observeParents: true, //解决刷新不能滑动问题
observeSlideChildren:true,
slidesPerView: 'auto',
autoHeight: true,
initialSlide: 0,
loop: true,
autoplay: true,
on: {
// 监听轮播：loop: true时this.activeIndex不在是数据索引，而是复制多个的slide个数值，
// loop去掉时 this.activeIndex是数据索引,slide个数是数据length
slideChangeTransitionEnd: function(){
console.log(this.activeIndex)
// 轮播时所有视频停止播放， 封面图显示，视频隐藏
var videoLength=$(".videos").length;
for(var i=0; i<videoLength; i++){
$(".videos").eq(i)[0].pause();
}
$(".video-cover,.videoImg").show();
$(".video-box").hide();
},
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
// 视频播放事件创建 loop为true时会复制多个slide,无法监听元素索引值，不要在html上@click，要绑定class用js实现
$(".video-cover").on("click",function(){
_this.playVideo();
})
},
methods:{
playVideo: function () {
var _this = this;
_this.swiper1.autoplay.stop();
$(".swiper-slide-active .video-cover,.swiper-slide-active .videoImg").hide();
$(".swiper-slide-active .video-box").show();
// 点击哪个视频哪个播放
$(".swiper-slide-active .video-box .videos")[0].play();
//监听当前视频播放状态
$(".swiper-slide-active .video-box .videos").on('play',function(){
_this.swiper1.autoplay.stop()
});
$(".swiper-slide-active .video-box .videos").on('pause',function(){
_this.swiper1.autoplay.start()
});
},
},
})
video多视频轮播Swiper 播放视频不轮播不循环的更多相关文章
- 群晖synology的Video Station无法通过浏览器在线播放视频
群晖synology的Video Station无法通过浏览器在线播放视频 http://www.hangge.com/blog/cache/detail_419.html
- 手机浏览器自动播放视频video（设置autoplay无效）的解决方案
1.问题的提出 某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击. 2.尝试解决 加autopla ...
- video播放视频以及相关事件
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- 使用VideoView播放视频
为了在Android应用中播放视频,Android提供了VideoView组件,它就是一个位于android.widget包下的组件,它的作用与ImageView类似,只是ImageView用于显示图 ...
- android: 播放视频
播放视频文件其实并不比播放音频文件复杂,主要是使用 VideoView 类来实现的.这个 类将视频的显示和控制集于一身,使得我们仅仅借助它就可以完成一个简易的视频播放器. VideoView 的用法和 ...
- Android 视频播放器 (一)：使用VideoView播放视频
一.简介 作为Android开发,我们不可避免的会接触到视频播放,VideoView做为最简单的播放器,我们是不应该不会的. 下面简单介绍一下VideoView: VideoView是使用MediaP ...
- Android开发之使用VideoView播放视频
Android提供了 VideoView组件.它的作用与ImageView类似,仅仅是ImageView用于显示图片.而VideoView用于播放视频. 使用VideoView播放视频的过程例如以下: ...
- iOS视频边下边播--缓存播放数据流
实现视频边下边播,这里的边下边播不是单独开一个子线程去下载,而是把视频播放的数据给保存到本地.简而言之,就是使用一遍的流量,既播放了视频,也保存了视频. 用到的框架:<AVFoundation/ ...
- HTML5 video标签播放视频下载原理
HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...
- 解决html5 video不能播放 能播放声音不能播放视频
<video id="playVideo" style="width:90%; height:auto;" controls poster=". ...
随机推荐
- 【Shell案例】【awk map计数&sort按指定列排序】9、统计每个单词出现的个数
描述写一个 bash脚本以统计一个文本文件 nowcoder.txt 中每个单词出现的个数. 为了简单起见,你可以假设:nowcoder.txt只包括小写字母和空格.每个单词只由小写字母组成.单词间由 ...
- Go 每日一库之 go-carbon，优雅的golang日期时间处理库
Carbon 是一个轻量级.语义化.对开发者友好的 golang 时间处理库,支持链式调用. Carbon 已被 awesome-go 收录, 如果您觉得不错,请给个 star 吧. github.c ...
- 创建并且配置win10系统虚拟机
一.创建Windows10镜像 1.下载地址:https://www.microsoft.com/zh-cn/software-download/windows10 2.制作镜像 完成之后,会生成一个 ...
- 【JVM】经典垃圾回收器
本文已收录至Github,推荐阅读 Java随想录 微信公众号:Java随想录 CSDN: 码农BookSea 转载请在文首注明出处,如发现恶意抄袭/搬运,会动用法律武器维护自己的权益.让我们一起维护 ...
- Python实验报告（第8章）
实验8:模块 一.实验目的和要求 1.了解模块的内容: 2.掌握模块的创建和导入方式: 3.了解包结构的创建和使用. 二.实验环境 软件版本:Python 3.10 64_bit 三.实验过程 1.实 ...
- [OpenCV实战]45 基于OpenCV实现图像哈希算法
目前有许多算法来衡量两幅图像的相似性,本文主要介绍在工程领域最常用的图像相似性算法评价算法:图像哈希算法(img hash).图像哈希算法通过获取图像的哈希值并比较两幅图像的哈希值的汉明距离来衡量两幅 ...
- [OpenCV实战]51 基于OpenCV实现图像极坐标变换与逆变换
在图像处理领域中,经常通过极坐标与笛卡尔直角坐标的互转来实现图像中圆形转为方形,或者通过极坐标反变换实现方形转圆形.例如钟表的表盘,人眼虹膜,医学血管断层都需要用到极坐标变换来实现圆转方. 文章目录 ...
- JavaBean为何物？
JavaBean为何物? 摘要:初学SSM框架之后,我对JavaBean这个东西开始有了简单的接触,在很久以前听见JavaBean这个词一直以为是一个非常高大上的东西,但是在仔细研究之后发现其本质 ...
- 浪 - Java
如果你的计算机还没有安装 Java, 这篇说明很适合你. OpenJDK 下载地址 历史版本归档 环境配置 cd ~/.local wget https://download.java.net/jav ...
- 穿透的switch语句-循环概述与基本组成部分
穿透的switch语句 在switch语句中,如果case的后面不写break,将出现穿透现象,也就是不会在判断下一个case的值,直接向后运 行,直到遇到break,或者整体switch结束. pu ...