<template>

  <div class="monitor-container">

    <!-- 视频播放区域 -->

    <div class="video-container">

      <div class="video-grid">

        <div v-for="(item, index) in videoList" :key="index" class="video-item">

          <div class="video-content">

            <video

              :id="'video' + index"

              class="h5-video"

              controls

              autoplay

              playsinline

              webkit-playsinline

              object-fit="cover"

              x5-video-player-type="h5"

              x5-video-player-fullscreen="true"

              x5-video-orientation="portraint"

              preload="auto"

              width="100%"

              height="50%"

              data-setup="{}"

            >

              <!-- <source :src="item.url" type="application/x-mpegURL" /> -->

              <!-- 提供多种格式支持 -->

              <source :src="item.url" type="video/mp4" />

              <!-- <source :src="item.url" type="video/webm" /> -->

              您的浏览器不支持 HTML5 视频播放

            </video>

          </div>

        </div>

      </div>

    </div>

  </div>

</template>

<script setup lang="ts">

import { ref, onMounted } from 'vue'

// 测试数据

const videoList = ref([

  {

    url: 'https://mlr.tgsc81.com:8443/rtp/34020000001320000002_34020000001320000002.live.mp4'

  }

  // 可以添加更多视频源

])

onMounted(() => {

  // 处理视频错误

  videoList.value.forEach((_, index) => {

    const video = document.getElementById(`video${index}`) as HTMLVideoElement

    if (video) {

      video.addEventListener('error', (e) => {

        console.error('视频加载失败:', e)

      })

    }

  })

})

</script>

在浏览器中可以正常访问，使用微信开发工具就死活出不来，请问是什么原因呀