🔊

vue.jsでYouTubeIFramePlayerAPIを使うならVueYoutubeがおすすめ

2024/07/04に公開

JavaScript

YIPA（YouTubeIFramePlayerAPI）の使用目的

複数の動画を読み込み、それぞれに対して用意したボタンから音量操作・再生・停止を行いたい。

開発環境

Vue3のComposition API形式です。

  "dependencies": {
    "@vue-youtube/component": "^0.0.6",
    "@vue-youtube/core": "^0.0.6",
    "pixi.js": "^8.1.1",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.12.5",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/tsconfig": "^0.5.1",
    "typescript": "~5.4.0",
    "vite": "^5.2.8",
    "vue-tsc": "^2.0.11"
  }

VueYoutubeの使い方

※似たような名前のnpmライブラリが多数あるので直リンク推奨

VueYoutubeのREADME：

VueYoutube公式ガイド：

動画をロードする

sample.vue

<script setup lang="ts">
import { ref } from "vue";
import { YoutubeIframe } from "@vue-youtube/component";
let isReady = false;
let videoArr: any = ref([]); // 動的に動画を変更するにはrefが必要
let videoReadyCount = 0; // 読み込まれた動画の数
let youtube: any = ref(); // ここに動画プレイヤーの情報が入る

// 動画の読み込みが完了したときに実行
const onReady = () => {
  try {
    videoReadyCount++;
    if (videoReadyCount >= videoArr.value.length) {
      // すべての動画の読み込みが完了したときに実行
      isReady = true;
    }
  } catch (error) {
    console.error("An error occurred in the onReady function:", error);
  }
};
</script>

<template>
    <youtube-iframe 
    v-for="video in videoArr" // 複数表示したいので繰り返す
    :video-id="video" // 読み込む動画のID
    :player-vars="{ 
      origin: 'https://ne0n.xyz', // 設置するサイトのドメイン
      disablekb: 1, // キーボード操作を無効化
      loop: 1, // ループ再生を有効化
      playlist: video, // プレイリストID or 動画ID（ループ再生をするために必要）
      iv_load_policy: 3, // 動画アノテーション（動画上にオーバーレイする要素）を非表示
      controls: 0, // 動画のコントロールを非表示にする
      start: 30 // 30秒から再生（1,2秒のズレあり）
    }" 
    @ready="onReady" // 動画の読み込みが完了した際に実行するコールバック関数を設定
    ref="youtube" // ここに動画プレイヤーの情報が入る
    ></youtube-iframe>
</template>

player-varsのパラメータの一覧はここ↓

再生する

sample.vue

// 再生
function PlayYoutube(index: number) {
  try {
    if (youtube.value[index]) {
      const { instance } = youtube.value[index];
      instance.playVideo();
    }
  } catch (error) {
    console.error("An error occurred in the onReady function:", error);
  }
}

停止する

sample.vue

// 一時停止
function PauseYoutube(index: number) {
  const { instance } = youtube.value[index];
  instance.pauseVideo();
}

// 停止
function StopToutube(index: number) {
  const { instance } = youtube.value[index];
  instance.stopVideo();
}

// indexが取れないときはすべて停止もできる
youtube.value.forEach((e: any, index: number) => {
  const { instance } = youtube.value[index];
  instance.stopVideo();
});

音量を変える

sample.vue

function VolumeYoutube(index: number, volume:number) {
  const { instance } = youtube.value[index];
  instance.setVolume(volume);
}

YIPA（YouTubeIFramePlayerAPI）の使用目的

開発環境

VueYoutubeの使い方

動画をロードする

再生する

停止する

音量を変える

Discussion