vue3 vediojs播放hls直流视频

<div class="control" id="videoBox">
   <video id="videoPlayer" class="video-js" width="100%" height="100%" />
</div>

​<script setup lang="ts">
 import { ref, onMounted, reactive, nextTick } from "vue";
 import videojs from "video.js";
 import "video.js/dist/video-js.css";

 const myPlayer: any = ref(null);
const setUrl = (item: any) => {
  if (myPlayer.value != null) {
    myPlayer.value.dispose();
    myPlayer.value = null;
  }
  const videoBox: any = document.getElementById("videoBox");
  videoBox.innerHTML = "";
  videoBox.innerHTML = `<video id="videoPlayer" class="video-js" style='width:100%;height:100%' width="100%" height="100%"></video>`;
  nextTick(() => {
    myPlayer.value = videojs(
      "videoPlayer",
      {
        controls: true,
        autoplay: true, //自动播放
        muted: true, //默认静音
        sources: [
          {
            src: 'url',
            type: "application/x-mpegURL",
          },
        ],
        controlBar: {
          remainingTimeDisplay: {
            displayNegative: false,
          },
        },
        // playbackRates: [0.5, 1, 1.5, 2]
      },
      () => {
        myPlayer.value.log("play.....");
      }
    );
  });
};
​</script>