vue3中播放m3u8，附测试网址

说明

关于m3u8的播放，网上有各种库供大家参考：

• vue-video-player
• videojs-contrib-hls
• video.js
• hls.js
• xgplayer-hls（西瓜视频官方的）

如何选择

经小编测试，功能最强的就是hls.js了，同一个m3u8的地址，其他的库要么不能播放、要么就是速度慢，用hls.js基本是秒出，解析速度相当快
但是其他的几种库也各有优点，比如：

• vue-video-player：支持多宫格播放（4宫格，9宫格）
• xgplayer-hls：支持预览、超清、高清、标清、支持下载……

hls.js用法

预览地址（大家可用来测试m3u8）m3u8测试预览地址

1. /public文件夹下放入hls.min.js
2. 在index.html中引入：

    <script type="text/javascript" src="/public/hls.min.js"></script>

3. 示例组件vue3:

<template>
  <div class="app-container">
    <div style="margin-bottom: 8px;">
      <el-input v-model="videoUrl" style="width: 70%;" />
      <el-button @click="playHLS(videoUrl)" style="margin-left: 8px;">播放</el-button>
    </div>
    <video
      id="hls"
      width="1000"
      height="600"
      class="img-responsive video-js vjs-default-skin"
      controls
      preload="auto"
      :autoplay="true"
      muted
      ref="videoRef"
    >
    </video>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted, onBeforeUnmount } from "vue";

const videoRef = ref()
const videoUrl = ref('https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8')
let hlsPlayer
const playHLS = (url) => {
  const video = videoRef.value;
  if (typeof hlsPlayer !== "undefined") {
    if (hlsPlayer != null) {
      hlsPlayer.destroy();
    }
  }
  hlsPlayer = new Hls();
  hlsPlayer.loadSource(url);
  hlsPlayer.attachMedia(video);//将视频元素绑定到此 HLS 对象
  hlsPlayer.on(Hls.Events.MANIFEST_PARSED, function () {
    video.play();
    emit("changeIsPlay", true);
  });
  hlsPlayer.on(Hls.Events.ERROR, function (eventName, data) {
    if(data.fatal && data.type !=="networkError") {
      video.pause();
      emit("changeIsPlay", false);
    }
  });
};

onBeforeUnmount(() => {
  if (typeof hlsPlayer!== "undefined") {
    hlsPlayer.destroy();
  }
})
</script>