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

添加滑动视频播放

master
chen 2022-08-04 17:44:27 +08:00
parent 9e8da1f284
commit a3acd6c56a
8 changed files with 94 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/foot-tabs/foot-tab.vue
View File

@ -121,7 +121,7 @@
uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
break;
case 3:
uni.reLaunch({url:'/pages/tabbar/vedio/vedio'})
uni.reLaunch({url:'/pages/tabbar/video/video'})
break;
case 4:
uni.reLaunch({url:'/pages/tabbar/my/my'})

6
components/swipers/swiper-pu.vue
View File

@ -4,7 +4,7 @@
<swiper-item v-for="(item,index) in bannerList" :key="index">
<view @tap="chooseImg(index,item.url)" class="img-box">
<image :style="{borderRadius:newRadius,height:newHeight}" class="img animated fadeIn" :src="item.imgSrc" mode="aspectFill"></image>
<image @tap.stop="playVideo(index)" v-if="item.isVideo && isVedio" class="posia animated bounceIn" style="width: 126rpx;height: 126rpx;z-index: 1;" src="/static/public/video.png" mode=""></image>
<image @tap.stop="playVideo(index)" v-if="item.isVideo && isVideo" class="posia animated bounceIn" style="width: 126rpx;height: 126rpx;z-index: 1;" src="/static/public/video.png" mode=""></image>
</view>
</swiper-item>
</swiper>
@ -62,7 +62,7 @@
return {
bcurrent: 0, // 默认当前选中项
isShowVideo:false, // 是否显示视频
isVedio:uni.getStorageSync('is_vedio') // 是否是视频
isVideo:uni.getStorageSync('is_video') // 是否是视频
};
},
methods:{
@ -75,7 +75,7 @@
this.bannerList.forEach(item=>{
let nurl = ''
let obj = {}
if(this.isVedio) {
if(this.isVideo) {
item.url=='' ? nurl = item.imgSrc : nurl = item.url
obj = {
url:nurl,

12
pages.json
View File

@ -22,7 +22,7 @@
}
}, {
"path": "pages/tabbar/vedio/vedio",
"path": "pages/tabbar/video/video",
"style": {
"navigationBarTitleText": "视频",
"enablePullDownRefresh": false
@ -85,7 +85,7 @@
}
,{
"path" : "my-vedio/my-vedio",
"path" : "my-video/my-video",
"style" :
{
"navigationBarTitleText": "",
@ -197,6 +197,14 @@
"enablePullDownRefresh": false
}
},{
"path" : "play-video/play-video",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
]
}

2
pages/tabbar/my/my.vue
View File

@ -77,7 +77,7 @@
'/pagesA/my-data/my-data',
'/pagesA/my-course/my-course',
'/pagesA/my-order/my-order',
'/pagesA/my-vedio/my-vedio',
'/pagesA/my-video/my-video',
'/pagesA/my-coupon/my-coupon',
'/pagesA/my-integral/my-integral',
'/pagesA/my-address/my-address',

2
pages/tabbar/vedio/vedio.vue → pages/tabbar/video/video.vue
View File

@ -14,7 +14,7 @@
<view class="radius8 bacf pad10 boxshow1 mar-s30" v-for="(item,index) in 2" :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 @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>

0
pagesA/my-vedio/my-vedio.vue → pagesA/my-video/my-video.vue
View File

78
pagesB/play-video/play-video.nvue Normal file
View File

@ -0,0 +1,78 @@
<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>
<!-- 封面图 -->
<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%;
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',
isPlayImg:false,
autoplay:true,
videoContext:'',
title:'',//视频的标题，全屏时在顶部展示
posterSrc:'',//视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
isControls: false,//是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
dans:true,//是否开启播放手势，即双击切换播放/暂停
isCenterImg:false,//是否显示视频中间的播放按钮
isBottomImg:true,//是否显示视频底部控制栏的播放按钮
isFull:true//是否显示全屏按钮
}
},
onReady: function (res) {
this.videoContext = uni.createVideoContext('myVideo', this)
},
onLoad(options) {
this.videoSrc = options.src
this.posterSrc = options.posterSrc
},
methods:{
backEv(){
uni.navigateBack({
delta:1
})
},
playEv(){
this.isPlayImg = false;
this.autoplay = false;
this.videoContext.play();
},
comePlay(){//当开始/继续播放时触发play事件
this.isControls = true;
},
comePause(){
this.isPlayImg = true;
this.isControls = false;
}
}
}
</script>
<style>
</style>

BIN
static/public/video-back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 630 B