プログラミング

【PR】を含みます。

youtube動画をWebサイトに読み込んで制御する方法

JavaScript youtube動画をWebサイトに読み込んで制御する方法

JavaScriptでyoutube動画をWebサイトに読み込んで制御する方法を解説します。

YouTube IFrame Player APIを使用してyoutube動画を制御します。

JavaScriptでyoutube動画を読み込む

実装コード

HTML
Copy
  1. <div class="player_container">
  2.   <div id="player"></div>
  3. </div>
CSS
Copy
  1. .player_container {
  2.   display: flex;
  3.   justify-content: center;
  4. }
JavaSctipt
Copy
  1. // YouTube IFrame Player APIの読み込み
  2. let tag = document.createElement('script');
  3. tag.src = "https://www.youtube.com/iframe_api";
  5. let firstScriptTag = document.getElementsByTagName('script')[0];
  6. firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  8. // youtubeプレーヤーの読み込み
  9. let player;
  10. let targetPlayer = document.getElementById('player');
  11. function onYouTubeIframeAPIReady() {
  12.   player = new YT.Player(targetPlayer, {
  13.     videoId: 'VIDEO_ID', // ビデオIDを指定
  14.   });
  15. }

ビデオIDの確認方法

YouTubeのビデオIDはURL、共有リンク、埋め込みコードなどから確認することができます。

今回はURLから確認する方法を紹介します。

以下のようなURLの場合、v=abc123XYZ部分のabc123XYZがビデオIDになります。

URL：https://www.youtube.com/watch?v=abc123XYZ&list=xxxxxxxx&start_radio=1

YouTube IFrame Player APIの主なオプション一覧

autoplay
動画の自動再生設定
autoplay: 0（自動再生OFF）またはautoplay: 1（自動再生ON）
color
プレイヤーの動画進行状況バーの色を指定
color: 'red'（赤）または color: 'white'（白）
controls
プレイヤーのコントロールを表示するか
controls: 0（非表示）または controls: 1（表示）
disablekb
プレイヤーのキーボード操作
disablekb: 0（キーボード操作有効）または disablekb: 1（キーボード操作無効）
enablejsapi
YouTube埋め込みプレーヤーでYouTube IFrame Player APIを有効にするか
enablejsapi: 0（無効）または enablejsapi: 1（有効）
end
再生終了位置（秒単位）
end: 60
fs
フルスクリーンボタンの表示
fs: 0（非表示）または fs: 1（表示）
loop
動画のループ再生
loop: 0（無効）または loop: 1（有効）
※ループ再生を有効にする場合、playlistに同じビデオIDを指定します
playlist
再生リスト
値: カンマ区切りで複数のビデオIDを指定
playlist: 'VIDEO_ID_1,VIDEO_ID_2'
playsinline
iOSデバイスでのインライン再生
playsinline: 0（フルスクリーン）または playsinline: 1（インライン）
start
再生開始位置（秒単位）
start: 10

【サンプルコード】YouTube IFrame Player APIオプションの使用例

HTML
Copy
  1. <div class="player_container">
  2.   <div id="player"></div>
  3. </div>
CSS
Copy
  1. .player_container {
  2.   display: flex;
  3.   justify-content: center;
  4. }
JavaSctipt
Copy
  1. // YouTube IFrame Player APIの読み込み
  2. let tag = document.createElement('script');
  3. tag.src = "https://www.youtube.com/iframe_api";
  5. let firstScriptTag = document.getElementsByTagName('script')[0];
  6. firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  8. // youtubeプレーヤーの読み込み
  9. let player;
  10. let targetPlayer = document.getElementById('player');
  11. function onYouTubeIframeAPIReady() {
  12.   player = new YT.Player(targetPlayer, {
  13.     videoId: 'VIDEO_ID_1', // ビデオIDを指定
  14.     playerVars: {
  15.       controls: 1, // プレイヤーのコントロール表示
  16.       playlist: 'VIDEO_ID_1,VIDEO_ID_2', // 再生リスト
  17.     },
  18.   });
  19. }

YouTube IFrame Player APIの主なイベント

onReady
プレイヤーが準備完了したときに発生
使用例: onReady: function(event) { /* コード */ }
onStateChange
プレイヤーの状態が変わったときに発生
使用例: onStateChange: function(event) { /* コード */ }
onPlaybackQualityChange
画質が変わったときに発生
使用例: onPlaybackQualityChange: function(event) { /* コード */ }
onPlaybackRateChange
再生速度が変わったときに発生
使用例: onPlaybackRateChange: function(event) { /* コード */ }
onError
エラーが発生したときに発生
使用例: onError: function(event) { /* コード */ }
onApiChange
プレイヤーAPIが変更されたときに発生
※APIの内部的な変更が発生する可能性がある場合に使用します。
使用例: onApiChange: function(event) { /* コード */ }

【サンプルコード】YouTube IFrame Player APIイベントの使用例

HTML
Copy
  1. <div class="player_container">
  2.   <div id="player"></div>
  3. </div>
CSS
Copy
  1. .player_container {
  2.   display: flex;
  3.   justify-content: center;
  4. }
