From a4311e3f9ebd0f1ab7764ad0cf8911c534392f39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=96=87=E6=B6=9B?= <1909118034@qq.com>
Date: Wed, 23 Oct 2024 22:24:40 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/zx-video/zx-video.vue | 199 +++++++++++++++++++++++++++++++
 manifest.json                    |   4 +-
 pages.json                       |   9 ++
 pages/home/cpns/info-list.vue    |   2 +
 pages/news/course.vue            | 178 +++++++++++++++++++++++++++
 5 files changed, 391 insertions(+), 1 deletion(-)
 create mode 100644 components/zx-video/zx-video.vue
 create mode 100644 pages/news/course.vue

diff --git a/components/zx-video/zx-video.vue b/components/zx-video/zx-video.vue
new file mode 100644
index 0000000..e023599
--- /dev/null
+++ b/components/zx-video/zx-video.vue
@@ -0,0 +1,199 @@
+<template>
+	<view class="content">
+		<video id="playVideo" class="top-video" :src="url" :picture-in-picture-mode="wxsetPicture"
+			:show-screen-lock-button="lockButton" :show-casting-button="showCasting" autoplay="true"
+			@fullscreenchange="fullscreenchange" @controlstoggle="controlstoggle">
+
+			<cover-view class="video-heizith-menu" @tap.stop="showSpeedOptions"
+				v-show="isShowControl">{{playbackRateItem == '1.0'?'倍数':playbackRateItem+'x'}}</cover-view>
+			<cover-view v-if="showSpeedModal" class="modal" @tap.stop="hideSpeedOptions">
+				<cover-view class="modal-content" @click.stop>
+					<cover-view class="modal-content-txt">
+						倍数
+					</cover-view>
+					<cover-view class="speed-option" v-for="(items,indexs) in playbackRateList" :key="indexs"
+						@tap.stop="changeSpeed" :data-rate="items" :class="{ active: items == playbackRateItem }">
+						{{ items }}X
+					</cover-view>
+				</cover-view>
+			</cover-view>
+
+		</video>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			showCasting: { // 是否显示投屏按钮
+				type: Boolean,
+				default: false
+			},
+			lockButton: { // 是否显示锁屏按钮
+				type: Boolean,
+				default: false
+			},
+			isSpeed: { // 是否打开倍速功能
+				type: Boolean,
+				default: false
+			},
+			url: { // 视频路径
+				type: String,
+				default: ''
+			},
+		},
+		data() {
+			return {
+				wxsetPicture: [
+					'push',
+					'pop'
+				],
+				// 是否显示视频控件
+				isShowControl: false,
+				// 倍速播放
+				playbackRateItem: '1.0',
+				// 倍速设置选项列表
+				playbackRateList: ['0.5', '0.8', '1.0', '1.25', '1.5', '2.0'],
+				showSpeedModal: false,
+				videoCtx: null,
+				fullScreen: false
+			}
+		},
+		methods: {
+			// 唤起倍速操作
+			showSpeedOptions() {
+				this.showSpeedModal = true;
+			},
+			// 隐藏倍速操作
+			hideSpeedOptions() {
+				this.showSpeedModal = false;
+			},
+
+			// 倍速切换
+			changeSpeed(e) {
+				this.playbackRateItem = e.currentTarget.dataset.rate;
+				let rate = Number(this.playbackRateItem);
+				this.videoCtx = uni.createVideoContext('playVideo', this);
+				this.videoCtx.playbackRate(rate);
+				this.hideSpeedOptions();
+			},
+
+			// 是否显示控件
+			controlstoggle(e) {
+				if (!e.detail.show) {
+					this.isShowControl = false;
+					return;
+				}
+				this.isShowControl = true;
+			},
+
+			// 全屏操作
+			fullscreenchange(e) {
+				let that = this;
+				that.fullScreen = e.detail.fullScreen;
+				if (that.fullScreen) {
+					wx.setPageOrientation({
+						orientation: 'landscape'
+					});
+				} else {
+					wx.setPageOrientation({
+						orientation: 'portrait'
+					});
+				}
+				uni.showToast({
+					title: that.fullScreen ? '开启全屏' : '关闭全屏',
+					icon: 'none',
+					duration: 1500
+				});
+			},
+		}
+	}
+</script>
+
+
+<style>
+	page {
+		width: 100%;
+		height: auto;
+	}
+
+	.content {
+		position: relative;
+		width: 750rpx;
+		height: auto;
+		min-height: 100vh;
+		margin: 0;
+		padding: 0;
+		background-color: #fff;
+
+	}
+
+	.top-video {
+		width: 100%;
+		height: 422rpx;
+	}
+
+	.video-heizith-menu {
+		position: absolute;
+		right: 30rpx;
+		bottom: 20%;
+		z-index: 998;
+		font-size: 20rpx;
+		width: 52rpx;
+		height: 40rpx;
+		text-align: center;
+		line-height: 38rpx;
+		border: 1rpx solid #c9cccc;
+		border-radius: 8rpx;
+		color: #c9cccc;
+	}
+
+	.modal {
+		position: fixed;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 9999;
+	}
+
+	.modal-content {
+		position: absolute;
+		left: 46rpx;
+		bottom: 20%;
+		z-index: 9999;
+
+	}
+
+	.modal-content-txt {
+		text-align: left;
+		padding-bottom: 20rpx;
+		color: #fff;
+		font-size: 18rpx;
+		z-index: 9999;
+	}
+
+	.speed-option {
+		float: left;
+		width: 72rpx;
+		height: 72rpx;
+		text-align: center;
+		line-height: 68rpx;
+		font-size: 22rpx;
+		color: #fff;
+		background-color: rgba(0, 0, 0, 0.3);
+		border-radius: 4rpx;
+		margin-right: 10rpx;
+		z-index: 9999;
+
+
+	}
+
+	.speed-option.active {
+		/* border-bottom: 2rpx solid #fd750b; */
+		color: #fd750b;
+	}
+</style>
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index 91f1742..e199b2a 100644
--- a/manifest.json
+++ b/manifest.json
@@ -15,7 +15,9 @@
             "autoclose" : true,
             "delay" : 0
         },
