プライベートURLを表示
iframeで埋め込まれたYouTube動画をJavaScriptでコントロールする必要があったので、メモしておきます。
YouTubeには「iframe Player API」というAPIが用意してあり、基本的にはこの[公式リファレンス](https://developers.google.com/youtube/iframe_api_reference?hl=ja)の通りにすれば実現できます。
公式リファレンスではプレイヤーのiframe生成までJSでおこなっていますが、iframe自体はHTML内にあった方がメンテナンスしやすく、また仕組みを理解しやすいので、これから提示するサンプルではそうしてあります。
サンプルでは動画の停止中はカバーをかぶせておき、余計な情報を見せないようにしてあります。再生はそのカバーがクリックされると始まります。詳しい説明はコメントに書いてあります。
DOMの操作はjQueryをつかっているので予め読み込んでおいてください。
### javaScript（jQuery）
/* 「iframe Player API」が読み込まれます。
読み込まれるとすぐに関数「onYouTubePlayerAPIReady()」が
実行されるようになっています。*/
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let _player1;
/*
* onYouTubePlayerAPIReady()
*/
function onYouTubePlayerAPIReady(){
$(function(){
_player1 = new YT.Player("player1", { // （"player1"は動画iframeのID）
events: {
/* 「onReady:」は、iframe動画の準備が整ったら
実行されます */
onReady: function onPlayerReady(e) {
$('#yt1 .player-cover').click(function(){
_player1.playVideo(); // 動画の再生
$(this).hide(); // カバーの非表示
});
},
/* 「onStateChange:」は、iframe動画の状態が変わる事に実行されます。
「e.data」として渡されるパラメータは以下になります。
e.data → -1（未開始）
e.data → 0（終了） e.data == YT.PlayerState.ENDED
e.data → 1（再生中） e.data == YT.PlayerState.PLAYING
e.data → 2（停止） e.data == YT.PlayerState.PAUSED
e.data → 3（ﾊﾞｯﾌｧ中） e.data == YT.PlayerState.BUFFERING
e.data → 5（頭出し済み）e.data == YT.PlayerState.CUED
*/
onStateChange: function(e){
if (e.data == YT.PlayerState.ENDED || e.data == YT.PlayerState.PAUSED) {
// 一時停止・終了した場合
console.log('e.data = ' + e.data);
$('#yt1 .player-cover').show(); // カバーの表示
}
},
}
});
});
}
### css
.player-wrap{
position: relative;
width: 560px;
height: 315px;
}
.player-cover {
position: absolute;
width: 100%; height: 100%;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,0.8);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
color:#fff;
font-size: 24px;
font-weight: bold;
}
### html
呼び出すYouTubeの埋込用URLの引数に「?enablejsapi=1」がついていることに注目してください。これは、この動画をJSでコントロールさせることを許可する指定で、これがないと動きません。
### 複数の動画をコントロールする
このサンプルでは再生する動画プレーヤーのラッパーを「#yt1」、動画プレーヤー自体を「#player1」、制御するオブジェクトを「_player1」としてありますが、複数の動画をコントロールする場合は、上記コードをコピペして「#yt2」「#player2」「_player2」というように名前を替えれば動作します。
[サンプル](https://www.chaordic.co.jp/memorandum/sample/iframePlayerAPI/)
### 参考
iframe埋込動画のパラメータの指定は以下を参考にしました。
https://www.movie-times.tv/how-to/2708/
COVER
2022-04-10 11:02:14
ソースコードは自由にお使いください。また、何らかの不利益が生じたとしても一切責任を負いません。
