vue中 video-player播放m3u8视频

在Vue中使用video-player播放M3U8视频，你需要一个支持HLS（HTTP Live Streaming）的视频组件库，如vue-video-player。以下是基本步骤：

1. 安装插件：首先，安装`vue-video-player`组件，可以使用npm或yarn命令：

   npm install vue-video-player hlsjs
   # 或者
   yarn add vue-video-player hls.js

2. 引入组件并配置：在你的Vue组件中导入`VideoPlayer`组件，并配置它以支持M3U8流。例如：

<template>
  <div>
    <vup-video ref="player" :src="hlsUrl"></vup-video>
  </div>
</template>

<script>
import VideoPlayer from 'vue-video-player'
import Hls from 'hls.js'

export default {
  components: {
    VideoPlayer
  },
  data() {
    return {
      hlsUrl: 'your-m3u8-url.hls', // 替换为你的M3U8地址
    }
  },
  mounted() {
    const player = this.$refs.player
    const hlsInstance = new Hls()
    hlsInstance.loadSource(this.hlsUrl)
    hlsInstance.attachMedia(player.video)
    hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
      // 开始播放
      player.play()
    })
    hlsInstance.on(Hls.Events.ERROR, (event) => {
      console.error('HLS error:', event.details)
    })
  },
}
</script>

3. 错误处理：为了保证播放过程的稳定，记得添加错误处理，监听HLS的错误事件。

注意：M3U8文件需要服务器支持，因为它是一种基于URL列表的直播协议，而不是简单的视频资源。此外，对于不同的浏览器兼容性，可能还需要进一步的调整。