vue3中如何使用shaka-player

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

开始使用

我们可以使用 npm 下载

npm i shaka-player

封装成组件shakaPlayer

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import shaka from "shaka-player/dist/shaka-player.ui.js";
import "../../node_modules/shaka-player/dist/controls.css"; // 注意路径

const props = defineProps({
  src: { type: String, required: true },
  poster: { type: String, default: "" },
  autoplay: { type: Boolean, default: false }
});

const emit = defineEmits(["ended", "play", "pause"]);

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

onBeforeUnmount(() => {
  destroy();
});

const initApp = () => {
  shaka.polyfill.installAll();
  if (shaka.Player.isBrowserSupported()) {
    initPlayer();
  } else {
    console.error("Browser not supported!");
  }
};

const onError = (e) => {
  // https://shaka-player-demo.appspot.com/docs/api/shaka.util.Error.html
  console.error("shakaPlayer Error code:", e?.code, "object:", e);
};

const videoPlayer = ref();
const videoContainer = ref();
let player = null;
let ui = null;
const initPlayer = async () => {
  player = new shaka.Player();
  await player.attach(videoPlayer.value);
  player.addEventListener("error", (e) => onError(e?.detail));
  ui = new shaka.ui.Overlay(player, videoContainer.value, videoPlayer.value);

  ui.configure({
    // 自定义控件
    controlPanelElements: [
      "time_and_duration", // 进度
      "spacer",
      "mute", // 静音
      "volume", // 音量
      "fullscreen", // 全屏
      "overflow_menu"
    ],
    overflowMenuButtons: [
      "picture_in_picture", // 画中画
      "playback_rate" // 倍速
    ],
    playbackRates: [0.5, 1, 1.5, 2], // 倍速选项
    // 视频进入全屏时设备是否应旋转到横向模式
    forceLandscapeOnFullscreen: false
  });

  loadPlayer();
};

const loadPlayer = async () => {
  try {
    await player.load(props.src);
  } catch (e) {
    onError(e);
  }
};

const play = () => videoPlayer.value && videoPlayer.value.play();
const pause = () => videoPlayer.value && videoPlayer.value.pause();
const uiDestroy = () => ui?.destroy && ui.destroy();
const destroy = () => {
  player?.destroy && player.destroy();
  uiDestroy();
};

// 播放器事件
const onEnded = () => emit("onEnded");
const onPlay = () => emit("onPlay");
const onPause = () => emit("onPause");

defineExpose({ play, pause });
</script>

<template>
  <div ref="videoContainer" class="max-w-full">
    <video
      ref="videoPlayer"
      class="full"
      :poster="poster"
      :autoplay="autoplay"
      muted
      webkit-playsinline
      playsinline
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
    ></video>
  </div>
</template>

<style scoped>
.max-w-full {
  max-width: 100%;
}

.full {
  width: 100%;
  height: 100%;
}
</style>

如何使用

<shaka-player
  class="video"
  :src="src"
  :poster="poster"
  autoplay
></shaka-player>

.video {
  width: 100%;
  height: 200px;
}

注意事项

默认视频控件是显示所有的，允许我们自定义。

我们可以直接使用 video 原生方法、事件和属性。

宽高可以用class样式设置。

Shaka Player不支持Vue响应对象，player 不能用 ref 来声明。

移动端视频默认静音时，autoplay 才会生效。