From e59580e0f83f281b1e0d8d04ccf50ae52e372c27 Mon Sep 17 00:00:00 2001
From: wanganxp <wanganxp@gmail.com>
Date: Sat, 13 Jul 2024 21:15:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0video=E5=92=8Cwebview?=
 =?UTF-8?q?=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-format.uvue | 139 ++++++++++++------------
 pages/component/video/video.uvue        |   3 +-
 pages/component/web-view/web-view.uvue  |   7 +-
 3 files changed, 77 insertions(+), 72 deletions(-)

diff --git a/pages/component/video/video-format.uvue b/pages/component/video/video-format.uvue
index e1986fef..a300328e 100644
--- a/pages/component/video/video-format.uvue
+++ b/pages/component/video/video-format.uvue
@@ -2,7 +2,7 @@
   <!-- #ifdef APP -->
   <scroll-view class="page-scroll-view">
   <!-- #endif -->
-    <page-head :title="title"></page-head>
+    <page-head title="video-format"></page-head>
     <view class="uni-padding-wrap uni-common-mt">
       <view class="uni-title">
         <text class="uni-title-text">支持的视频格式示例</text>
@@ -17,7 +17,7 @@
       </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>
+        <video :id="'video-' + item.format" :ref="'videoRef-' + item.format" class="video" :src="item.src" :controls="true" :direction="-90"></video>
       </view>
     </view>
   <!-- #ifdef APP -->
@@ -25,82 +25,81 @@
   <!-- #endif -->
 </template>
 
-<script>
+<script setup>
   type VideoFormat = {
     format : string
     src : string
   }
+  let supportFormats = ref([
+    // TODO web本地运行时本地服务返回的content-type不对，导致本地视频无法播放。此外web端原生video不支持flv、m3u8、avi格式，但是和app端相比多了ogg格式的支持
+    {
+      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（iOS和Safari不支持）',
+      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'
+    },
+    // #ifndef WEB
+    {
+      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'
+    },
+    // #endif
+    {
+      format: '错误路径',
+      src: 'https://www.dcloud.net.cn/errorpath.mp4'
+    },
+  ] as Array<VideoFormat>)
 
-  export default {
-    data() {
-      return {
-        title: 'video-format',
-        supportFormats: [
-          // TODO web本地运行时本地服务返回的content-type不对，导致本地视频无法播放。此外web端原生video不支持flv、m3u8、avi格式，但是和app端相比多了ogg格式的支持
-          {
-            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（iOS和Safari不支持）',
-            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'
-          },
-          // #ifndef WEB
-          {
-            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'
-          },
-          // #endif
-          {
-            format: '错误路径',
-            src: 'https://www.dcloud.net.cn/errorpath.mp4'
-          },
-        ] as Array<VideoFormat>,
-        notSupportFormats: [
-          // #ifndef WEB
-          {
-            format: 'ogg',
-            src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.ogg'
-          },
-          // #endif
-          {
-            format: 'avi',
-            src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.avi'
-          }
-        ] as Array<VideoFormat>,
-        // 自动化测试
-        isError: false
-      }
+  let notSupportFormats =ref([
+    // #ifndef WEB
+    {
+      format: 'ogg',
+      src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.ogg'
     },
-    methods: {
-      onError: function (format : string, e : UniVideoErrorEvent) {
-        console.log(format + ":" + JSON.stringify(e));
-        if (format != "错误路径") {
-          this.isError = true;
-        }
-      }
+    // #endif
+    {
+      format: 'avi',
+      src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.avi'
+    }
+  ] as Array<VideoFormat>)
+
+  let isError = false         // 自动化测试
+
+  const onError = (format : string, e : UniVideoErrorEvent) => {
+    console.log(format + ":" + JSON.stringify(e));
+    if (format != "错误路径") {
+      isError = true;
     }
   }
+
+  onReady(() => {
+    // const v = uni.createVideoContext("video-mp4",getCurrentInstance()!.proxy!)
+    // v?.play()
+  })
+
+  defineExpose({isError})
 </script>
 
 <style>
diff --git a/pages/component/video/video.uvue b/pages/component/video/video.uvue
index 35b41852..9fae1b36 100644
--- a/pages/component/video/video.uvue
+++ b/pages/component/video/video.uvue
@@ -90,7 +90,8 @@
   import { ItemType } from '@/components/enum-data/enum-data';
   export default {
     onReady() {
-      this.videoContext = uni.createVideoContext('video', this);
+      this.videoContext = uni.createVideoContext('video');
+      // this.videoContext = uni.createVideoContext('video', this);
     },
     data() {
       return {
diff --git a/pages/component/web-view/web-view.uvue b/pages/component/web-view/web-view.uvue
index d46914bd..ce1b5eec 100644
--- a/pages/component/web-view/web-view.uvue
+++ b/pages/component/web-view/web-view.uvue
@@ -49,6 +49,7 @@
           }
         },
         webviewContext: null as WebviewContext | null,
+        webviewElement: null as UniWebViewElement | null,
         loadError: false,
         horizontalScrollBarAccess: true,
         verticalScrollBarAccess: true,
@@ -65,7 +66,10 @@
     onReady() {
       // #ifdef APP
       // TODO web 实现createWebviewContext
-      this.webviewContext = uni.createWebviewContext('web-view', this)
+      this.webviewContext = uni.createWebviewContext('web-view',this)
+      this.webviewElement = uni.getElementById('web-view') as UniWebViewElement //推荐使用element，功能更丰富
+      // console.log('url: ',this.webviewElement?.getAttribute("src"));
+      // this.webviewElement?.setAttribute("src","https://ext.dcloud.net.cn/")
       // #endif
     },
     methods: {
@@ -77,6 +81,7 @@
       },
       reload() {
         this.webviewContext?.reload();
+        // this.webviewElement?.reload();
       },
       stop() {
         this.webviewContext?.stop();
-- 
GitLab