浏览器渲染hls流视频

vue+video.js渲染hls流视频应该怎么操作，目前已知视频流非m3u8格式，为ogg格式，如何渲染到浏览器上。

前端代码如下：

<template>
  <div>
    <video
      id="my-video"
      class="video-js vjs-default-skin"
      controls
      preload="auto"
      width="640"
      height="360"
    >
      <!--<source :src="m3u8Url" type="video/ogg" />-->
      <source :src="m3u8Url" type="application/x-mpegURL"/>
      <!-- 注意这里的:src是Vue的绑定语法，你需要将m3u8Url替换为你的数据源 -->
    </video>
  </div>
</template>
<script>
  // 在main.js或Vue组件的<script>部分
  import 'video.js/dist/video-js.css';
  import videojs from 'video.js';
  import 'videojs-contrib-hls'; // 引入HLS插件

  export default {
    data() {
      return {
        m3u8Url: 'test/hls/110001', // 替换为你的m3u8视频流地址
        player: null,
      };
    },
    mounted() {
      this.player = videojs('my-video', {
        // 这里可以添加Video.js的配置选项，比如controls: true表示显示控制条
        controls: true,
        // 对于HLS流，你可能需要配置hls选项，比如withCredentials: true表示发送跨域请求的凭据
        hls: {
          withCredentials: true,
        },
      }, function onPlayerReady() {
        // 播放器就绪后的回调函数
        console.log('播放器就绪！');
        // 这里可以添加其他初始化代码，如设置自动播放等
        // this.play(); // 自动播放（如果需要）
      });
    },
    beforeDestroy() {
      // 在组件销毁前，确保销毁Video.js播放器实例
      if (this.player) {
        this.player.dispose();
      }
    },
  };
</script>

目前音频和视频控制栏能正常使用，视频黑屏，请问哪位大神知道如何解决？？？？？