chen
/
martial-arts
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

优化视频播放

master
chen 2022-08-05 18:01:57 +08:00
parent da5ae60764
commit 03bc80f0df
6 changed files with 244 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
commons/base.css
View File

@ -33,6 +33,7 @@ image{vertical-align: middle;}
.width26{width: 26%;}
.width25{width: 25%;}
.posi{position: fixed;z-index: 10;}
.posAll{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.45);z-index: 12;}
.posiszy{position: fixed;left: 0;right: 0;z-index: 5;}
.posixzy{position: fixed;left: 0;right: 0;z-index: 2;bottom: 0;}

10
components/list.vue
View File

@ -9,8 +9,8 @@
<span class="bold colf8">￥{{item.price}}</span>
<span class="fon20 mar-z10 tline-through" style="color: #969696;">￥{{item.original_price}}</span>
</view>
<view v-if="!ifCourse" class="radius18 pad-zy12 disjcac flexs fon20" style="color: #f37617;border: 2rpx solid #f37617;">购买</view>
<view v-else class="radius16 pad-zy10 disjcac colf flexs fon20" style="border: 2rpx solid #f37617;background-color: #f37617;">去学习</view>
<view v-if="item.is_buy!=1" class="radius18 pad-zy12 disjcac flexs fon20" style="color: #f37617;border: 2rpx solid #f37617;">购买</view>
<view v-if="item.is_buy==1" class="radius16 pad-zy10 disjcac colf flexs fon20" style="border: 2rpx solid #f37617;background-color: #f37617;">去学习</view>
</view>
</view>
</view>
@ -20,12 +20,6 @@
<script>
export default {
name:"list",
props:{
ifCourse:{
type:Boolean,
default:false
}
},
data() {
return {
list:[]

143
pages/tabbar/pagehome/pagehome.vue
View File

@ -8,47 +8,48 @@
<view class="posi-sticky" :style="{top:newtop+'px'}">
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
</view>
<view class="pad-zy20 pad-s25">
<view class="radius8 bacf pad10 boxshow1">
<view class="pad-zy20 pad-s25" v-if="ifLoading">
<view class="" v-if="bigCourse.length">
<view class="radius8 bacf pad10 boxshow1" v-for="(item,index) in bigCourse" :key="index">
<view class="posir">
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 518rpx;" mode="aspectFill" class="width100" lazy-load></image>
<image :src="item.cover" style="height: 518rpx;" mode="aspectFill" class="width100" lazy-load></image>
<view class="posia-xzy bac5 fon24 colf pad18">
<view class="clips1">动作教学动作教学动作教学动作教学</view>
<view class="clips1">{{item.name}}</view>
<view class="disjbac ae">
<view class="">
<span class="bold">￥199.00</span>
<span class="fon20 colf8 mar-z20 tline-through">￥220.00</span>
<span class="bold">￥{{item.price}}</span>
<span class="fon20 colf8 mar-z20 tline-through">￥{{item.original_price}}</span>
</view>
<view class="radius18 pad-zy12 pad-sx4 borbot-f disjcac">购买</view>
</view>
</view>
</view>
</view>
</view>
<!-- 两列列表 start -->
<list @goDetail="goCourseDetail"></list>
<list ref="refcourse" @goDetail="goCourseDetail"></list>
<!-- 两列列表 end -->
<!-- 推荐视频 start -->
<view class="disjb ae mar-s40 mar-x20">
<view class="fon32 bold colb">推荐视频</view>
<view class="fon20" style="color: #bbb4b3;">更多+</view>
<view class="fon20" style="color: #bbb4b3;" @tap="goMore(0)">更多+</view>
</view>
<view class="radius8 bacf pad10 boxshow1 mar-x30" v-for="(item,index) in 2" :key="index">
<view class="radius8 bacf pad10 boxshow1 mar-x30" v-for="(item,index) in videoList" :key="index">
<view class="posir disjcac">
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image>
<image class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
<image :src="item.cover" style="height: 388rpx;" mode="aspectFill" class="width100" 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="fon24 pad-sx16 disjcac" style="color: #262626;">
<view class="clips2">动作教学动作教学动作教学动作教学动作教学动作教学</view>
<view class="clips2">{{item.title}}</view>
</view>
</view>
<!-- 推荐视频 end -->
<!-- 推荐商品 start -->
<view class="disjb ae mar-s40">
<view class="fon32 bold colb">推荐商品</view>
<view class="fon20" style="color: #bbb4b3;">更多+</view>
<view class="fon20" style="color: #bbb4b3;" @tap="goMore(1)">更多+</view>
</view>
<list @goDetail="goShopDetail"></list>
<list ref="refshop" @goDetail="goShopDetail"></list>
<!-- 推荐商品 end -->
</view>
</view>
@ -74,12 +75,12 @@
return {
newtop:uni.getSystemInfoSync().statusBarHeight + 40,
current:0,
dataList:[
{title:'课堂讲解'},
{title:'武德教育'},
{title:'爱国主义教育'},
{title:'示范动作讲解'},
],
dataList:[],//分类列表
classId:'',//分类id
bigCourse:[],
videoList:[],//推荐视频
ifLoading:false,
ifCount:0
}
},
onShow() {
@ -91,12 +92,110 @@
this.$store.commit('setAutoplay',false);
},
onLoad() {
// 调用获取分类列表
this.getCourseCate();
},
methods: {
// tab点击事件
clickTab(index){
this.current = index;
// 设置分类id
this.classId = this.dataList[index].id;
this.bigCourse = [];
this.$refs.refcourse.list = [];
this.ifCount++;
// 调用获取课程列表
this.getCourseList();
},
// 获取分类列表
getCourseCate(){
this.$requst.get('/api/spu/category',{type:'course'}).then(res=>{
// 设置分类列表
this.dataList = res.data;
// 如果分类列表不为空
if(this.dataList.length){
// 设置分类id
this.classId = this.dataList[0].id;
// 调用获取课程列表
this.getCourseList();
}
})
},
// 获取课程列表
getCourseList(){
let params = {
category_id:this.classId,
is_home:1
}
this.$requst.post('/api/spu/course',params).then(res=>{
if(res.code==0){
this.ifLoading = true;
if(!this.ifCount){
// 调用获取推荐视频列表
this.getVideoList();
// 调用获取推荐视频列表
this.getShopList();
}
let dataList = res.data.list;
if(dataList.length){
this.bigCourse.push(dataList[0]);
dataList.splice(0,1);
if(dataList.length){
setTimeout(()=>{
// 设置课程列表
this.$refs.refcourse.list = dataList;
},200)
}
}
}
})
},
// 获取推荐视频列表
getVideoList(){
this.$requst.post('/api/spu/video',{is_home:1}).then(res=>{
if(res.code==0){
// 设置推荐视频列表
this.videoList = res.data.list;
}
})
},
// 获取推荐商品
getShopList(){
let params = {
page:1,
size:20,
is_home:1
}
this.$requst.post('/api/spu/list',{params}).then(res=>{
if(res.code==0){
this.$refs.refshop.list = res.data.list;
}
})
},
// 播放视频
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.navigateTo({
url:`/pagesB/play-video/play-video?current=${index}`
})
},
// 更多
goMore(index){
uni.reLaunch({
url:['/pages/tabbar/video/video','/pages/tabbar/shop/shop'][index]
})
},
// 去课程详情
goCourseDetail(id){

52
pages/tabbar/video/video.vue
View File

@ -5,30 +5,34 @@
<view class="posi-sticky" :style="{top:newtop+'px'}">
<view class="pad-sx26 pad-zy20" style="box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, 0.1);">
<view class="radius40 pad-sx2 disjbac pad-zy20" style="background-color: #fff6f5;border: 2rpx solid #ece6e6;">
<input type="text" class="fon24 width100 pad-sx6" placeholder="关键字搜索" placeholder-style="color:#aaa4a3">
<input v-model="keyword" @confirm="getVideoList" type="text" class="fon24 width100 pad-sx6" placeholder="关键字搜索" placeholder-style="color:#aaa4a3">
<view class="pad-sx6 pad-zy10 disjcac" @tap="getVideoList">
<image class="flexs" src="/static/tabbar/icon-search.png" mode="" style="width: 28rpx;height: 28rpx;" lazy-load></image>
</view>
</view>
</view>
</view>
<view class="pad-zy20">
<view class="radius8 bacf pad10 boxshow1 mar-s30" v-for="(item,index) in 2" :key="index">
<view class="radius8 bacf pad10 boxshow1 mar-s30" v-for="(item,index) in dataList" :key="index">
<view class="posir disjcac">
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image>
<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>
</view>
<view class="pad-zy10">
<view class="fon24 pad-sx16 clips2" style="color: #262626;">动作教学动作教学动作教学动作教学动作教学动作教学</view>
<view class="fon24 pad-sx16 clips2" style="color: #262626;">{{item.title}}</view>
<view class="disjbac fon20">
<view class="disac" style="color: #aaaaaa;">
<image class="mar-y10" src="/static/tabbar/icon-look.png" mode="" style="width: 33rpx;height: 25rpx;" lazy-load></image>3021
<image class="mar-y10" src="/static/tabbar/icon-look.png" mode="" style="width: 33rpx;height: 25rpx;" lazy-load></image>{{item.view}}
</view>
<view class="" style="color: #7f7f7f;">2022.07.22</view>
<view class="" style="color: #7f7f7f;">{{item.created_at.slice(0,10).split('-').join('.')}}</view>
</view>
</view>
</view>
<view class="" v-if="noMore">
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
</view>
</view>
</view>
</status-container>
<!-- 底部tab -->
<foot-tab current="3"></foot-tab>
@ -48,12 +52,42 @@
return {
newtop:uni.getSystemInfoSync().statusBarHeight + 42,
dataList:[],
ifloading:false,
flag:true
page:1,
size:20,
total:0,
keyword:'',
noMore:false
}
},
onReachBottom() {
if(this.total!=this.dataList.length){
this.page++;
this.getVideoList();
}
},
onLoad() {
this.getVideoList();
},
methods: {
// 获取视频列表
getVideoList(){
let params = {
keyword:this.keyword,
page:this.page,
size:this.size
}
this.$requst.post('/api/spu/video',params).then(res=>{
if(res.code==0){
this.total = res.data.total;
if(this.page==1){this.dataList=[];}
// 设置视频列表
this.dataList = [...this.dataList,...res.data.list];
if(this.total==this.dataList.length && this.page!=1){
this.noMore = true;
}
}
})
},
}
}
</script>

79
pagesB/play-video/play-video.nvue
View File

@ -1,23 +1,15 @@
<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 vertical :style="{width:newwidth+'px',height:newHeight+'px'}">
<swiper-item>
<video id="myVideo" style="width: 100%;" :style="{height:newHeight+'px'}" autoplay="true"
:src="videoSrc" :enable-play-gesture="dans" :poster="posterSrc"
:controls="isControls" :show-center-play-btn="isCenterImg" :show-play-btn="isBottomImg" :show-fullscreen-btn="isFull"
@play="comePlay" @pause="comePause"></video>
<swiper :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="isPlayImg" @tap="playEv" 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-item>
<video id="myVideo" style="width: 100%;" :style="{height:newHeight+'px'}" autoplay="true"
:src="videoSrc" :enable-play-gesture="dans" :poster="posterSrc"
:controls="isControls" :show-center-play-btn="isCenterImg" :show-play-btn="isBottomImg" :show-fullscreen-btn="isFull"
@play="comePlay" @pause="comePause"></video>
<!-- 封面图 -->
<image v-if="isPlayImg" @tap="playEv" src="/static/tabbar/icon-play.png" style="position: fixed;top: 50%;left: 50%;
<image v-if="item.isPlayImg" @tap="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>
@ -32,42 +24,63 @@
newHeight:uni.getSystemInfoSync().windowHeight,
newwidth:uni.getSystemInfoSync().windowWidth,
videoSrc:'https://video.shipin520.com/videos/17/97/40/a_yiPIEXbE43Tm1559179740.mp4',
isPlayImg:false,
autoplay:true,
videoList:[],
currentIndex:0,
videoContext:'',
title:'',//视频的标题，全屏时在顶部展示
posterSrc:'',//视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
isControls: false,//是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
dans:true,//是否开启播放手势，即双击切换播放/暂停
isCenterImg:false,//是否显示视频中间的播放按钮
isBottomImg:true,//是否显示视频底部控制栏的播放按钮
isFull:true//是否显示全屏按钮
isFull:true,//是否显示全屏按钮
count:0
}
},
onReady: function (res) {
this.videoContext = uni.createVideoContext('myVideo', this)
onReady: (res)=> {
},
onLoad(options) {
this.videoSrc = options.src
this.posterSrc = options.posterSrc
onLoad(op) {
this.currentIndex = op.current;
this.videoList = uni.getStorageSync('videoList');
this.videoContext = uni.createVideoContext(`video${this.currentIndex}`, this)
},
methods:{
// 双击
doubleClick(index){
this.count++;
setTimeout(()=>{
if(this.count>2 && this.videoList[index].isPlayImg == true){
this.playCurrentVideo(index);
this.count = 0;
} else {
this.videoList[index].isPlayImg = true;
}
},1000)
},
// 播放当前视频
playCurrentVideo(index){
this.videoContext.pause();
this.videoContext = uni.createVideoContext(`video${index}`, this)
this.videoList[index].isPlayImg = false;
},
backEv(){
uni.navigateBack({
delta:1
})
},
playEv(){
this.isPlayImg = false;
this.autoplay = false;
playEv(index){
this.playCurrentVideo(index);
this.videoContext.play();
},
comePlay(){//当开始/继续播放时触发play事件
this.isControls = true;
// 视频播放
comePlay(index){//当开始/继续播放时触发play事件
this.videoList[index].isPlayImg = false;
this.videoList[index].isControls = true;
},
comePause(){
this.isPlayImg = true;
this.isControls = false;
// 视频暂停
comePause(index){
this.videoList[index].isPlayImg = true;
this.videoList[index].isControls = false;
}
}
}

29
pagesB/shop-detail/shop-detail.vue
View File

@ -3,7 +3,7 @@
<status-container titlet="产品详情" returnc="#FFFFFF">
<view slot="content" style="margin-top: -20rpx;">
<view class="bacf boxshowb">
<swiper-pu newBottom="20rpx" newHeight="520rpx"></swiper-pu>
<swiper-pu newBottom="20rpx" newHeight="520rpx" :bannerList="bannerList"></swiper-pu>
<view class="pad-zy30 pad-sx24">
<view class="fon26 col26">{{shopInfo.name}}</view>
<view class="col-e42417 dis ae fon24 mar-s20">
@ -19,13 +19,13 @@
<view class="posia-xzy" style="height: 6rpx;background-color: #e42417;bottom: -2rpx;"></view>
</span>
</view>
<rich-text :nodes="richText" style="color: #5a5a5a;"></rich-text>
<view class="pad-s30">
<rich-text :nodes="richText"></rich-text>
</view>
</view>
<!-- 购物车图标 -->
<image @tap="$toolAll.tools.goPage('/pagesB/cart/cart')" class="posia" src="/static/tabbar/icon-cart.png" mode="" lazy-load style="width: 79rpx;height: 79rpx;right: 20rpx;bottom: 160rpx;"></image>
<!-- 底部按钮 -->
<view class="posixzy bacf pad-zy30 disjbac pad-sx20">
<view class="fon30 bold col-e42417">￥189.00</view>
<view class="fon30 bold col-e42417">￥{{shopInfo.price}}</view>
<view class="disac fon24 colf">
<view class="radius32 disjcac" style="background-color: #FFFFFF;color: #f37617;border: 2rpx solid #f37617; width: 184rpx;height: 64rpx;">加入购物车</view>
<view @tap="goConfirmOrder" class="radius32 disjcac mar-z10" style="background-color: #f37617;border: 2rpx solid #f37617;width: 184rpx;height: 64rpx;">立即购买</view>
@ -33,6 +33,8 @@
</view>
</view>
</status-container>
<!-- 购物车图标 -->
<image @tap="$toolAll.tools.goPage('/pagesB/cart/cart')" class="posi" src="/static/tabbar/icon-cart.png" mode="" lazy-load style="width: 79rpx;height: 79rpx;right: 20rpx;bottom: 160rpx;"></image>
</view>
</template>
@ -49,6 +51,7 @@
richText:'',
shopId:'',//产品id
shopInfo:'',//产品详情
bannerList:[],//产品轮播
}
},
onShow() {
@ -73,6 +76,22 @@
this.shopInfo = res.data.detail;
// 富文本
this.richText = this.$toolAll.tools.escape2Html(this.shopInfo.content);
// 产品详情
let newImg = [];
if(this.shopInfo.images){
newImg = this.shopInfo.images.split(',');
}
if(newImg.length){
newImg.forEach(item=>{
let obj = {
imgSrc:item,
url:'',
isVideo:false,
poster:''
}
this.bannerList.push(obj);
})
}
}
})
},