更新video和webview示例

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>

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 {

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();