更新video示例和自动化测试用例

pages.json

@@ -158,6 +158,18 @@
         "navigationBarTitleText": "video"
       }
     },
+    {
+      "path": "pages/component/video/video-all",
+      "style": {
+        "navigationBarTitleText": "video-all"
+      }
+    },
+    {
+      "path": "pages/component/video/video-format",
+      "style": {
+        "navigationBarTitleText": "video-format"
+      }
+    },
     {
       "path": "pages/component/web-view/web-view",
       "style": {

pages/component/video/video-all.uvue

+<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>

pages/component/video/video-format.uvue

+<template>
+  <scroll-view>
+    <page-head :title="title"></page-head>
+    <view class="uni-padding-wrap uni-common-mt">
+      <view class="uni-title">
+        <text class="uni-title-text">支持的视频格式示例</text>
+      </view>
+      <view v-for="(item,index) in supportFormats" :key="index">
+        <text class="uni-subtitle-text">{{item.format}}</text>
+        <video :id="'video-' + item.format" class="video" :src="item.src" :controls="true" :direction="-90"
+          @error="onError"></video>
+      </view>
+      <view class="uni-title">
+        <text class="uni-title-text">暂不支持的格式</text>
+      </view>
+      <view v-for="(item,index) in notSupportFormats" :key="index">
+        <text class="uni-subtitle-text">{{item.format}}</text>
+        <video :id="'video-' + item.format" class="video" :src="item.src" :controls="true" :direction="-90"></video>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        title: 'video-format',
+        supportFormats: [
+          {
+            format: 'mp4',
+            src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4'
+          },
+          {
+            format: 'm4v',
+            src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.m4v'
+          },
+          {
+            format: 'mov',
+            src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mov'
+          },
+          {
+            format: 'webm',
+            src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.webm'
+          },
+          {
+            format: '3gp',
+            src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.3gp'
+          },
+          {
+            format: 'flv',
+            src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.flv'
+          },
+          {
+            format: 'm3u8',
+            src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.m3u8'
+          },
+          {
+            format: '本地m3u8',
+            src: '/static/test-video/2minute-demo.m3u8'
+          }
+        ] as Array<VideoFormat>,
+        notSupportFormats: [
+          {
+            format: 'ogg',
+            src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.ogg'
+          },
+          {
+            format: 'avi',
+            src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.avi'
+          }
+        ] as Array<VideoFormat>,
+        isError: false
+      }
+    },
+    methods: {
+      onError: function (_ : VideoErrorEvent) {
+        this.isError = true;
+      }
+    }
+  }
+
+  type VideoFormat = {
+    format : string
+    src : string
+  }
+</script>
+
+<style>
+  .video {
+    height: 400rpx;
+  }
+</style>

pages/component/video/video.js

-// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
-
-describe('component-native-video', () => {
-
-  let page;
-  beforeAll(async () => {
-    page = await program.reLaunch('/pages/component/video/video');
-    await page.waitFor(1000);
-  });
-
-  it('check API play', async () => {
-    await page.callMethod('playTest');
-    await page.waitFor(500);
-    expect(await page.data('isPlaying')).toBe(true);
-    expect(await page.data('isPause')).toBe(false);
-  });
-
-  it('check API requestFullScreen', async () => {
-    await page.callMethod('requestFullScreenTest');
-    await page.waitFor(1000);
-    expect(await page.data('isFullScreen')).toBe(true);
-  });
-
-  it('check API exitFullScreen', async () => {
-    await page.callMethod('exitFullScreenTest');
-    await page.waitFor(1000);
-    expect(await page.data('isFullScreen')).toBe(false);
-  });
-
-  it('check API pause', async () => {
-    await page.callMethod('pauseTest');
-    await page.waitFor(500);
-    expect(await page.data('isPause')).toBe(true);
-    expect(await page.data('isPlaying')).toBe(false);
-    await page.callMethod('playTest');
-    await page.waitFor(500);
-    expect(await page.data('isPlaying')).toBe(true);
-    expect(await page.data('isPause')).toBe(false);
-  });
-
-  it('check API stop', async () => {
-    await page.callMethod('stopTest');
-    await page.waitFor(500);
-    expect(await page.data('isPause')).toBe(true);
-    expect(await page.data('isPlaying')).toBe(false);
-  });
-});
\ No newline at end of file

