Youtubeの動画再生にも一手間かけることもあるのですが、少しやっかいな話になってきた、というお話です。?本日は「YouTube Player APIによりページ内複数動画のうち一つだけ再生させる」についてです。
こんにちは。猫ITソリューションズ広報の齊藤メイ(♀)です。本日は、「YouTube Player APIによりページ内複数動画のうち一つだけ再生させる」についてです。
今回は以前紹介した「YouTube Player APIによる同一ページ内の複数動画再生」の追加要件機能改良版です。としては、要は本家サイトから再生用htmlタグで済ませるだけじゃあダメという場合にはYoutube Player APIで何とかしよう、というお話です。
要件と仕様
相変わらず生々しい内容ですが気にしないでください。
要件
- 1ページに載せるYoutube動画が10~20と多い。
- 動画は割と頻繁に(非開発者が)更新しなくてはいけない。
他にも色々やりたいことがある。- [NEW!] 1ページで再生させる動画は一つだけ。既に再生していた動画はストップさせる。
仕様
YouTube Player APIで動画を制御することに変わりありません。
YouTube Player APIについてはこちらをご覧ください。なお今回はiframe APIを使用しています。
iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame Player API
サンプル
サンプルに必要なソースはhtmlとJavaScriptです。今回Youtube Player APIを含めライブラリ系は全てCDNで外部から読み込んでいます。
html
htmlは以下になります。かなり抜粋していますのでご注意ください。なおjQueryのCDNはここで確認→コピペしてください。
jQuery CDN
1 2 3 4 |
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <div id="player01"></div> <div id="player02"></div> <div id="player03"></div> |
JavaScript
JavaScriptは以下です。動画再生サイズや動画IDなどの値は、適時皆さんの環境に合わせて置き換えてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
// 埋め込むyoutubeのIDと埋め込むエリアを指定 var ytData = [ { id: 'YouTubeの動画ID 1', area: 'player01' }, { id: 'YouTubeの動画ID 2', area: 'player02' }, { id: 'YouTubeの動画ID 3', area: 'player03' } ]; var ytPlayer = []; var ytPlaying, ytStop, ytPlay; // YouTube Player APIを読み込む var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // API読み込み後に、各エリアにプレーヤーを埋め込む function onYouTubeIframeAPIReady() { for (var i = 0; i < ytData.length; i++) { var ytWidth = 480; var ytHeight = 270; ytPlayer[i] = new YT.Player(ytData[i]['area'], { height: ytHeight, width: ytWidth, videoId: ytData[i]['id'], events: { 'onStateChange': onPlayerStateChange } }); } } // プレーヤーの状態に変化があった時に実行 function onPlayerStateChange(event) { // 各プレーヤーの状態を確認 for (var i = 0; i < ytData.length; i++) { var thisState = ytPlayer[i].getPlayerState(); if (thisState == 1 && ytPlaying == undefined) { ytPlaying = i; } else if (thisState == 1 && ytPlaying != i) { ytStop = ytPlaying; ytPlay = i; } else {} } // 同時再生があった場合、元々再生していた方を停止する if (ytStop != undefined) { ytPlayer[ytStop].pauseVideo(); ytStop = undefined; } // 現在再生中のプレーヤー番号を保存しておく if (ytPlay != undefined) { ytPlaying = ytPlay; ytPlay = undefined; } } |
以上です。
ちなみにこの時、代表齊藤は「これで終わりではないだろう」という予感はしており、それはやはり的中することになるのでした。