#026
posted on 2021.02.06

iframeで埋め込んだYouTube動画をJavaScriptで操作。

iframeで埋め込んだYouTube動画の再生・停止などを、自サイトにはIFrame Player APIのファイルを組み込まずにJavaScriptで動的に操作する方法のメモ。

 

  1. 埋め込むiframeにJavaScript APIの使用を許可するパラメーターを付与。
  2. iframe内で表示している外部サイト(YouTube)のwindowオブジェクトを取得。
  3. windowオブジェクトにpostMessageメソッドでAPIのコマンドを送信。

 

HTMLに埋め込みコードとコントローラー要素を記述

iframeの埋め込みコードにAPIの使用を許可するパラメーター「enablejsapi=1」を付与する。パラメーターを付与しない場合、デフォルトは「0」で使用不可。

//通常の埋め込みコードにクエリを付与
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画のID?enablejsapi=1" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

//クリックイベントで動画を操作するための要素
<div id="ytplay">再生</div>
<div id="ytpause">一時停止</div>
<div id="ytstop">停止</div>
<div id="ytclear">クリア</div>
<div id="ytseek">シークバー移動</div>
<div id="ytmute">ミュート</div>
<div id="ytunmute">アンミュート</div>
<div id="ytvolume">音量を設定</div>

 

 

iframe内のwindowオブジェクトの取得と操作コマンドの送信

IFrameオブジェクトのcontentWindowプロパティで、iframeに表示している外部サイト(今回はYouTube)のwindowオブジェクトを取得。

取得したwindowオブジェクトにpostMessageメソッドでAPIのコマンドを送信することで、間接的に動画を操作。

const ytiframe= 'iframeタグに付けた任意のid名';
//iframeで表示しているwindowオブジェクトを取得
const targetWindow = document.getElementById(ytiframe).contentWindow;

//APIのコマンドを送信する関数
const ytControl = function(action,arg=null){
targetWindow.postMessage('{"event":"command","func":"'+action+'","args":'+arg+'}', '*');
};

//クリックイベントで動画を操作
//再生
document.getElementById('ytplay').addEventListener('click', function(event){
  ytControl('playVideo');
});
//一時停止
document.getElementById('ytpause').addEventListener('click', function(event){
  ytControl('pauseVideo');
});
//停止
document.getElementById('ytstop').addEventListener('click', function(event){
  ytControl('stopVideo');
});
//シークバーの移動
document.getElementById('ytseek').addEventListener('click', function(event){
  //(secondsパラメータ : 指定の秒数の位置へ移動, allowSeekAheadパラメータ : 未バッファの位置の場合に新しいリクエストを行うか)
  ytControl('seekTo','[60,true]');
});
//クリア
document.getElementById('ytclear').addEventListener('click', function(event){
  ytControl('clearVideo');
});
//ミュート
document.getElementById('ytmute').addEventListener('click', function(event){
  ytControl('mute');
});
//アンミュート
document.getElementById('ytunmute').addEventListener('click', function(event){
  ytControl('unMute');
});
//音量を設定
document.getElementById('ytvolume').addEventListener('click', function(event){
  //(volume : 0~100の整数値を指定)
  ytControl('setVolume','[50]');
});

iframe要素.contentWindow : iframe要素で表示しているコンテキストのwindowを返す。

対象window.postMessage(メッセージ, ターゲットURI) : windowオブジェクト間で安全にクロスドメイン通信をする。ターゲットURIが正しいか確認してから対象のwindowにメッセージ(データオブジェクト)を送信する。「*」指定はワイルドカード。

 

 

この記事をシェア