HlsUrl移动端直播流ios不适配问题

楼主上一篇文章Vue3实现网页Hls Flv直播流播放在后续遇到了ios端不适配的问题，为此，楼主进行了大量的搜索以及Gpt工作。然而就在今天找到了别人遇到了同样的问题，链接如下
ios使用<video>播放hls流

问题所在，是因为hls.js使用了MSE，但是MSE不支持ios，所以hls.js无法在ios设备上成功使用(hls不是你苹果发明的吗)

解决办法，使用<video>标签直接载入视频/直播流URL进行播放即可，但是这种方法在PC上又无法播放了（PC可以使用前文组件）

下面是可以成功在ios上播放的组件源码

<template>
    <div class="playVideo-layout">
      <!-- 播放器 -->
      <div id="app-container" class="video-box">
        <video
          ref="videoElement"
          id="videoElement"
          autoplay
          controls
          muted
          style="width: 100%; height: 100%; object-fit: fill"
        >
        <source>
      </video>
      </div>
    </div>
  </template>


<script>

// import hlsjs from "hls.js";
import {ref , watch,onMounted} from 'vue';
export default {
  name: "Success",

  props:{
      hlsUrl: String,
  },
  
  setup(props) {
    const videoUrl = ref(null);
    const video = document.getElementById("videoElement");

    // 使用 watch 监听 hlsUrl 变化
    watch(() => props.hlsUrl, (newHlsUrl) => {
      console.log("watch hlsUrl is "+ newHlsUrl);
      // video.src = newHlsUrl;
      document.getElementById("videoElement").src = newHlsUrl;
      // show(newHlsUrl); // 在 hlsUrl 变化时执行 show

    });

    onMounted(() => {
      // 在组件挂载后，调用 show 方法
      // console.log("onMounted hlsUrl is "+ props.hlsUrl);
      if(props.hlsUrl){
        video.src = props.hlsUrl;
      }
    });

    return {
      videoUrl,
    };
  },
};

</script>