vue中使用video.js播放m3u8格式的视频

要在Vue中使用Video.js播放m3u8格式的视频，首先需要安装Video.js库和相关的HLS插件。以下是安装命令和示例代码：

npm install video.js
npm install videojs-contrib-hls

然后，在Vue组件中引入Video.js和HLS插件，并在data中定义一个视频源，在methods中初始化Video.js实例。

<template>
  <div>
    <video ref="videoPlayer" class="video-js vjs-default-skin"></video>
  </div>
</template>
 
<script>
import videojs from 'video.js';
import 'videojs-contrib-hls';
 
export default {
  name: 'VideoPlayer',
  data() {
    return {
      player: null,
      videoSource: 'path/to/your/video.m3u8'
    };
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
      console.log('Player is ready');
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>
 
<style>
  /* Add custom styles here, example below */
  .video-js .vjs-tech {
    width: 100%;
    height: auto;
  }
</style>

确保替换videoSource的值为你的m3u8视频文件的URL。这段代码在Vue组件的mounted钩子中初始化Video.js播放器，并确保在组件销毁前销毁播放器以防止内存泄漏。