WP組み込み前提のやっていき。
前提
再生後のリダイレクトは紹介記事があるのでそれを流用させてもらうことにする。
コピーライト入れろってことなので一応書いておきますが詳しくはページを読んで下さい。
Copyright (c) 2013 Yukinobu Kurata
https://wisdommingle.com/youtube-iframe-api-player-video-end-point-redirect/
Released under the MIT license
https://github.com/YukinobuKurata/YouTubeEndPointRedirect/blob/master/MIT-LICENSE.txt
単純に、これについての紹介は書いた。
この記事ではレスポンシブ化のメモだったのだけど、今回はwpに組み込む際のどうのこうのをやっていく。
活用イメージ
単純にページ内に埋め込むのであればコードをそのまま使えばいいので手間はない。
wpにおいては投稿記事内に仕込みたい場合もあって、仕込むのであればyoutubeの動画idと遷移先のurlをカスタムフィールドで入力しておけば出力は問題ない。でも動画が1つとは限らないので、繰り返しフィールドを使うことも視野に入ってくる。
つまり、複数の動画に対応したやつにカスタマイズしたいということ。
参考元の記事は特定の動画1本に対しての組み方なので、そのままでは使えない。
やっていく。
コードの理解
そもそもの構成を理解する。
<script type="text/javascript">
var videoWidth = 640;
var videoHeight = 360;
var youtubeVideoID = '【youtubeID】';
var redirectUrl = "【遷移先URL】";
var redirectTargetBlank = 0;
var targetID = 'iframe_player_api';
</script>
<div id="iframe_player_api"></div>
<script>
var tag=document.createElement("script");tag.src="https://www.youtube.com/iframe_api";var firstScriptTag=document.getElementsByTagName("script")[0];firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);var player;
function onYouTubeIframeAPIReady(){player=new YT.Player(targetID,{width:videoWidth,height:videoHeight,videoId:youtubeVideoID,playerVars:{modestbranding:1,autohide:1,controls:1,showinfo:0,rel:0},events:{onReady:onPlayerReady,onStateChange:onPlayerStateChange}})}function onPlayerReady(a){}function onPlayerStateChange(b){switch(b.data){case YT.PlayerState.ENDED:if(redirectTargetBlank){var a=document.createElement("a");a.href=redirectUrl;a.target="_blank";document.body.appendChild(a);a.click()}else{location.href=redirectUrl}break;case YT.PlayerState.PLAYING:break;case YT.PlayerState.PAUSED:break;case YT.PlayerState.BUFFERING:break;case YT.PlayerState.CUED:break}};
</script>「設定用のjs」「設置場所のhtml」「出力・操作のjs」の3つで構成されている。jsはまとめてもいいけど役割で分けたほうが分かりやすいので、この考え方でやっていく。
これを元にうまいことやっていく。
仕様の理解と改造イメージ
上記の埋め込みは重複ができない、1ページ上に1個しか設置できないということに注意。
まず思いつくのは必要な数だけコピペしてidやら何やらを書き換えるということだけど、それをすると最後に記述したものだけが動作する。
とはいえ不可能ということではなく、仕様に応じた書き方があるよ、という話。
これと絡めてやっていくことになる。
やっていく
理解しないで手を出すと結構な火傷になる。
完成イメージ
3つの構成ってことで、以下の感じになる。
<script>
const youtubeArr = [
{
youtubeVideo : 'https://youtu.be/tLeA6EBruaI',
redirectUrl : 'https://www.google.com/?hl=ja',
targetID : 'iframe_player_api_0',
},{
youtubeVideo : 'https://youtu.be/vrqzZ8l_Mpw',
redirectUrl : 'https://www.yahoo.co.jp/',
targetID : 'iframe_player_api_1',
},
];
var videoWidth = 640;
var videoHeight = 360;
var redirectTargetBlank = 0;
var ytPlayer = [];
</script><div id="iframe_player_api_0"></div>
<div id="iframe_player_api_1"></div><script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
for(var i = 0; i < youtubeArr.length; i++) {
ytPlayer[i] = new YT.Player(youtubeArr[i]['targetID'], {
width: videoWidth,
height: videoHeight,
videoId: youtubeArr[i]['youtubeVideo'].match(".+/(.+?)([\?#;].*)?$")[1],
playerVars: {
rel: 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
}
function onPlayerReady(event) {}
function onPlayerStateChange(event) {
for (var i = 0; i < youtubeArr.length; i++) {
if(event.target.getIframe().id == youtubeArr[i]['targetID']) {
var redirectUrl = youtubeArr[i]['redirectUrl'];
switch (event.data) {
case YT.PlayerState.ENDED:
if (redirectTargetBlank) {
var redirectATag = document.createElement('a');
redirectATag.href = redirectUrl;
redirectATag.target = '_blank';
document.body.appendChild(redirectATag);
redirectATag.click();
} else {
location.href = redirectUrl;
}
break;
case YT.PlayerState.PLAYING:
break;
case YT.PlayerState.PAUSED:
break;
case YT.PlayerState.BUFFERING:
break;
case YT.PlayerState.CUED:
break;
}
}
};
}
</script>設定は多次元連想配列でまとめる。
それを上手く展開して組み込みましょう、という感じ。
関数内で各埋込への割り振り
埋め込み先のidに対しての動作（この場合だとリダイレクト）を仕込む際、関数から関数を呼び出すギミックになってる。呼び出された関数は単純に書かれた処理どおりに動くよって話でしかないので、発火したHTMLに応じて処理を動的に切り替える（この場合リダイレクト先のURL変更）には対応してない。呼び出し元の関数ではループ処理から該当HTMLそれぞれに命令を書いてるんだけど、それをそのまま引っ張れない感じになってる。
要するに、対応した処理を組み込むには呼び出された関数側で対象を拾ってこないといけない。
これがわからないと詰む。
WordPressへの組み込み
ページファイルに直書きすることになる
動画情報の配列を作る必要があるんで、jsファイルにまとめることができない。投稿内容に応じて動的に変化するしね、仕方ないね。
カスタムフィールド
YoutubeのURL、リダイレクト先のURLがほしいのでこれをセットにした繰り返しフィールドを作る。動画情報に「targetID」があるけど、これは繰り返し処理の際に連番を振ればいいので、自動処理で済む。
出力
作例を、と思ったけどフィールド名とかのことがあるので、それに別に難しくないんで、コードは割愛。考え方だけ。
まず大枠の条件分岐として、カスタムフィールドに入力があれば諸々を出力、入力がなければ全て出力しない。
入力がある場合は「jsの配列」「設置箇所のhtml」この2つをループ処理で出力する。IDは共通にしないといけないのでミスしないように注意。
そんな感じで。
まとめ・サンプルコードについて
出力・操作用のjsはそのまま使える。
長ったらしいのでminifyで圧縮するのが便利。念のため圧縮後は動作確認するのがいい。
var tag=document.createElement("script");tag.src="https://www.youtube.com/iframe_api";var firstScriptTag=document.getElementsByTagName("script")[0];firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);function onYouTubeIframeAPIReady(){for(var a=0;a<youtubeArr.length;a++){ytPlayer[a]=new YT.Player(youtubeArr[a]["targetID"],{width:videoWidth,height:videoHeight,videoId:youtubeArr[a]["youtubeVideo"].match(".+/(.+?)([?#;].*)?$")[1],playerVars:{rel:0},events:{onReady:onPlayerReady,onStateChange:onPlayerStateChange}})}}function onPlayerReady(a){}function onPlayerStateChange(c){for(var a=0;a<youtubeArr.length;a++){if(c.target.getIframe().id==youtubeArr[a]["targetID"]){var d=youtubeArr[a]["redirectUrl"];switch(c.data){case YT.PlayerState.ENDED:if(redirectTargetBlank){var b=document.createElement("a");b.href=d;b.target="_blank";document.body.appendChild(b);b.click()}else{location.href=d}break;case YT.PlayerState.PLAYING:break;case YT.PlayerState.PAUSED:break;case YT.PlayerState.BUFFERING:break;case YT.PlayerState.CUED:break}}}};設定用のjsと出力先のHTMLは各々の都合に合わせて作る。
コメント