优化视频播放
yaya
parent
ecbb2f7857
commit
3cf634a80b
|
|
@ -26,6 +26,9 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
<pitera textStr="查询课程列表无果o(╥﹏╥)o" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||
</view>
|
||||
<!-- 两列列表 start -->
|
||||
<list ref="refcourse" @goDetail="goCourseDetail"></list>
|
||||
<!-- 两列列表 end -->
|
||||
|
|
@ -64,12 +67,14 @@
|
|||
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||
import list from '@/components/list.vue';
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
export default {
|
||||
components:{
|
||||
'foot-tab' :footTab,
|
||||
swiperTab,
|
||||
swiperPu,
|
||||
list
|
||||
list,
|
||||
pitera
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -174,19 +179,7 @@
|
|||
},
|
||||
// 播放视频
|
||||
palyVideo(index){
|
||||
let newList = [];
|
||||
if(this.videoList.length){
|
||||
this.videoList.forEach(item=>{
|
||||
let obj = {
|
||||
...item,
|
||||
isPlayImg:true,
|
||||
autoplay:false,
|
||||
isControls:false
|
||||
}
|
||||
newList.push(obj);
|
||||
})
|
||||
}
|
||||
uni.setStorageSync('videoList',newList);
|
||||
uni.setStorageSync('videoList',this.videoList);
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/play-video/play-video?current=${index}`
|
||||
})
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<view class="radius8 bacf pad10 boxshow1 mar-s30" v-for="(item,index) in dataList" :key="index">
|
||||
<view class="posir disjcac">
|
||||
<image :src="item.cover" style="height: 388rpx;" mode="aspectFill" class="width100 animated fadeIn" lazy-load></image>
|
||||
<image @tap="$toolAll.tools.goPage('/pagesB/play-video/play-video')" class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
|
||||
<image @tap="palyVideo(index)" class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
|
||||
</view>
|
||||
<view class="pad-zy10">
|
||||
<view class="fon24 pad-sx16 clips2" style="color: #262626;">{{item.title}}</view>
|
||||
|
|
@ -88,6 +88,13 @@
|
|||
}
|
||||
})
|
||||
},
|
||||
// 播放视频
|
||||
palyVideo(index){
|
||||
uni.setStorageSync('videoList',this.dataList);
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/play-video/play-video?current=${index}`
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<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 :current="currentIndex" vertical :style="{width:newwidth+'px',height:newHeight+'px'}">
|
||||
<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"
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
: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="playEv(index)" src="/static/tabbar/icon-play.png" style="position: fixed;top: 50%;left: 50%;
|
||||
<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>
|
||||
|
|
@ -41,36 +41,67 @@
|
|||
},
|
||||
onLoad(op) {
|
||||
this.currentIndex = op.current;
|
||||
this.videoList = uni.getStorageSync('videoList');
|
||||
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(()=>{
|
||||
if(this.count>2 && this.videoList[index].isPlayImg == true){
|
||||
this.playCurrentVideo(index);
|
||||
this.count = 0;
|
||||
} else {
|
||||
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();
|
||||
}
|
||||
},1000)
|
||||
}
|
||||
},
|
||||
// 播放当前视频
|
||||
playCurrentVideo(index){
|
||||
this.videoContext.pause();
|
||||
this.videoContext = uni.createVideoContext(`video${index}`, this)
|
||||
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);
|
||||
this.videoContext.play();
|
||||
},
|
||||
// 视频播放
|
||||
comePlay(index){//当开始/继续播放时触发play事件
|
||||
|
|
|
|||
Loading…
Reference in New Issue