添加滑动视频播放

components/foot-tabs/foot-tab.vue

@@ -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'})

components/swipers/swiper-pu.vue

@@ -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,

pages.json

@@ -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
+                }
+                
                 }
             ]
         }

pages/tabbar/my/my.vue

@@ -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',

pages/tabbar/video/video.vue

@@ -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>

pagesB/play-video/play-video.nvue

@@ -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>