詳解vue3中如何使用youtube-player

更新時間：2022年09月21日 09:02:39 作者：簡單卟容易

這篇文章主要為大家介紹了詳解vue3中如何使用youtube-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

youtube-player 是 YouTube IFrame Player API (YIPA) 的封裝?？梢栽谧约壕W(wǎng)站上播放YouTube視頻。

開始使用

使用 npm 下載

npm i youtube-player

做成組件youtubePlayer

<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
import YouTubePlayer from "youtube-player";
const props = defineProps({
  id: { type: String, default: "" },
  src: { type: String, required: true },
  width: { type: Number, default: 0 },
  height: { type: Number, default: 0 }
});
const emit = defineEmits(["ended", "play", "pause"]);
onMounted(() => {
  initPlayer();
  loadPlayer();
});
onBeforeUnmount(() => {
  player && player.destroy();
});
const getVideoId = () => {
  try {
    const url = new URL(props.src);
    return url.searchParams.get("v") || "";
  } catch (error) {
    return "";
  }
};
let player = null;
const initPlayer = () => {
  try {
    player = YouTubePlayer(`youtube-${props.id}`, {
      host: "https://www.youtube.com",
      width: props.width,
      height: props.height,
      videoId: getVideoId(),
      playsinline: 1,
      rel: 0
    });
  } catch (error) {
    console.log(error);
  }
};
const loadPlayer = () => {
  try {
    player.loadVideoById(getVideoId());
  } catch (error) {
    console.log(error);
  }
};
const play = () => player && player.playVideo();
const pause = () => player && player.pauseVideo();
// -1（未開始）0（已結束）1（正在播放）2（已暫停）3（正在緩沖）5（視頻已插入）
let stateChangeListener;
const addStateChange = () => {
  stateChangeListener = player?.on("stateChange", (event) => {
    if (event.data === 0) emit("ended");
    if (event.data === 1) emit("play");
    if (event.data === 2) emit("pause");
  });
};
const removeStateChange = () => {
  if (stateChangeListener) player?.off(stateChangeListener);
};
watch(
  () => props.src,
  () => loadPlayer()
);
defineExpose({ play, pause });
</script>
<template>
  <div class="youtube-video">
    <div :id="'youtube-' + id"></div>
  </div>
</template>
<style lang="scss" scoped>
.youtube-video {
  width: 100%;
  overflow: hidden;
}
</style>

使用方式

<youtube-player src="https://www.youtube.com/watch?v=uRzs2kS3Blg"></youtube-player>

注意事項

播放器有默認寬高，只能是px，需要做響應式的要自己動態(tài)獲取寬高在重新設置。

常用參數(shù)

參數(shù)
autoplay	是否在播放器加載時自動開始播放初始視頻。支持的值為 0 或 1。默認值為 0。
controls	視頻播放器控件是否會顯示。支持的值為 0 或 1。默認值為 1。
fs	視頻播放器全屏按鈕是否會顯示。支持的值為 0 或 1。默認值為 1。
loop	視頻是否會循環(huán)播放。支持的值為 0 或 1。默認值為 0。
playsinline	此參數(shù)用于控制視頻在 iOS 設備上的 HTML5 播放器中播放時，是以內嵌方式還是全屏模式播放。支持的值為 0 或 1。默認值為 0 全屏。