From adeee95b9faa173b1cbac04a3d47e9f3e585e763 Mon Sep 17 00:00:00 2001
From: yinjiacheng <yinjiacheng@dcloud.io>
Date: Sat, 15 Jul 2023 15:34:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Evideo=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                       |   8 +-
 pages/component/video/video.uvue | 414 +++++++++++++++++++++++++++++++
 pages/tabBar/component.uvue      |   2 +-
 3 files changed, 422 insertions(+), 2 deletions(-)
 create mode 100644 pages/component/video/video.uvue

diff --git a/pages.json b/pages.json
index 699f9ccd..57f490a7 100644
--- a/pages.json
+++ b/pages.json
@@ -121,7 +121,13 @@
       "style": {
         "navigationBarTitleText": "大图测试"
       }
-    },
+    },
+	{
+	  "path": "pages/component/video/video",
+	  "style": {
+	    "navigationBarTitleText": "video"
+	  }
+	},
     {
       "path": "pages/component/web-view/web-view",
       "style": {
diff --git a/pages/component/video/video.uvue b/pages/component/video/video.uvue
new file mode 100644
index 00000000..f8a2d811
--- /dev/null
+++ b/pages/component/video/video.uvue
@@ -0,0 +1,414 @@
+<template>
+	<view class="uni-flex-item">
+		<video class="video" ref="video" :header="header" :src=src :autoplay="autoplay" :loop="loop" :muted="muted"
+			:initial-time="initialTime" :duration="duration" :controls="controls" :danmu-btn="danmuBtn"
+			:enable-danmu="enableDanmu" :page-gesture="pageGesture" :direction="direction" :show-progress="showProgress"
+			:show-fullscreen-btn="showFullscreenBtn" :show-play-btn="showPlayBtn"
+			:show-center-play-btn="showCenterPlayBtn" :show-loading="showLoading"
+			:enable-progress-gesture="enableProgressGesture" :object-fit="objectFit" :poster="poster"
+			:show-mute-btn="showMuteBtn" :title="title" :enable-play-gesture="enablePlayGesture"
+			:vslide-gesture="vslideGesture" :vslide-gesture-in-fullscreen="vslideGestureInFullscreen" :codec="codec"
+			:http-cache="httpCache" :play-strategy="playStrategy" :danmu-list="danmuList" @play="onPlay"
+			@pause="onPause" @ended="onEnded" @timeupdate="onTimeUpdate" @waiting="onWaiting" @error="onError"
+			@progress="onProgress" @fullscreenclick="onFullScreenClick" @controlstoggle="onControlsToggle"
+			@fullscreenchange="onFullScreenChange">
+		</video>
+		<scroll-view class="uni-padding-wrap uni-common-mt uni-flex-item">
+			<view class="uni-title">
+				<text class="uni-title-text">API示例</text>
+			</View>
+			<view class="uni-btn-v">
+				<button type="primary" @click="play">播放</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="pause">暂停</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="seek(pos)">跳转到指定位置</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="requestFullScreen(direction)">进入全屏</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="exitFullScreen">退出全屏</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="stop">停止</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="hide">隐藏</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="show">显示</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="close">关闭</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="sendDanmu(danmu)">发送弹幕</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="playbackRate(rate)">设置倍速</button>
+			</view>
+			<view class="uni-title">
+				<text class="uni-title-text uni-center">属性示例</text>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setSrc(_src)">设置播放资源</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setAutoplay()">设置是否自动播放（未播放时设置有效）</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setLoop()">设置是否循环播放（本次播放完成后生效）</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setMuted()">设置是否静音播放</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setInitialTime(_initialTime)">设置初始播放位置（本次播放完成后生效）</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setDuration(_duration)">设置视频时长（未播放时设置有效）</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setControls()">设置是否显示默认播放控件</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setDanmuBtn()">设置是否显示弹幕按钮</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setPageGesture()">非全屏模式下，设置是否开启亮度与音量调节手势</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setDirection(_direction)">设置全屏时视频的方向</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setShowProgress()">设置是否显示进度条</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setShowFullscreenBtn()">设置是否显示全屏按钮</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setShowPlayBtn()">设置是否显示视频底部控制栏的播放按钮</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setShowCenterPlayBtn()">设置是否显示视频中间的播放按钮</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setShowLoading()">设置是否显示loading控件</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setEnableProgressGesture()">设置是否开启控制进度的手势</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setObjectFit(_objectFit)">设置视频大小与video容器大小不一致时，视频的表现形式</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setPoster(_poster)">设置视频封面</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setShowMuteBtn()">设置是否显示静音按钮</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setTitle(_title)">设置视频标题</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setEnablePlayGesture()">设置是否开启播放手势</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setVslideGesture()">非全屏模式下，设置是否开启亮度与音量调节手势</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setVslideGestureInFullscreen()">全屏模式下，设置是否开启亮度与音量调节手势</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setCodec(_codec)">设置解码器（未播放时设置有效）</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setHttpCache()">设置是否对http、https视频源开启本地缓存（未播放时设置有效）</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setPlayStrategy(_playStrategy)">设置播放策略（未播放时设置有效）</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @click="setHeader(_header)">设置header</button>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script lang="uts">
+	import { VideoNode } from "uts.sdk.modules.DCloudUniVideo";
+	export default {
+		data() {
+			return {
+				// 属性
+				src: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v",
+				_src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4",
+				autoplay: false,
+				loop: false,
+				muted: false,
+				initialTime: 0,
+				_initialTime: 6,
+				duration: -1,
+				_duration: 60,
+				controls: true,
+				danmuList: [{
+					text: '要显示的文本',
+					color: '#FF0000',
+					time: 3
+				}, {
+					text: '要显示的文本2',
+					color: '#31ff23',
+					time: 5
+				}, {
+					text: '要显示的文本3',
+					color: '#f13ef8',
+					time: 7
+				}, {
+					text: '要显示的文本4',
+					color: '#4972f8',
+					time: 9
+				}, {
+					text: '要显示的文本5',
+					color: '#000000',
+					time: 11
+				}] as Array<UTSJSONObject>,
+				danmuBtn: false,
+				enableDanmu: true,
+				pageGesture: false,
+				direction: 0,
+				_direction: -90,
+				showProgress: true,
+				showFullscreenBtn: true,
+				showPlayBtn: true,
+				showCenterPlayBtn: true,
+				showLoading: true,
+				enableProgressGesture: true,
+				objectFit: "contain",
+				_objectFit: "fill",
+				poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png",
+				_poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-ios.png",
+				showMuteBtn: false,
+				title: "video-component",
+				_title: "video-component video-component",
+				enablePlayGesture: false,
+				vslideGesture: false,
+				vslideGestureInFullscreen: true,
+				codec: "hardware",
+				_codec: "software",
+				httpCache: true,
+				playStrategy: 0,
+				_playStrategy: 2,
+				header: {
+					'User-Agent': 'header test'
+				} as UTSJSONObject,
+				_header: {
+					'User-Agent': 'header test2'
+				} as UTSJSONObject,
+				// API
+				pos: 10,
+				rate: "1.5",
+				danmu: {
+					text: '要显示的文本',
+					color: '#FF0000'
+				} as UTSJSONObject
+			}
+		},
+		methods: {
+			// API
+			play: function () {
+				console.log("play");
+				(this.$refs["video"] as VideoNode).play();
+			},
+			pause: function () {
+				console.log("pause");
+				(this.$refs["video"] as VideoNode).pause();
+			},
+			seek: function (pos : number) {
+				console.log("seek -> " + pos);
+				(this.$refs["video"] as VideoNode).seek(pos);
+			},
+			requestFullScreen: function (direction : number) {
+				console.log("requestFullScreen -> " + direction);
+				(this.$refs["video"] as VideoNode).requestFullScreen(direction);
+			},
+			exitFullScreen: function () {
+				console.log("exitFullScreen");
+				(this.$refs["video"] as VideoNode).exitFullScreen();
+			},
+			stop: function () {
+				console.log("stop");
+				(this.$refs["video"] as VideoNode).stop();
+			},
+			hide: function () {
+				console.log("hide");
+				(this.$refs["video"] as VideoNode).hide();
+			},
+			show: function () {
+				console.log("show");
+				(this.$refs["video"] as VideoNode).show();
+			},
+			close: function () {
+				console.log("close");
+				(this.$refs["video"] as VideoNode).close();
+			},
+			sendDanmu: function (data : UTSJSONObject) {
+				console.log("sendDanmu -> " + data);
+				(this.$refs["video"] as VideoNode).sendDanmu(data);
+			},
+			playbackRate: function (rate : string) {
+				console.log("playbackRate -> " + rate);
+				(this.$refs["video"] as VideoNode).playbackRate(rate);
+			},
+			// 属性
+			setSrc: function (src : string) {
+				this.src = src;
+				console.log("src -> " + this.src)
+			},
+			setAutoplay: function () {
+				this.autoplay = !this.autoplay;
+				console.log("autoplay -> " + this.autoplay)
+			},
+			setLoop: function () {
+				this.loop = !this.loop;
+				console.log("loop -> " + this.loop)
+			},
+			setMuted: function () {
+				this.muted = !this.muted;
+				console.log("muted -> " + this.muted)
+			},
+			setInitialTime: function (initialTime : number) {
+				this.initialTime = initialTime;
+				console.log("initialTime -> " + this.initialTime)
+			},
+			setDuration: function (duration : number) {
+				this.duration = duration;
+				console.log("duration -> " + this.duration)
+			},
+			setControls: function () {
+				this.controls = !this.controls;
+				console.log("controls -> " + this.controls)
+			},
+			setDanmuBtn: function () {
+				this.danmuBtn = !this.danmuBtn;
+				console.log("danmuBtn -> " + this.danmuBtn)
+			},
+			setPageGesture: function () {
+				this.pageGesture = !this.pageGesture;
+				console.log("pageGesture -> " + this.pageGesture)
+			},
+			setDirection: function (direction : number) {
+				this.direction = direction;
+				console.log("direction -> " + this.direction)
+			},
+			setShowProgress: function () {
+				this.showProgress = !this.showProgress;
+				console.log("showProgress -> " + this.showProgress)
+			},
+			setShowFullscreenBtn: function () {
+				this.showFullscreenBtn = !this.showFullscreenBtn;
+				console.log("showFullscreenBtn -> " + this.showFullscreenBtn)
+			},
+			setShowPlayBtn: function () {
+				this.showPlayBtn = !this.showPlayBtn;
+				console.log("showPlayBtn -> " + this.showPlayBtn)
+			},
+			setShowCenterPlayBtn: function () {
+				this.showCenterPlayBtn = !this.showCenterPlayBtn;
+				console.log("showCenterPlayBtn -> " + this.showCenterPlayBtn)
+			},
+			setShowLoading: function () {
+				this.showLoading = !this.showLoading;
+				console.log("showLoading -> " + this.showLoading)
+			},
+			setEnableProgressGesture: function () {
+				this.enableProgressGesture = !this.enableProgressGesture;
+				console.log("enableProgressGesture -> " + this.enableProgressGesture)
+			},
+			setObjectFit: function (objectFit : string) {
+				this.objectFit = objectFit;
+				console.log("objectFit -> " + this.objectFit)
+			},
+			setPoster: function (poster : string) {
+				this.poster = poster;
+				console.log("poster -> " + this.poster)
+			},
+			setShowMuteBtn: function () {
+				this.showMuteBtn = !this.showMuteBtn;
+				console.log("showMuteBtn -> " + this.showMuteBtn)
+			},
+			setTitle: function (title : string) {
+				this.title = title;
+				console.log("title -> " + this.title)
+			},
+			setEnablePlayGesture: function () {
+				this.enablePlayGesture = !this.enablePlayGesture;
+				console.log("enablePlayGesture -> " + this.enablePlayGesture)
+			},
+			setVslideGesture: function () {
+				this.vslideGesture = !this.vslideGesture;
+				console.log("vslideGesture -> " + this.vslideGesture)
+			},
+			setVslideGestureInFullscreen: function () {
+				this.vslideGestureInFullscreen = !this.vslideGestureInFullscreen;
+				console.log("vslideGestureInFullscreen -> " + this.vslideGestureInFullscreen)
+			},
+			setCodec: function (codec : string) {
+				this.codec = codec;
+				console.log("codec -> " + this.codec)
+			},
+			setHttpCache: function () {
+				this.httpCache = !this.httpCache;
+				console.log("httpCache -> " + this.httpCache)
+			},
+			setPlayStrategy: function (playStrategy : number) {
+				this.playStrategy = playStrategy;
+				console.log("playStrategy -> " + this.playStrategy)
+			},
+			setHeader: function (header : UTSJSONObject) {
+				this.header = header;
+				console.log("header -> " + this.header)
+			},
+			// 事件
+			onPlay: function (res : any) {
+				console.log(JSON.stringify(res));
+			},
+			onPause: function (res : any) {
+				console.log(JSON.stringify(res));
+			},
+			onEnded: function (res : any) {
+				console.log(JSON.stringify(res));
+			},
+			onTimeUpdate: function (res : any) {
+				// console.log(JSON.stringify(res));
+			},
+			onFullScreenChange: function (res : any) {
+				console.log(JSON.stringify(res));
+			},
+			onWaiting: function (res : any) {
+				console.log(JSON.stringify(res));
+			},
+			onError: function (res : any) {
+				console.log(JSON.stringify(res));
+			},
+			onProgress: function (res : any) {
+				console.log(JSON.stringify(res));
+			},
+			onFullScreenClick: function (res : any) {
+				console.log(JSON.stringify(res));
+			},
+			onControlsToggle: function (res : any) {
+				console.log(JSON.stringify(res));
+			}
+		}
+	}
+</script>
+
+<style>
+	.video {
+		width: 750rpx;
+		height: 400rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/tabBar/component.uvue b/pages/tabBar/component.uvue
index 7004d693..653eb7f7 100644
--- a/pages/tabBar/component.uvue
+++ b/pages/tabBar/component.uvue
@@ -151,7 +151,7 @@
 						enable: true
 					}, {
 						name: 'video',
-						enable: false
+						enable: true
 					}, {
 						name: 'animation-view',
 						enable: false
-- 
GitLab