Youtubeの動画再生にも一手間かけることもある、というお話です。？本日は「YouTube Player APIによる同一ページ内の複数動画再生」についてです。
こんにちは。猫ITソリューションズ広報の齊藤メイ（♀）です。本日は、「YouTube Player APIによる同一ページ内の複数動画再生」についてです。
Youtube動画をウェブページ内で再生させる方法としては、本家サイトから再生用htmlタグを取得するのが一般的です。ブログなどで2～3個表示させる場合はそれで問題ありません。しかし世の中一般常識が通用しない世界もあるのです。てゆーかそういう仕事だったのです。
要件と仕様
相変わらず生々しい内容ですが気にしないでください。
要件
- 1ページに載せるYoutube動画が10～20と多い。
- 動画は割と頻繁に（非開発者が）更新しなくてはいけない。
- 他にも色々やりたいことがある。
仕様
再生用htmlタグをイチイチ取得して張り付けるのは手間なので、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は以下です。動画再生サイズなどの数値は適時皆さんの希望で置き換えてください。
|
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 |
// 埋め込む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'] }); } } |
以上です。
ちなみにこの時、代表齊藤はしばらく後出しジャンケン的に決まっていく「他にも色々やりたいこと」の序章に過ぎないことを知りませんでした。