pages/component/video/video.test.js

+// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
+jest.setTimeout(10000);
+describe('component-native-video', () => {
+  let page;
+
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/component/video/video-all');
+    await page.waitFor('video');
+  });
+
+  it('test API', async () => {
+    // play
+    await page.callMethod('play');
+    await page.waitFor(async () => {
+      return (await page.data('isPlaying')) == true;
+    });
+    // requestFullScreen
+    await page.callMethod('requestFullScreen', null);
+    await page.waitFor(async () => {
+      return (await page.data('isFullScreen')) == true;
+    });
+    // exitFullScreen
+    await page.callMethod('exitFullScreen');
+    await page.waitFor(async () => {
+      return (await page.data('isFullScreen')) == false;
+    });
+    // pause
+    await page.callMethod('pause');
+    await page.waitFor(async () => {
+      return (await page.data('isPause')) == true;
+    });
+    await page.callMethod('play');
+    await page.waitFor(async () => {
+      return (await page.data('isPlaying')) == true;
+    });
+    // stop
+    await page.callMethod('stop');
+    await page.waitFor(async () => {
+      return (await page.data('isPause')) == true;
+    });
+  });
+
+  it('test format', async () => {
+    page = await program.reLaunch('/pages/component/video/video-format');
+    await page.waitFor(1000);
+    expect(await page.data('isError')).toBe(false);
+  });
+});

pages/component/video/video.uvue

 <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>
+    <page-head :title="title"></page-head>
+    <view class="uni-padding-wrap uni-common-mt">
       <view class="uni-btn-v">
-        <button type="primary" @click="play">播放</button>
+        <navigator url="/pages/component/video/video-all">
+          <button type="primary">视频组件全示例</button>
+        </navigator>
       </view>
       <view class="uni-btn-v">
-        <button type="primary" @click="pause">暂停</button>
+        <navigator url="/pages/component/video/video-format">
+          <button type="primary">视频组件格式示例</button>
+        </navigator>
       </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">
+<script>
   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
+        title: 'video'
       }
     },
     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) {
-        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));
-      },
-      // 自动化测试
-      playTest: function () {
-        this.videoContext?.play();
-      },
-      pauseTest: function () {
-        this.videoContext?.pause();
-      },
-      requestFullScreenTest: function () {
-        const options : RequestFullScreenOptions = {
-          direction: -90
-        };
-        this.videoContext?.requestFullScreen(options);
-      },
-      exitFullScreenTest: function () {
-        this.videoContext?.exitFullScreen();
-      },
-      stopTest: function () {
-        this.videoContext?.stop();
-      }
+
     }
   }
 </script>
 
 <style>
-  .video {
-    width: 750rpx;
-    height: 400rpx;
-  }
+
 </style>

static/test-video/2minute-demo.m3u8

+#EXTM3U
+#EXT-X-VERSION:3
+#EXT-X-TARGETDURATION:10
+#EXT-X-MEDIA-SEQUENCE:0
+#EXTINF:10.000000,
+https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo0.ts
+#EXTINF:10.000000,
+https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo1.ts
+#EXTINF:10.000000,
+https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo2.ts
+#EXTINF:10.000000,
+https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo3.ts
+#EXTINF:10.000000,
+https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo4.ts
+#EXTINF:10.000000,
+https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo5.ts
+#EXTINF:10.000000,
+https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo6.ts
+#EXTINF:10.000000,
+https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo7.ts
+#EXTINF:10.000000,
+https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo8.ts
+#EXTINF:10.000000,
+https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo9.ts
+#EXTINF:10.000000,
+https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo10.ts
+#EXTINF:10.000000,
+https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo11.ts
+#EXTINF:1.773667,
+https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo12.ts
+#EXT-X-ENDLIST