YouTube Player APIによりページ内複数動画のうち一つだけ再生させる

jQuery web制作 YouTube Player API アプリケーション別 プログラミング

広報:齊藤 メイ 広報:齊藤 メイ

Posted on 2018年02月05日(月)17:51
Updated on 2018年02月01日(木)15:36


YouTube Player APIによりページ内複数動画のうち一つだけ再生させる

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

JavaScript

JavaScriptは以下です。動画再生サイズや動画IDなどの値は、適時皆さんの環境に合わせて置き換えてください。

以上です。
ちなみにこの時、代表齊藤は「これで終わりではないだろう」という予感はしており、それはやはり的中することになるのでした。


いかがでしたでしょうか?
猫ITソリューションズは、飼い主の皆さんにITを活用しあらゆるシーンで的確なアドバイスをいたします。それではまたお会いしましょう。

YouTube Player APIによりページ内複数動画のうち一つだけ再生させる

see you!

 

本件に関するお問い合わせ先

猫ITソリューションズ

049-290-8502
お問い合わせフォーム



Member Profile

広報:齊藤 メイ

埼玉在住の三毛猫です。趣味は日向ぼっこ、好きな猫缶はカツオ系です。仲良くしてくださいね!

Facebook
Twitter

代表:齊藤 智宏

埼玉在住のWebデベロッパーです。80's洋楽、映画、レトロゲームが大好きです。よろしく!

Facebook
Twitter

Contact

ご意見、ご相談などお気軽にお問い合わせ下さい。お問い合わせ内容の確認後、担当者よりご連絡させていただきます。

049-290-8502
お問い合わせフォーム