详解vue3中如何使用shaka-player

目录

• 正文
• 开始使用
• 做成组件shakaPlayer
• 使用方式
• 注意事项

正文

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

开始使用

我们可以使用 npm 下载

npm i shaka-player

做成组件shakaPlayer

<script setup>
import { ref, watch, 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 }
});
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: [
      "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 onError = (error) => {
  console.error("Error code", error.code, "object", error);
};
const play = () => videoPlayer.value && videoPlayer.value.play();
const pause = () => videoPlayer.value && videoPlayer.value.pause();
watch(
  () => props.src,
  () => initPlayer()
);
defineExpose({ play, pause });
</script>
<template>
  <div ref="videoContainer" class="max-w-full">
    <video
      ref="videoPlayer"
      class="full"
      :poster="poster"
      :autoplay="autoplay"
      muted
    ></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 才会生效。

以上就是详解vue3中如何使用shaka-player的详细内容，更多关于vue3使用shaka-player的资料请关注易盾网络其它相关文章！