JavaSctipt
Copy
  1. // YouTube IFrame Player APIの読み込み
  2. let tag = document.createElement('script');
  3. tag.src = "https://www.youtube.com/iframe_api";
  5. let firstScriptTag = document.getElementsByTagName('script')[0];
  6. firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  8. // youtubeプレーヤーの読み込み
  9. let player;
  10. let targetPlayer = document.getElementById('player');
  11. function onYouTubeIframeAPIReady() {
  12.   player = new YT.Player(targetPlayer, {
  13.     videoId: 'VIDEO_ID', // ビデオIDを指定
  14.     events: {
  15.       'onReady': onPlayerReady,
  16.       'onStateChange': onPlayerStateChange,
  17.       'onPlaybackQualityChange': onPlaybackQualityChange,
  18.       'onPlaybackRateChange': onPlaybackRateChange,
  19.       'onError': onPlayerError,
  20.       'onApiChange': onApiChange
  21.     }
  22.   });
  24.   function onPlayerReady(event) {
  25.     console.log("プレイヤーの準備が完了しました");
  26.   }
  28.   function onPlayerStateChange(event) {
  29.       console.log("プレイヤーの状態が変わりました: " + event.data);
  30.   }
  32.   function onPlaybackQualityChange(event) {
  33.       console.log("画質が変わりました: " + event.data);
  34.   }
  36.   function onPlaybackRateChange(event) {
  37.       console.log("再生速度が変わりました: " + event.data);
  38.   }
  40.   function onPlayerError(event) {
  41.       console.log("エラーが発生しました: " + event.data);
  42.   }
  44.   function onApiChange(event) {
  45.       console.log("プレイヤーAPIが変更されました");
  46.   }
  47. }

読み込んだyoutube動画を操作するための主なメソッド

YouTube IFrame Player APIでメソッド（関数）を使用する場合、プレイヤーの準備完了後にonReadyイベントなどで実行する必要があります。

※プレイヤー読み込み前に実行すると、エラーが発生します。

player.playVideo()
動画を再生する
player.pauseVideo()
動画を一時停止する
player.stopVideo()
動画を停止する
player.seekTo(seconds, allowSeekAhead)
指定した秒数にシークする
引数:
  • seconds: シークする秒数
  • allowSeekAhead: trueの場合、バッファリングを許可
player.mute()
音声をミュートする
player.unMute()
音声のミュートを解除する
player.isMuted()
音声がミュートされているかどうかを確認する
戻り値: true（ミュートされている）、false（ミュートされていない）
player.setVolume(volume)
音量を設定する
引数:
  • volume: 設定する音量（0から100）
player.getVolume()
現在の音量を取得する
戻り値: 音量（0から100）
player.setPlaybackRate(suggestedRate)
再生速度を設定する
引数:
  • suggestedRate: 設定する再生速度
player.getPlaybackRate()
現在の再生速度を取得する
戻り値: 再生速度
player.getAvailablePlaybackRates()
利用可能な再生速度のリストを取得する
戻り値: 再生速度のリスト
player.setSize(width, height)
プレーヤーのサイズを設定する
引数:
  • width: 幅
  • height: 高さ
player.getVideoLoadedFraction()
読み込まれた動画の割合を取得する
戻り値: 読み込まれた割合（0から1）
player.getPlayerState()
プレーヤーの現在の状態を取得する
戻り値:
  • -1: 未開始
  • 0: 終了
  • 1: 再生中
  • 2: 一時停止中
  • 3: バッファリング中
  • 5: 頭出し済み（プレイヤーの準備が完了し、再生可能な状態）
player.getCurrentTime()
動画の現在の再生位置を取得する
戻り値: 再生位置（秒）
player.getDuration()
動画の全体の長さを取得する
戻り値: 長さ（秒）
player.getVideoUrl()
現在再生中の動画のURLを取得する
戻り値: 動画のURL
player.getVideoEmbedCode()
現在再生中の動画の埋め込みコードを取得する
戻り値: 埋め込みコード

【サンプルコード】YouTube IFrame Player APIメソッドの使用例

HTML
Copy
  1. <div class="player_container">
  2.   <div id="player"></div>
  3. </div>
CSS
Copy
  1. .player_container {
  2.   display: flex;
  3.   justify-content: center;
  4. }
JavaSctipt
Copy
  1. // YouTube IFrame Player APIの読み込み
  2. let tag = document.createElement('script');
  3. tag.src = "https://www.youtube.com/iframe_api";
  5. let firstScriptTag = document.getElementsByTagName('script')[0];
  6. firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  8. // youtubeプレーヤーの読み込み
  9. let player;
  10. let targetPlayer = document.getElementById('player');
  11. function onYouTubeIframeAPIReady() {
  12.   player = new YT.Player(targetPlayer, {
  13.     videoId: 'VIDEO_ID', // ビデオIDを指定
  14.     events: {
  15.       'onReady': onPlayerReady,
  16.     }
  17.   });
  19.   function onPlayerReady(event) {
  20.     player.mute();
  21.   }
  22. }

アルゴリズムを学びたい方におすすめの1冊

アイコン画像

もみじ

アルゴリズムとそれを支える数学について基礎から学びたい人にオススメの一冊です。

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-プログラミング
-