From 4d6d19f9c617ab6ad625fb6ba771e341b28f2997 Mon Sep 17 00:00:00 2001
From: yinjiacheng <yinjiacheng@dcloud.io>
Date: Wed, 6 Sep 2023 16:55:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0video=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/video/video.uvue | 818 ++++++++++++++++---------------
 1 file changed, 412 insertions(+), 406 deletions(-)

diff --git a/pages/component/video/video.uvue b/pages/component/video/video.uvue
index 4a279669..7eecaa47 100644
--- a/pages/component/video/video.uvue
+++ b/pages/component/video/video.uvue
@@ -1,414 +1,420 @@
 <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>
+  <view class="uni-flex-item">
+    <video class="video" ref="video" id="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 (_ : 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));
-			}
-		}
-	}
+  import { VideoNode } from "uts.sdk.modules.DCloudUniVideo";
+  export default {
+    onReady() {
+      this.videoContext = uni.createVideoContext('video', this);
+    },
+    data() {
+      return {
+        videoContext: null as VideoContext | null,
+        // 属性
+        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<Danmu>,
+        danmuBtn: false,
+        enableDanmu: true,
+        pageGesture: false,
+        direction: {
+          direction: 0
+        } as RequestFullScreenOptions,
+        _direction: {
+          direction: -90
+        } as RequestFullScreenOptions,
+        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 Danmu
+      }
+    },
+    methods: {
+      // API
+      play: function () {
+        console.log("play");
+        this.videoContext?.play();
+      },
+      pause: function () {
+        console.log("pause");
+        this.videoContext?.pause();
+      },
+      seek: function (pos : number) {
+        console.log("seek -> " + pos);
+        this.videoContext?.seek(pos);
+      },
+      requestFullScreen: function (options : RequestFullScreenOptions) {
+        console.log("requestFullScreen -> " + options);
+        this.videoContext?.requestFullScreen(options);
+      },
+      exitFullScreen: function () {
+        console.log("exitFullScreen");
+        this.videoContext?.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 (danmu : Danmu) {
+        console.log("sendDanmu -> " + danmu);
+        this.videoContext?.sendDanmu(danmu);
+      },
+      playbackRate: function (rate : number) {
+        console.log("playbackRate -> " + rate);
+        this.videoContext?.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 (options : RequestFullScreenOptions) {
+        this.direction = options;
+        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 (_ : 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;
-	}
+  .video {
+    width: 750rpx;
+    height: 400rpx;
+  }
 </style>
\ No newline at end of file
-- 
GitLab