修改视频播放形式

me/detail/detail.vue

@@ -1,5 +1,6 @@
 <template>
 	<view>
+
 		<swiper @longpress="openBs()" :style="{height:winHeight}" :circular="true" class="swipers" @change="change"
 			:current="current" :vertical="true" :indicator-dots="false" :autoplay="false" :interval="0" :duration="1">
 			<swiper-item class="swipers-item" v-for="(item,index) in swiperList" :key="item.courseDetailsId">
@@ -9,7 +10,7 @@
 					<!-- #ifdef MP-WEIXIN -->
 					<!-- wxUrl -->
 					<video :show-fullscreen-btn="false" @controlstoggle="controlstoggles" @timeupdate="timeupdate"
-						@waiting="waiting()" object-fit="contain" v-if="current === index && item.videoUrl"
+						@waiting="waiting()" object-fit="cover" v-if="current === index && item.videoUrl"
 						:play-strategy="2" :show-loading="true" codec="software" :muted="false"
 						:show-center-play-btn="true" :loop="false" @ended="ended"
 						@play="videoPlay('myVideo'+item.courseDetailsId)" :enable-progress-gesture="false"
@@ -20,7 +21,7 @@
 					<!-- #ifndef MP-WEIXIN -->
 					<video :show-fullscreen-btn="false" @click.stop.prevent="isSelectType" :controls="true"
 						@controlstoggle="controlstoggles" @timeupdate="timeupdate" @waiting="waiting()"
-						object-fit="contain" v-if="current === index && item.videoUrl" :play-strategy="2"
+						object-fit="cover" v-if="current === index && item.videoUrl" :play-strategy="2"
 						:show-loading="true" codec="software" :muted="false" :show-center-play-btn="true" :loop="false"
 						@ended="ended" @play="videoPlay('myVideo'+item.courseDetailsId)"
 						:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
@@ -188,7 +189,7 @@
 		<!-- 购买视频 -->
 		<u-popup :closeable="true" :custom-style="customStyle" :safe-area-inset-bottom="true" close-icon="close"
 			close-icon-size="30" close-icon-color="#333333" :mask-custom-style="maskCustomStyle" v-model="showPay"
-			border-radius="24" mode="bottom" >
+			border-radius="24" mode="bottom">
 			<view class="list" :style="listStyle">
 				<view class="list-title flex align-center">
 					<!-- <u-icon name="lock" class="list-title-icon" color="#efbb6b" size="40"></u-icon> -->
@@ -304,8 +305,10 @@
 	// #ifdef MP-WEIXIN || MP-TOUTIAO
 	var videoAd = null;
 	// #endif
-	
+
-	import {returnIsSafari} from '@/utils/app.js'
+	import {
+		returnIsSafari
+	} from '@/utils/app.js'
 
 	export default {
 		components: {
@@ -314,7 +317,7 @@
 		},
 		data() {
 			return {
-				isSafari:returnIsSafari(),
+				isSafari: returnIsSafari(),
 				//记录未购买视频索引
 				noBuyVideoIndex: null,
 				//奖品列表
@@ -455,12 +458,12 @@
 			}
 		},
 		computed: {
-			listStyle(){
+			listStyle() {
-				if(this.isSafari){
+				// if (this.isSafari) {
-					return {
+				// 	return {
-						'min-height':'540rpx'
+				// 		'min-height': '540rpx'
-					}
+				// 	}
-				}
+				// }
 				return ''
 			},
 			//当前视频是否可以看广告解锁
@@ -473,7 +476,7 @@
 			},
 			// 移动视频信息的样式
 			tabBarStyle() {
-				
+
 				let style = {
 					// 滑块在页面渲染后第一次滑动时，无需动画效果
 					'transition-duration': `${1}s`,
@@ -515,6 +518,7 @@
 			// #endif
 
 		},
+
 		onLoad(e) {
 			//在苹果系统微信小程序是否开启支付
 			this.isWxIosPay = uni.getStorageSync('isWxIosPay')
@@ -742,6 +746,21 @@
 			// #ifndef MP-WEIXIN || MP-KUAISHOU
 			this.meunTop = 37
 			// #endif
+
+	
+			// const windowResizeCallback = (res) => {
+			// 	console.log('变化后的窗口宽度=' + res.size.windowWidth)
+			// 	console.log('变化后的窗口高度=' + res.size.windowHeight)
+			// 	this.onResize(res)
+			// 	setTimeout(()=>{
+			// 		this.onResize(res)
+			// 	},500)
+			// }
+			// uni.onWindowResize(windowResizeCallback)
+
+			// #ifdef H5
+
+			// #endif
 		},
 		watch: {
 			//监听当前播放的集数
@@ -750,8 +769,8 @@
 			},
 			showControls(val) {
 				//在没有播放视频权限的时候控制中心不隐藏
-				const nowVideo=this.videoList[this.current]
+				const nowVideo = this.videoList[this.current]
-				const videoUrl=nowVideo?nowVideo.videoUrl:''
+				const videoUrl = nowVideo ? nowVideo.videoUrl : ''
 				if (!videoUrl) {
 					this.showControls = true
 					this.$forceUpdate()
@@ -772,18 +791,28 @@
 				// #ifdef H5
 				let el = document.querySelector('.uni-video-bar');
 				console.log(el, '2222222')
-				if(el){
+				if (el) {
 					if (val) {
 						el.style = 'display:block !important;';
 					} else {
 						el.style = 'display:none !important;';
 					}
 				}
-				
+
 				// #endif
 			},
 		},
 		methods: {
+			onResize(res) {
+				const sysInfo = uni.getSystemInfoSync()
+				//获取可是区域高度
+				const winHeight = sysInfo.windowHeight
+				if (winHeight && winHeight > 0) {
+					this.winHeight = winHeight + 'px'
+				} else {
+					this.winHeight = '100vh'
+				}
+			},
 			/**
 			 * 获取金币比例
 			 */
@@ -1601,10 +1630,10 @@
 							console.log(this.noBuyVideoIndex);
 							console.log(this.videoList);
 							if (this.noBuyVideoIndex !== null && this.noBuyVideoIndex !==
-								undefined && this.noBuyVideoIndex !== '' ) {
+								undefined && this.noBuyVideoIndex !== '') {
-									console.log('获取转盘抽奖次数')
+								console.log('获取转盘抽奖次数')
 								this.$Request.getT('app/discSpinning/drawCount').then(res => {
-									console.log('转盘抽奖次数',res.count)
+									console.log('转盘抽奖次数', res.count)
 									if (res.count >= 1) {
 										uni.navigateTo({
 											url: '/me/choujiang/choujiang'
@@ -1627,8 +1656,8 @@
 									this.countPrice = this.videoList[this.current].price
 									this.showPay = true
 									this.noBuyVideoIndex = this.current
-								} 
+								}
-								
+
 							})
 
 
@@ -1871,9 +1900,11 @@
 	page {
 		background-color: #000;
 	}
-	::v-deep .u-drawer-content{
+
+	::v-deep .u-drawer-content {
 		// position: fixed;
 	}
+
 	.videoListCurr {
 		background-color: #ff7581 !important;
 		color: #ffffff !important;
@@ -1909,7 +1940,7 @@
 		padding: 16rpx 0;
 		text-align: center;
 	}
-	
+
 	.bsActive {
 		background-color: #ffffff;
 		border-radius: 6rpx;
@@ -2035,6 +2066,8 @@
 
 	.swipers {
 		width: 100%;
+		box-sizing: border-box;
+		overflow: hidden;
 
 		.swipers-item {
 			width: 100%;