-        "modules" : {},
+        "modules" : {
+            "VideoPlayer" : {}
+        },
         "distribute" : {
             "android" : {
                 "permissions" : [
diff --git a/pages.json b/pages.json
index 5683f97..d366b6d 100644
--- a/pages.json
+++ b/pages.json
@@ -139,6 +139,15 @@
 				}
 			}
 		},
+		{ // 新鲜事
+			"path": "pages/news/course",
+			"style": {
+				"navigationBarTitleText": "课程",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		},
 		{ // 新鲜事/话题/分类
 			"path": "pages/news/news-topic-cate",
 			"style": {
diff --git a/pages/home/cpns/info-list.vue b/pages/home/cpns/info-list.vue
index 99803cd..bc94b1a 100644
--- a/pages/home/cpns/info-list.vue
+++ b/pages/home/cpns/info-list.vue
@@ -152,6 +152,8 @@
 			},
 			// 进入详情页
 			goDetail() {
+				this.$u.route('pages/news/course')
+				return
 				if (this.isDetail) return // 详情页，不跳转
 				this.$u.route('pages/home/detail', {
 					data: JSON.stringify({
diff --git a/pages/news/course.vue b/pages/news/course.vue
new file mode 100644
index 0000000..d481474
--- /dev/null
+++ b/pages/news/course.vue
@@ -0,0 +1,178 @@
+<template>
+    <view class="content" >
+        <zxVideo :url="urls" :isSpeed="isSpeed" :showCasting="showCasting" :lockButton="lockButton"></zxVideo>
+    </view>
+</template>
+
+<script>
+    import zxVideo from '@/components/zx-video/zx-video.vue';
+    export default {
+        components: {
+            zxVideo
+        },
+        data() {
+            return {
+                urls:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
+                //是否打开倍速功能
+                isSpeed:true,
+                 //是否显示投屏按钮
+                showCasting:true,
+                //是否显示锁屏按钮
+                lockButton:true
+            }
+        },
+        onLoad(option) {
+           
+        },
+        onShow() {
+        },
+        methods: {
+            
+        }
+    }
+</script>
+
+<style>
+    page {
+        width: 100%;
+        height: auto;
+    }
+    .content {
+        position: relative;
+        width: 750rpx;
+        height: auto;
+        min-height: 100vh;
+        margin: 0;
+        padding: 0;
+        background-color: #fff;
+        
+    }
+    .top-video {
+        width: 100%;
+        height: 422rpx;
+    }
+    .mvdetail {
+        width: 100%;
+        padding: 50rpx 40rpx 30rpx;
+        box-sizing: border-box;
+        
+    }
+    .mvdetail-name {
+        float: left;
+        width: 100%;
+            font-size: 32rpx;
+            font-weight: 700;
+            text-align: left;
+            color: #333;
+            text-overflow: ellipsis;
+    }
+    .mvdetail-tag {
+        float: left;
+        width: 100%;
+            font-size: 24rpx;
+            font-weight: 400;
+            text-align: left;
+            color: #6cb5ff;
+            margin-top: 10rpx;
+    }
+    .mvdetail-tag-item {
+        margin-right: 20rpx;
+    }
+    .mvdetail-desc {
+        float: left;
+        width: 100%;
+        font-size: 24rpx;
+            font-weight: 400;
+            text-align: left;
+            color: #666;
+            margin-top: 30rpx;
+                padding-bottom: 24rpx;
+    }
+    .mvdetail-btn {
+        float: left;
+        width: 100%;
+    }
+    .share-item {
+        width: 134rpx;
+        height: 46rpx;
+        border: 2rpx solid #d2d2d2;
+        border-radius: 24rpx;
+        padding: 0 18rpx;
+        box-sizing: border-box;
+    }
+    .share-item-img {
+        float: left;
+        width: 26rpx;
+        margin-top: 8rpx;
+    }
+    .share-item-title {
+        float: left;
+        font-size: 24rpx;
+            font-weight: 400;
+            color: #666;
+            line-height: 1;
+            margin: 10rpx 0 0 16rpx;
+    }
+    
+    .video-heizith-menu {
+        position: absolute;
+        right: 30rpx;
+        bottom: 20%;
+        z-index: 998;
+        font-size: 20rpx;
+        width: 52rpx;
+        height: 40rpx;
+        text-align: center;
+        line-height: 38rpx;
+        border: 1rpx solid #fff;
+        border-radius: 8rpx;
+        color: #fff;
+    }
+    
+    .modal {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 9999;
+    }
+    .modal-content {
+        position: absolute;
+        left: 46rpx;
+        bottom: 20%;
+        z-index: 9999;
+        
+    }
+    .modal-content-txt {
+        text-align: left;
+        padding-bottom: 20rpx;
+        color: #fff;
+        font-size: 18rpx;
+        z-index: 9999;
+    }
+        
+    .speed-option {
+        float: left;
+        width: 72rpx;
+        height: 72rpx;
+        text-align: center;
+        line-height: 68rpx;
+        font-size: 22rpx;
+        color: #fff;
+        background-color: rgba(0, 0, 0, 0.3);
+        border-radius: 4rpx;
+        margin-right: 10rpx;
+        z-index: 9999;
+        
+        
+    }
+    .speed-option.active {
+        /* border-bottom: 2rpx solid #fd750b; */
+        color: #fd750b;
+    }
+    
+</style>