feat: 前端获取视频文件的宽高，虽然获取到了，但感觉还是有很大的卡顿感

src/pages/shouye/shouye.vue

 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { reactive, ref,getCurrentInstance } from 'vue'
 import { onPullDownRefresh } from '@dcloudio/uni-app'
 import dayjs from 'dayjs'
 import { closeSplashscreenAndChechUpgrade } from '@/utils/upgrade'
@@ -288,6 +288,9 @@ const pageData = reactive({
     agricultureClass: {
         videoList: [],
     },
+	
+	videoListIsShow:false,
+	videwHtmlList:""
 })
 
 function getServiceItems() {
@@ -325,8 +328,13 @@ function getServiceStatsList() {
 }
 function getAgricultureClassList() {
     getVideoList({ pageNo: 1, pageSize: 10, status: 1 }).then((res) => {
-        const { records } = res
-        pageData.agricultureClass.videoList = records
+        const { records } = res;
+		let videwHtmlList = '';
+		for(let i = 0; i < records.length;i++){
+			videwHtmlList += '<video class="htmlvideo" data-index="'+i+'" src="'+records[i].url+'"></video>'
+		}
+		pageData.videwHtmlList = videwHtmlList;
+		pageData.agricultureClass.videoList = records;
     })
 }
 
@@ -464,6 +472,82 @@ onHide(() => {
         }
     })
 })
+
+
+// 引入实例
+const instance = getCurrentInstance();
+const getDomDataSetFunc = (domName='',datasetName='index') =>{
+	return new Promise((resolve,reject)=>{
+		const queryDataget = uni.createSelectorQuery().in(instance.proxy);
+		// 获取内容
+		queryDataget.select(domName).fields({dataset:true},(data)=>{
+			if(data && data.dataset){
+				resolve(data.dataset[datasetName])
+			}else{
+				reject()
+			}
+		}).exec();
+	})
+}
+function domClick(){
+	getDomDataSetFunc('.domClick','index').then((res)=>{
+		// console.log(res)
+		let whArr = JSON.parse(res);
+		let videoList = pageData.agricultureClass.videoList;
+		let videoLen = videoList.length,scale = 0;
+		for(let i = 0; i < videoLen;i++){
+			/* videoList[i].videoWidth = whArr[i].w; */
+			scale = (340 / whArr[i].w).toFixed(1);
+			videoList[i].videoWidth = 340;
+			videoList[i].videoHeight = Math.floor(whArr[i].h * scale);
+			if(videoLen >= i){
+				pageData.videoListIsShow = true;
+			}
+		}
+		
+	})
+}
+</script>
+
+<script module="renderscript" lang="renderjs">
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    methodInRenderjs(newValue, oldValue, ownerVm, vm) {
+	  if(newValue && newValue.length){
+		  let valLen = newValue.length;
+		  let videoWH = [],videoIndex = 0;
+		  for(let i = 0; i < newValue.length; i++){
+			  videoWH.push(0)
+		  }
+		  setTimeout(()=>{
+			  let domClick = document.querySelector(".domClick");
+			  const videos = document.querySelectorAll('.htmlvideo');
+			  videos.forEach(video => {
+			      video.addEventListener('loadedmetadata', function() {
+					  var dataIndex = video.getAttribute('data-index');
+					  videoWH[dataIndex] = {w:video.videoWidth,h:video.videoHeight};
+					  videoIndex++;
+					  if(videoIndex >= valLen){
+						  domClick.dataset.index = JSON.stringify(videoWH);
+						  domClick.click();
+					  }
+					  // console.log('Video width:',dataIndex, videoWidth, 'Video height:', videoHeight);
+			      });
+			  });
+		  },600)
+	  }
+    },
+    // renderjs 向普通 Vue 传值的方法
+    sendDataToVue(event, ownerInstance) {
+      ownerInstance.callMethod('someMethodInVue', { // 调用 Vue 组件中的方法
+        someData: '这是从 renderjs 传来的数据'
+      });
+    }
+  }
+};
 </script>
 
 <template>
