質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

302閲覧

再生済動画を配列に入れて活用する方法

eaconian

総合スコア21

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

1クリップ

投稿2018/09/16 08:56

お世話になっております。
YoutubeAPIの利用方法についてお尋ね致します。

複数動画を制御しようと試みる過程で、「動画再生中に、他の動画を停止する」という機能の実装で躓いております。

後述するコードでは、
・再生済動画のytID(YouTubeの動画ID)と
・再生済動画のytArea(動画を埋め込む場所のID)
を保存し、他の動画の再生中に保存したものを停止する。という処理を考えているのですが、思うようにいかず、質問させて頂きました。

###サンプル
https://jsfiddle.net/9qokwpxc/

###コード

html

1<div id="youtube_ZVT_CNl0Wvc" class="videos_youtube"> 2<img src="http://i.ytimg.com/vi/ZVT_CNl0Wvc/mqdefault.jpg"> 3</div> 4 5<div id="youtube__sj2-dk7djI" class="videos_youtube"> 6<img src="http://i.ytimg.com/vi/_sj2-dk7djI/mqdefault.jpg"> 7</div> 8 9<button id="play">play</button> 10<button id="pause">pause</button> 11

javascript

1// YouTube Player APIを読み込む 2var tag = document.createElement('script'); 3tag.src = "https://www.youtube.com/iframe_api"; 4var firstScriptTag = document.getElementsByTagName('script')[0]; 5firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 6 7(function($){ 8 9 // 再生済動画を入れるための配列 10 var PlayHistoryId = []; 11 var PlayHistoryArea = []; 12 13 // サムネイルをクリック後にYouTubeを埋め込む 14 $('body').on("click",".videos_youtube",function(){ 15 16 var click_Id = $(this).attr('id'); 17 var target_Id = document.getElementById(click_Id); 18 var click_VideoId = $(this).attr('id').replace('youtube_',''); 19 20 target_Id.addEventListener('click', function() { 21 22 // プレーヤーを埋め込む場所 23 var ytArea = target_Id; 24 // プレーヤーを埋め込むYouTubeID 25 var ytID = click_VideoId; 26 27 // YouTubeを埋め込む 28 ytPlayer = new YT.Player(ytArea, { 29 width: 320, 30 height: 195, 31 videoId: ytID 32 }); 33 34 // 再生した動画を「ytPlayer2やytPlayer3」など再生済動画として追加し続ける 35 ytPlayer2 = new YT.Player(PlayHistoryArea[1], { 36 videoId: PlayHistoryId[1] 37 }); 38 ytPlayer3 = new YT.Player(PlayHistoryArea[2], { 39 videoId: PlayHistoryId[2] 40 }); 41 42 // 再生したら再生済動画として配列に保存 43 PlayHistoryId.push(ytID); 44 PlayHistoryArea.push(ytArea); 45 46 }, false); 47 48 49 // ボタン制御 50 $('#play').click(function() { 51 // 再生 52 ytPlayer.playVideo(); 53 // 最後に再生したやつ以外を停止→うまくいかない 54 ytPlayer2.pauseVideo(); 55 ytPlayer3.pauseVideo(); 56 }); 57 $('#pause').click(function() { 58 // 停止 59 ytPlayer.pauseVideo(); 60 }); 61 62 }); 63 64})(jQuery); 65

上のサンプルやコードにありますように、 // 最後に再生したやつ以外を停止→うまくいかないという点が躓いている部分でございます。

あまりお詳しい方はいらっしゃらないかと存じますが、もしAPIを触ったご経験がございましたらアドバイスをお待ちしております。
宜しくお願い申し上げます。

_lemon2003_👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

これは参考にはなりませんか?

https://teratail.com/questions/146393

play ボタンが押されたら、

  1. 最後に再生した動画があるなら、それを停止。
  2. 最後に再生した動画に現在再生しようとしている動画をセット。

pause ボタンが押されたら、

  1. 最後に再生した動画を停止。
  2. 最後に再生した動画をリセット(消去)する。

投稿2018/09/16 12:19

_lemon2003_

総合スコア274

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

eaconian

2018/09/16 22:54

ありがとうございます。今回はYouTubeAPIを介した制御なので、残念ながら活用できる部分は少なそうですが、参考にさせて頂きます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問