From a4d9ff8f2e8ae4c984e4c25ba019c4290f67224d Mon Sep 17 00:00:00 2001
From: yinjiacheng <yinjiacheng@dcloud.io>
Date: Tue, 12 Dec 2023 20:06:25 +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.json                           |   6 -
 pages/component/video/video-all.uvue | 408 ---------------------------
 pages/component/video/video.test.js  |   2 +-
 pages/component/video/video.uvue     | 405 +++++++++++++++++++++++++-
 4 files changed, 393 insertions(+), 428 deletions(-)
 delete mode 100644 pages/component/video/video-all.uvue

diff --git a/pages.json b/pages.json
index 7abc9cc..b0c88da 100644
--- a/pages.json
+++ b/pages.json
@@ -158,12 +158,6 @@
         "navigationBarTitleText": "video"
       }
     },
-    {
-      "path": "pages/component/video/video-all",
-      "style": {
-        "navigationBarTitleText": "video-all"
-      }
-    },
     {
       "path": "pages/component/video/video-format",
       "style": {
diff --git a/pages/component/video/video-all.uvue b/pages/component/video/video-all.uvue
deleted file mode 100644
index 70a538f..0000000
--- a/pages/component/video/video-all.uvue
+++ /dev/null
@@ -1,408 +0,0 @@
-<template>
-  <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(requestFullScreenOptions)">进入全屏</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="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">属性示例</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">
-  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: -90,
-        _direction: 0,
-        requestFullScreenOptions: {
-          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,
-        // 自动化测试
-        isPlaying: false,
-        isPause: false,
-        isFullScreen: false
-      }
-    },
-    methods: {
-      // API
-      play: function () {
-        console.log("play");
-        this.videoContext?.play();
-      },
-      pause: function () {
-        console.log("pause");
-        (uni.getElementById("video") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃
-        // this.videoContext?.pause();
-      },
-      seek: function (pos : number) {
-        console.log("seek -> " + pos);
-        this.videoContext?.seek(pos);
-      },
-      requestFullScreen: function (options : RequestFullScreenOptions | null) {
-        console.log("requestFullScreen -> " + options);
-        this.videoContext?.requestFullScreen(options);
-      },
-      exitFullScreen: function () {
-        console.log("exitFullScreen");
-        this.videoContext?.exitFullScreen();
-      },
-      stop: function () {
-        console.log("stop");
-        uni.getElementById<UniVideoElement>("video")?.stop(); //泛型写法测试
-        // this.videoContext?.stop();
-      },
-      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 (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 : Event) {
-        console.log(res.type);
-        this.isPlaying = true;
-        this.isPause = false;
-      },
-      onPause: function (res : Event) {
-        console.log(res.type);
-        this.isPlaying = false;
-        this.isPause = true;
-      },
-      onEnded: function (res : Event) {
-        console.log(res.type);
-      },
-      onTimeUpdate: function (res : VideoTimeUpdateEvent) {
-        console.log(res.type + " -> " + JSON.stringify(res.detail));
-      },
-      onFullScreenChange: function (res : VideoFullScreenChangeEvent) {
-        console.log(res.type + " -> " + JSON.stringify(res.detail));
-        this.isFullScreen = !this.isFullScreen;
-      },
-      onWaiting: function (res : Event) {
-        console.log(res.type);
-      },
-      onError: function (res : VideoErrorEvent) {
-        console.log(res.type + " -> " + JSON.stringify(res.detail));
-      },
-      onProgress: function (res : VideoProgressEvent) {
-        console.log(res.type + " -> " + JSON.stringify(res.detail));
-      },
-      onFullScreenClick: function (res : VideoFullScreenClickEvent) {
-        console.log(res.type + " -> " + JSON.stringify(res.detail));
-      },
-      onControlsToggle: function (res : VideoControlsToggleEvent) {
-        console.log(res.type + " -> " + JSON.stringify(res.detail));
-      }
-    }
-  }
-</script>
-
-<style>
-  .video {
-    width: 750rpx;
-    height: 400rpx;
-  }
-</style>
diff --git a/pages/component/video/video.test.js b/pages/component/video/video.test.js
index b466715..f0934e2 100644
--- a/pages/component/video/video.test.js
+++ b/pages/component/video/video.test.js
@@ -4,7 +4,7 @@ describe('component-native-video', () => {
   let page;
 
   beforeAll(async () => {
-    page = await program.reLaunch('/pages/component/video/video-all');
+    page = await program.reLaunch('/pages/component/video/video');
     await page.waitFor('video');
   });
 
diff --git a/pages/component/video/video.uvue b/pages/component/video/video.uvue
index 46f4ce7..1242d58 100644
--- a/pages/component/video/video.uvue
+++ b/pages/component/video/video.uvue
@@ -1,34 +1,413 @@
 <template>
-  <view>
-    <page-head :title="title"></page-head>
-    <view class="uni-padding-wrap uni-common-mt">
+  <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-btn-v">
-        <navigator url="/pages/component/video/video-all">
-          <button type="primary">视频组件全示例</button>
+        <navigator url="/pages/component/video/video-format">
+          <button type="primary">视频格式示例</button>
         </navigator>
       </view>
+      <view class="uni-title">
+        <text class="uni-title-text">API示例</text>
+      </View>
       <view class="uni-btn-v">
-        <navigator url="/pages/component/video/video-format">
-          <button type="primary">视频组件格式示例</button>
-        </navigator>
+        <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(requestFullScreenOptions)">进入全屏</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="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">属性示例</text>
+      </view>
+      <view class="uni-btn-v">
+        <button type="primary" @click="setSrc(_src)">设置播放资源</button>
       </view>
-    </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>
+<script lang="uts">
   export default {
+    onReady() {
+      this.videoContext = uni.createVideoContext('video', this);
+    },
     data() {
       return {
-        title: 'video'
+        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: -90,
+        _direction: 0,
+        requestFullScreenOptions: {
+          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,
+        // 自动化测试
+        isPlaying: false,
+        isPause: false,
+        isFullScreen: false
       }
     },
     methods: {
-
+      // API
+      play: function () {
+        console.log("play");
+        this.videoContext?.play();
+      },
+      pause: function () {
+        console.log("pause");
+        (uni.getElementById("video") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃
+        // this.videoContext?.pause();
+      },
+      seek: function (pos : number) {
+        console.log("seek -> " + pos);
+        this.videoContext?.seek(pos);
+      },
+      requestFullScreen: function (options : RequestFullScreenOptions | null) {
+        console.log("requestFullScreen -> " + options);
+        this.videoContext?.requestFullScreen(options);
+      },
+      exitFullScreen: function () {
+        console.log("exitFullScreen");
+        this.videoContext?.exitFullScreen();
+      },
+      stop: function () {
+        console.log("stop");
+        uni.getElementById<UniVideoElement>("video")?.stop(); //泛型写法测试
+        // this.videoContext?.stop();
+      },
+      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 (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 : Event) {
+        console.log(res.type);
+        this.isPlaying = true;
+        this.isPause = false;
+      },
+      onPause: function (res : Event) {
+        console.log(res.type);
+        this.isPlaying = false;
+        this.isPause = true;
+      },
+      onEnded: function (res : Event) {
+        console.log(res.type);
+      },
+      onTimeUpdate: function (res : VideoTimeUpdateEvent) {
+        console.log(res.type + " -> " + JSON.stringify(res.detail));
+      },
+      onFullScreenChange: function (res : VideoFullScreenChangeEvent) {
+        console.log(res.type + " -> " + JSON.stringify(res.detail));
+        this.isFullScreen = !this.isFullScreen;
+      },
+      onWaiting: function (res : Event) {
+        console.log(res.type);
+      },
+      onError: function (res : VideoErrorEvent) {
+        console.log(res.type + " -> " + JSON.stringify(res.detail));
+      },
+      onProgress: function (res : VideoProgressEvent) {
+        console.log(res.type + " -> " + JSON.stringify(res.detail));
+      },
+      onFullScreenClick: function (res : VideoFullScreenClickEvent) {
+        console.log(res.type + " -> " + JSON.stringify(res.detail));
+      },
+      onControlsToggle: function (res : VideoControlsToggleEvent) {
+        console.log(res.type + " -> " + JSON.stringify(res.detail));
+      }
     }
   }
 </script>
 
 <style>
-
+  .video {
+    width: 750rpx;
+    height: 400rpx;
+  }
 </style>
-- 
GitLab