更新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,17 +25,12 @@
   <!-- #endif -->
 </template>
 
-<script>
+<script setup>
   type VideoFormat = {
     format : string
     src : string
   }
-
-  export default {
-    data() {
-      return {
-        title: 'video-format',
-        supportFormats: [
+  let supportFormats = ref([
     // TODO web本地运行时本地服务返回的content-type不对，导致本地视频无法播放。此外web端原生video不支持flv、m3u8、avi格式，但是和app端相比多了ogg格式的支持
     {
       format: 'mp4',
@@ -75,8 +70,9 @@
       format: '错误路径',
       src: 'https://www.dcloud.net.cn/errorpath.mp4'
     },
-        ] as Array<VideoFormat>,
-        notSupportFormats: [
+  ] as Array<VideoFormat>)
+
+  let notSupportFormats =ref([
     // #ifndef WEB
     {
       format: 'ogg',
@@ -87,20 +83,23 @@
       format: 'avi',
       src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.avi'
     }
-        ] as Array<VideoFormat>,
-        // 自动化测试
-        isError: false
-      }
-    },
-    methods: {
-      onError: function (format : string, e : UniVideoErrorEvent) {
+  ] as Array<VideoFormat>)
+
+  let isError = false         // 自动化测试
+
+  const onError = (format : string, e : UniVideoErrorEvent) => {
     console.log(format + ":" + JSON.stringify(e));
     if (format != "错误路径") {
-          this.isError = true;
-        }
-      }
+      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();