124 lines
4.0 KiB
Plaintext
124 lines
4.0 KiB
Plaintext
<template>
|
|
<div style="width:100%;overflow-x:hidden;">
|
|
<image class="" @tap="backEv" :style="{top:statusHeight+'px'}" src="/static/public/video-back.png" style="width: 33rpx;height: 33rpx;position: fixed;z-index: 10;left: 20rpx;" mode="aspectFill"></image>
|
|
<swiper @transition="getxy" @change="switchVideo" :current="currentIndex" vertical :style="{width:newwidth+'px',height:newHeight+'px'}">
|
|
<swiper-item @tap="doubleClick(index)" v-for="(item,index) in videoList" :key="index">
|
|
<!-- :poster="item.cover" -->
|
|
<video :id="`video${index}`" :ref="`refvideo_${index}`" style="width: 100%;" :style="{height:newHeight+'px'}" :autoplay="item.autoplay"
|
|
:src="item.src" :enable-play-gesture="dans"
|
|
:controls="item.isControls" :show-center-play-btn="isCenterImg" :show-play-btn="isBottomImg" :show-fullscreen-btn="isFull"
|
|
@play="comePlay(index)" @pause="comePause(index)"></video>
|
|
<!-- 封面图 -->
|
|
<image v-if="item.isPlayImg" @tap.stop="playEv(index)" src="/static/tabbar/icon-play.png" style="position: fixed;top: 50%;left: 50%;
|
|
width: 126rpx;height: 126rpx;transform: translate(-50%, -50%);" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
statusHeight: uni.getSystemInfoSync().statusBarHeight + 42/2 - 10,
|
|
newHeight:uni.getSystemInfoSync().windowHeight,
|
|
newwidth:uni.getSystemInfoSync().windowWidth,
|
|
videoSrc:'https://video.shipin520.com/videos/17/97/40/a_yiPIEXbE43Tm1559179740.mp4',
|
|
videoList:[],
|
|
currentIndex:0,
|
|
videoContext:'',
|
|
title:'',//视频的标题，全屏时在顶部展示
|
|
posterSrc:'',//视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
|
|
dans:true,//是否开启播放手势，即双击切换播放/暂停
|
|
isCenterImg:false,//是否显示视频中间的播放按钮
|
|
isBottomImg:true,//是否显示视频底部控制栏的播放按钮
|
|
isFull:true,//是否显示全屏按钮
|
|
count:0
|
|
}
|
|
},
|
|
onReady: (res)=> {
|
|
|
|
},
|
|
onLoad(op) {
|
|
// this.currentIndex = op.current;
|
|
this.currentIndex = 0;
|
|
uni.getStorageSync('videoList').forEach(item=>{
|
|
let obj = {
|
|
...item,
|
|
isPlayImg:true,
|
|
autoplay:false,
|
|
isControls:false
|
|
}
|
|
this.videoList.push(obj);
|
|
})
|
|
this.videoList[this.currentIndex].autoplay = true;
|
|
this.videoContext = uni.createVideoContext(`video${this.currentIndex}`, this)
|
|
},
|
|
onHide() {
|
|
uni.removeStorageSync('videoList');
|
|
},
|
|
methods:{
|
|
// 视频滑动结束
|
|
getxy(e){
|
|
let num = e.detail.dy;
|
|
if(num==this.newHeight || -num==this.newHeight){
|
|
this.playCurrentVideo(this.currentIndex);
|
|
}
|
|
},
|
|
// 滑动swiper 设置当前视频索引
|
|
switchVideo(e){
|
|
this.currentIndex = e.detail.current;
|
|
},
|
|
// 双击
|
|
doubleClick(index){
|
|
this.count++;
|
|
setTimeout(()=>{
|
|
this.count = 0;
|
|
},300)
|
|
if(this.count>2){
|
|
if(this.videoList[index].isPlayImg){
|
|
// 如果当前视频正在播放中，双击及暂停播放
|
|
this.videoContext.pause();
|
|
this.videoList[index].isPlayImg = true;
|
|
} else {
|
|
// 如果当前视频暂停中，双击及开始播放
|
|
this.videoList[index].isPlayImg = false;
|
|
this.videoContext.play();
|
|
}
|
|
}
|
|
},
|
|
// 播放当前视频
|
|
playCurrentVideo(index){
|
|
this.videoContext.pause();
|
|
this.videoContext = uni.createVideoContext(`video${index}`, this);
|
|
this.videoList[index].isPlayImg = false;
|
|
this.videoContext.play();
|
|
},
|
|
// 退出视频播放
|
|
backEv(){
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
},
|
|
// 点击播放图标，播放视频
|
|
playEv(index){
|
|
this.playCurrentVideo(index);
|
|
},
|
|
// 视频播放
|
|
comePlay(index){//当开始/继续播放时触发play事件
|
|
this.videoList[index].isPlayImg = false;
|
|
this.videoList[index].isControls = true;
|
|
},
|
|
// 视频暂停
|
|
comePause(index){
|
|
this.videoList[index].isPlayImg = true;
|
|
this.videoList[index].isControls = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|