feat: 获取视频宽高兼容app与h5的处理

src/pages/shouye/shouye.vue

@@ -25,10 +25,13 @@ const lastLocationTime = ref(0)
 const LOCATION_CACHE_TIME = 5 * 60 * 1000 // 5分钟缓存时间
 
 onLoad(() => {
+	/*#ifdef APP-PLUS*/
+	  pageData.isApp = true;
+	/*#endif*/
     // 关闭启动页并检查更新
     closeSplashscreenAndChechUpgrade();
 	// 农技课堂
-	getAgricultureClassList()
+	getAgricultureClassList();
 })
 
 onShow(() => {
@@ -290,7 +293,10 @@ const pageData = reactive({
     },
 	
 	videoListIsShow:false,
-	videwHtmlList:""
+	videwHtmlList:"",
+	isApp:false,
+	videoDataLen:0,
+	videoLoadLen:0,
 })
 
 function getServiceItems() {
@@ -329,11 +335,14 @@ function getServiceStatsList() {
 function getAgricultureClassList() {
     getVideoList({ pageNo: 1, pageSize: 10, status: 1 }).then((res) => {
         const { records } = res;
+		pageData.videoDataLen = records.length;
+		if(pageData.isApp){
 			let videwHtmlList = '';
-		for(let i = 0; i < records.length;i++){
+			for(let i = 0; i < pageData.videoDataLen;i++){
 				videwHtmlList += '<video class="htmlvideo" data-index="'+i+'" src="'+records[i].url+'"></video>'
 			}
 			pageData.videwHtmlList = videwHtmlList;
+		}
 		pageData.agricultureClass.videoList = records;
     })
 }
@@ -419,8 +428,16 @@ function handleFullscreenChange(e: any, index) {
 }
 
 // 获取视频时长
-function handleMetadataLoaded(e: any) {
+function handleMetadataLoaded(e: any,video:any) {
     // 视频时长信息可在需要时使用
+	let scale:any = 0;
+	scale = (340 / e.detail.width).toFixed(1);
+	video.videoWidth = 340;
+	video.videoHeight = Math.floor(e.detail.height * scale);
+	pageData.videoLoadLen++;
+	if(pageData.videoLoadLen >= pageData.videoDataLen){
+		pageData.videoListIsShow = true;
+	}
 }
 // 解决轮播视频切换时，上一个视频不停止播放的问题
 function handleVideoPlay(currentIndex) {
@@ -491,7 +508,6 @@ const getDomDataSetFunc = (domName='',datasetName='index') =>{
 }
 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;
@@ -768,17 +784,20 @@ export default {
 				                :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)"
+				                @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">
+				<view v-if="pageData.isApp" style="width:0px;height:0px;display:none;" 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 v-else style="width:0px;height:0px;display:none;" v-for="(video, index) in pageData.agricultureClass.videoList" :key="index">
+					<video :src="video.url" @loadedmetadata="handleMetadataLoaded($event, video)"></video>
+				</view>
 				
 				
                 <!-- <view class="codefun-flex-col section_13 !relative  rounded-lg" style="margin-left: -28rpx;">

types/components.d.ts

@@ -150,6 +150,8 @@ 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']