YouTubeのiframe動画をjavascriptでコントロールする方法
YouTubeの動画をウェブアプリケーションに入れたい場合、iframeを利用して埋め込む方法が多く使われています。その場合、再生中の動画を止めたり、ある所から動画を再生したりなど制御処理を入れたい時があります。埋め込んだYouTube動画をjavascriptで制御する方法を紹介します。
普段はYouTube IFrame Player APIを利用たらjavascriptでYouTubeのiframe動画を制御するのが可能ですが、環境によって上手くいかない場合があります。そのため、ここではYouTube IFrame Player APIを使わずに実装する方法を紹介します。
HTMLの作成
まずはYouTube動画を入れるHTMLファイルを作成します。大事なのはiframeの属性であるsrcのYouTube動画urlの後ろに「?enablejsapi=1」付けることです。これを付けないと制御できないです。YouTube IFrame APIが有効になります。他のパラメータはこちらを参考します。→YouTube IFrame API Parameters
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Document</title>
</head>
<body>
<iframe class="video" id="popup-YouTube-player" width="560" height="315" src="https://www.YouTube.com/embed/13S9kfvkchA?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button id="play">play</button>
<button id="pause">pause</button>
<button id="stop">stop</button>
<button id="clear">clear</button>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>Javascriptの実装
Javascriptを書くscript.jsファイルを作成します。javascriptではiframeのwindowにpostMessageでイベントを渡してあげることができます。これを利用してiframe内に自動生成されYoutube制御関数を呼び出して再生、停止、ストップをコントロールします。
YouTube動画を制御できる関数はこちらで確認できます。→YouTube IFrame API再生制御関数
$(function(){
$("#play").on("click", function(){
videoControl("popup-YouTube-player","playVideo","");
});
$("#pause").on("click", function(){
videoControl("popup-YouTube-player","pauseVideo","");
});
$("#stop").on("click", function(){
videoControl("popup-YouTube-player","stopVideo","");
});
$("#clear").on("click", function(){
videoControl("popup-YouTube-player","clearVideo","");
});
function videoControl(elementid, action, args){
var $playerWindow = $('#'+elementid)[0].contentWindow;
$playerWindow.postMessage('{"event":"command","func":"'+action+'","args":args}', '*');
}
});この記事が気に入ったらサポートをしてみませんか？