|
需求：需要图片和视频一起轮播，轮播到视频时自动播放，视频播放时暂停轮播，播放完之后恢复轮播。第一个想到的时直接把video放swiper-item里面，在浏览器里面是可以，但是打包成app就不行了，video层级过高，会覆盖在swiper上面。
import img1 from '@/static/video/oldmans.jpg';
import img2 from '@/static/video/mmexport163.jpg';
export default {
data() {
return {
tabList: [
{
url: img2,
id: 2
},
{
url: 'https://www.runoob.com/try/demo_source/movie.mp4',
videoImg: img1,
id: 1
}],
info: [],
currentIdx: 0,
autoplay: true,
videoContext: {},
videoUrl: '',
videoIndexs: []
}
},
watch: {
currentIdx () {
if(this.videoIndexs.indexOf(this.currentIdx) >= 0) {
this.autoplay = false;
this.videoUrl = this.tabList[this.currentIdx].url;
}
}
},
onShow() {
// 获取视频的下标集合
this.tabList.forEach((e, i) => {
if (/\.mp4$/.test(e.url)) {
this.videoIndexs.push(i)
}
})
},
onReady() {
// 创建并返回 video 上下文 videoContext 对象
this.videoContext = uni.createVideoContext('myVideo')
},
methods: {
startPlay(url) {
this.autoplay = false
// this.videoUrl = url
},
stopPlay() {
this.autoplay = true
},
isVideo(url, i) {
if (/\.mp4$/.test(url)) {
return true
} else {
return false
}
},
closeVideo() {
this.videoContext.pause();
this.autoplay = true;
},
showVideo(url) {
this.autoplay = false;
this.videoUrl = url
this.videoContext.play();
},
playVideo() {
this.videoContext.play();
},
pauseVideo() {
this.videoContext.pause();
},
change(e) {
this.currentIdx = e.detail.current
},
imageError: function(e) {
uni.showToast({
title: e.detail.errMsg,
duration: 2000
});
}
}
}
.screen-swiper-box {
background-color: #f60;
flex: 1;
flex-direction: column;
overflow: hidden;
height: 100vh;
}
.swiper-item {
flex: 1;
flex-direction: column;
height: 100vh;
}
.MyVideo {
width: 750px;
height: 100vh;
position: fixed;
z-index: 99;
left:0;
right: 0;
bottom: 0;
top:0;
}
.full-screen {
width: 750rpx;height: 100vh;
}
.video-close {
height: 60rpx;
width: 60rpx;
position: absolute;
right: -1rpx;
z-index: 99999;
bottom: 100rpx;
right: 50rpx;
opacity: 0.5;
}
.lunbo {
width: 750rpx;
height: 100vh;
background: #19ff4e;
display: flex;
flex: 1;
}
.chang-class {
opacity: 0.2;
}
|