@@ -666,7 +750,38 @@ onHide(() => {
                     <text class="font_6 text_32">农技课堂</text>
                     <text class="font_7 text_33" @click="onViewMoreClass">查看全部</text>
                 </view>
-                <view class="codefun-flex-col section_13 !relative  rounded-lg" style="margin-left: -28rpx;">
+				
+				<view v-if="pageData.videoListIsShow" class="codefun-flex-col section_13 !relative  rounded-lg" style="margin-left: -28rpx;">
+				    <fui-waterfall topGap="20" leftGap="20" rightGap="20" bottomGap="20">
+				        <fui-waterfall-item :imgWidth="video.videoWidth" :imgHeight="video.videoHeight" v-for="(video, index) in pageData.agricultureClass.videoList" :key="index"
+				            :src="video.thumbnailPath" @click="playVideo(index)">
+				            <view class="flex flex-col justify-between pl-2 pr-2 pb-2">
+				                <view class="fontsize_28 mt-1 mb-2 font-13">{{ video.title }}</view>
+				                <view class="flex justify-between text-25 color-#686868">
+				                    <view class="mr-1 flex-center">
+				                        <view class="flex-center text-24 lh-24rpx">{{ video.viewCount || 0 }}次播放</view>
+				                    </view>
+				                    <text>{{ dayjs(video.publishDate).format('MM-DD') }}</text>
+				                </view>
+				            </view>
+				            <video :id="`video${index}`" :src="video.url" :poster="video.thumbnailPath"
+				                :title="video.title" :controls="true" :autoplay="false" :muted="false" :loop="true"
+				                :show-play-btn="true" :show-center-play-btn="true" :enable-progress-gesture="true"
+				                :show-progress="true" :direction="0" object-fit="contain"
+				                @loadedmetadata="handleMetadataLoaded" @play="handleVideoPlay(index)"
+				                @pause="handleVideoPause(index)"
+				                @fullscreenchange="handleFullscreenChange($event, index)" class="!hidden"></video>
+				        </fui-waterfall-item>
+				    </fui-waterfall>
+				</view>
+				
+				<view v-show="false" style="width:0px;height:0px;" class="domClick" @click="domClick" :vsrc="pageData.agricultureClass.videoList":change:vsrc="renderscript.methodInRenderjs">
+					<!-- <video class="htmlvideo" :src="video.url" v-for="(video, index) in pageData.agricultureClass.videoList" :key="index"></video> -->
+					<view v-html="pageData.videwHtmlList"></view>
+				</view>
+				
+				
+                <!-- <view class="codefun-flex-col section_13 !relative  rounded-lg" style="margin-left: -28rpx;">
                     <fui-waterfall topGap="20" leftGap="20" rightGap="20" bottomGap="20">
                         <fui-waterfall-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index"
                             :src="video.thumbnailPath" @click="playVideo(index)">
@@ -674,7 +789,6 @@ onHide(() => {
                                 <view class="fontsize_28 mt-1 mb-2 font-13">{{ video.title }}</view>
                                 <view class="flex justify-between text-25 color-#686868">
                                     <view class="mr-1 flex-center">
-                                        <!-- <image class="mt-0.2 mr-1 w-30 h-26" src="/static/images/news/views.png" /> -->
                                         <view class="flex-center text-24 lh-24rpx">{{ video.viewCount || 0 }}次播放</view>
                                     </view>
                                     <text>{{ dayjs(video.publishDate).format('MM-DD') }}</text>
@@ -689,7 +803,10 @@ onHide(() => {
                                 @fullscreenchange="handleFullscreenChange($event, index)" class="!hidden"></video>
                         </fui-waterfall-item>
                     </fui-waterfall>
-                </view>
+                </view> -->
+				
+				
+				
             </view>
         </view>
 

types/components.d.ts

@@ -150,8 +150,6 @@ declare module 'vue' {
     IframeVideo: typeof import('./../src/components/IframeVideo/index.vue')['default']
     Legend: typeof import('./../src/components/Map/Widgets/Legend/src/Legend.vue')['default']
     Mapbox: typeof import('./../src/components/Map/Mapbox/index.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
     Src: typeof import('./../src/components/Echarts/src/index.vue')['default']
     SuccessfulDialog: typeof import('./../src/components/ConfirmDialog/successfulDialog.vue')['default']
     Switch: typeof import('./../src/components/Map/Widgets/Switch/src/Switch.vue')['default']