Vue3，使用shaka -player，支持hls视频格式

Shaka Player 是谷歌公司对外开源的一款 
javascript 类库，详细请看谷歌官方api文档。

下载 

npm i shaka-player@4.8.5 --save
yarn add shaka-player@4.8.5 --save

 更多版本：shaka-player (v4.4.1) - DASH/EME video player library | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

代码

<template>
  <div ref="videoContainer" data-shaka-player-container style="max-width: 100%" data-shaka-player-cast-receiver-id="7B25EC44">
    <video ref="videoPlayer" id="video" data-shaka-player style="width: 100%; height: 100%"></video>
  </div>
</template>

import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import shaka from "shaka-player/dist/shaka-player.ui.js";
import "shaka-player/dist/controls.css"; //样式文件 注意路径
//import "https://cdn.jsdelivr.net/npm/mux.js@5.5.3/dist/mux.min.js"//低版本，有这个文件hls才能正常播放，当前版本不需要

const props = defineProps({
  api: {
    type: String,
  },
});
let manifestUri =
  // "https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths-hls/hls.m3u8";//可以用这个测试
  computed(() => {
    return props.api;
  }).value;
onMounted(() => {
  initApp();
});
onBeforeUnmount(() => {
  player && player.destroy();
});
const initApp = () => {
  if (shaka.Player.isBrowserSupported()) {
    initPlayer();
  } else {
    console.error("Browser not supported!");
  }
};
const videoPlayer = ref();
const videoContainer = ref();
let player = null;
const initPlayer = () => {
  player = new shaka.Player(videoPlayer.value);
  const ui = new shaka.ui.Overlay(player, videoContainer.value, videoPlayer.value);
  ui.configure({
    // 自定义控件
    controlPanelElements: [
      "time_and_duration", // 进度
      "spacer",
      "mute", // 静音
      "volume", // 音量
      "fullscreen", // 全屏
      "overflow_menu",
    ],
   overflowMenuButtons: [
      "quality", //分辨率
      "language", //语言，识别不出不显示
      "picture_in_picture", //画中画
      "playback_rate"//倍速
    ],
  });
  loadPlayer();
};
const loadPlayer = async () => {
  try {
    await player.load(manifestUri);
  } catch (e) {
    onError(e);
  }
};
const onError = error => {
  console.error("Error code", error.code, "object", error);
};

效果