vue video播放m3u8监控视频

很关键的问题 vite创建的项目不需要import ‘videojs-contrib-hls’ 导入就报错

直接添加如下代码即可

  html5: {
          vhs: {
            overrideNative: true
          },
          nativeVideoTracks: false,
          nativeAudioTracks: false,
          nativeTextTracks: false
        }

下面是完整组件示例 

<template>
  <div>
    <video
      style="border-radius: 8px; margin: 0 auto; overflow: hidden"
      id="my-video"
      class="video-js vjs-default-skin"
      controls
      autoplay
      muted
      preload="auto"
      width="300"
      ref="videoPlayer"
    ></video>
  </div>
</template>

<script setup>
  import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
  import videojs from 'video.js';
  import 'video.js/dist/video-js.css';

  const props = defineProps({
    srcUrl: {
      type: String,
      required: true
    }
  });

  const videoPlayer = ref(null);
  let player = null;

  const getVideo = () => {
    console.log('11111111');
    player = videojs(
      videoPlayer.value,
      {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
        controlBar: true,
        html5: {
          vhs: {
            overrideNative: true
          },
          nativeVideoTracks: false,
          nativeAudioTracks: false,
          nativeTextTracks: false
        }
      },
      function onPlayerReady() {
        console.log('视频加载成功');
        this.src({ type: 'application/x-mpegURL', src: props.srcUrl });
        this.play();
      }
    );
  };

  onMounted(() => {
    getVideo();
  });

  watch(
    () => props.srcUrl,
    (newSrcUrl) => {
      if (player) {
        player.src({ type: 'application/x-mpegURL', src: newSrcUrl });
        player.play();
      }
    }
  );

  onBeforeUnmount(() => {
    if (player) {
      player.dispose();
    }
  });
</script>

<style scoped>
  video {
    border-radius: 8px;
    margin-bottom: 24px;
  }
</style>