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

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

ただいまの
回答率

90.38%

  • JavaScript

    21544questions

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

  • YouTube API

    116questions

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

  • YouTube

    115questions

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

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

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 292

eaconian

score 11

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

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

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

サンプル

https://jsfiddle.net/9qokwpxc/

コード

<div id="youtube_ZVT_CNl0Wvc" class="videos_youtube">
<img src="http://i.ytimg.com/vi/ZVT_CNl0Wvc/mqdefault.jpg">
</div>

<div id="youtube__sj2-dk7djI" class="videos_youtube">
<img src="http://i.ytimg.com/vi/_sj2-dk7djI/mqdefault.jpg">
</div>

<button id="play">play</button>
<button id="pause">pause</button>
// 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);

(function($){    

  // 再生済動画を入れるための配列
  var PlayHistoryId = [];
  var PlayHistoryArea = [];

  // サムネイルをクリック後にYouTubeを埋め込む
  $('body').on("click",".videos_youtube",function(){

    var click_Id = $(this).attr('id');
    var target_Id = document.getElementById(click_Id);
    var click_VideoId = $(this).attr('id').replace('youtube_','');

    target_Id.addEventListener('click', function() {

      // プレーヤーを埋め込む場所
      var ytArea = target_Id;
      // プレーヤーを埋め込むYouTubeID
      var ytID = click_VideoId;

      // YouTubeを埋め込む
      ytPlayer = new YT.Player(ytArea, {
        width: 320,
        height: 195,
        videoId: ytID
      });

      // 再生した動画を「ytPlayer2やytPlayer3」など再生済動画として追加し続ける
      ytPlayer2 = new YT.Player(PlayHistoryArea[1], {
        videoId: PlayHistoryId[1]
      });
      ytPlayer3 = new YT.Player(PlayHistoryArea[2], {
        videoId: PlayHistoryId[2]
      });    

      // 再生したら再生済動画として配列に保存
      PlayHistoryId.push(ytID);
      PlayHistoryArea.push(ytArea);

    }, false);


    // ボタン制御
    $('#play').click(function() {
      // 再生
      ytPlayer.playVideo();
      // 最後に再生したやつ以外を停止→うまくいかない
      ytPlayer2.pauseVideo();
      ytPlayer3.pauseVideo();
    });
    $('#pause').click(function() {
      // 停止
      ytPlayer.pauseVideo();
    });

  });

})(jQuery);


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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

https://teratail.com/questions/146393

play ボタンが押されたら、

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

pause ボタンが押されたら、

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/17 07:54

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

    キャンセル

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

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21544questions

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

  • YouTube API

    116questions

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

  • YouTube

    115questions

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