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

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

ただいまの
回答率

90.53%

  • JavaScript

    16325questions

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

  • YouTube API

    93questions

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

YouTubeプレーヤーAPIでの動画再生

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 155

am_765

score 1

【実現したいこと】
1. スマホ時にYouTubeプレーヤーAPIでYouTubeを複数設置し、クッキー制御で初めてサイトを訪れた場合に動画を再生させる。
2. 2度目以降は特定の位置に配置してあるボタンをクリックすると同じ動画が再生される。

【解決したいこと】
1は実装できたのですが、2で躓いています。
ボタンをクリックしても動画が再生されません。
http://cly7796.net/wp/javascript/multiple-installation-in-youtube-player-api/
上記サイトの方法など色々と試してみたのですが、上手くいきませんでした。
以下ソースです。
アドバイスいただければ幸いです。
よろしくお願いします。

<!-- 初回に訪れた際に再生される動画 -->
<div id="fvMovie" class="sp">
<div id="mV_youtube" class="aspect_ratio">
<div id="videoDetails" class="aspect_ratio_object"></div>
<div class="skipBtn"><img src="imgs/sp/btn-skip.png" alt="skip"></div>
</div><!-- / #mV_youtube .aspect_ratio -->
</div><!-- / #fvMovie -->

<!-- 2回目以降に訪れた際にクリックされると再生される動画 -->
<div id="player"></div>
<p class="play-movie"><img src="imgs/sp/btn-play-movie.png" alt=""></p>
$(window).load(function(){
    var player;
    $winW = window.innerWidth ? window.innerWidth: $(window).width();
    $breakP = 640;
    if($breakP > $winW) {

        var youtubeFunc = {
            init: function() {
                var tag = document.createElement("script"),
                firstScriptTag = document.getElementsByTagName("script")[0];

                tag.src = "https://www.youtube.com/iframe_api";
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

                function onYouTubeIframeAPIReady() {
                    player1 = new YT.Player("videoDetails", {
                        width: 320,
                        height: 240,
                        videoId: "aaa",
                        playerVars: {
                            controls: 0, // UIを非表示にする
                            disablekb: 0, // キーボードによる操作を不可にする
                            fs: 0, // フルスクリーンボタンを消す
                            iv_load_policy: 3, // アノテーションを非表示にする
                            modestbranding: 1, // ロゴを非表示にする
                            playsinline: 1,
                            autoplay: 1,
                            rel: 0, // 関連動画を非表示にする
                            showinfo: 0 // インフォメーションを非表示にする
                        },
                        events: {
                            "onReady": onPlayerReady,
                            "onStateChange": onPlayerStateChange
                        }
                    });
                }

                function onPlayerReady(evt) {
                    evt.target.mute();
                    evt.target.playVideo();
                    playerReady = true;
                }

                function onPlayerStateChange(evt) {
                    if (evt.data === YT.PlayerState.ENDED) {
                        $('#mV_youtube').animate({
                            'opacity': 0
                        }, 0, function () {
                            $('#mV_youtube').addClass('start');
                        });
                        $('body').removeClass('movieFixed');
                        $('#fvMovie').addClass('movieStop');
                        location.reload();
                    }
                }

                // スキップ
                $(function() {
                  $('.skipBtn').click(function() {
                    location.reload();
                  });
                });

                window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
            }
        }

        var youtubeFunc2 = {
            init: function() {
                var tag = document.createElement("script"),
                firstScriptTag = document.getElementsByTagName("script")[0];

                tag.src = "https://www.youtube.com/iframe_api";
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                // play-movie-btn
                var $ = document.querySelector.bind(document);
                // init player
                function onYouTubeIframeAPIReady() {
                    player = new YT.Player('player', {
                        height: '50',
                        width: '50',
                        videoId: 'aaa',
                        events: {
                            'onReady': onPlayerReady2
                        }
                    });
                }
                // when ready, wait for clicks
                function onPlayerReady2(event) {
                    var player = event.target;
                    iframe = $('#player');
                    setupListener2();
                }
                function setupListener2() {
                    $('.play-movie').addEventListener('click', playFullscreen2);
                }
                function playFullscreen2() {
                    player.playVideo();
                    var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
                    if (requestFullScreen) {
                        requestFullScreen.bind(iframe)();
                    }
                }
            }
        }


        var cookieCheck = $.cookie("access_count0");
        if (cookieCheck == 'visited') {
            $('#fvMovie').addClass('movieStop')
            youtubeFunc2.init();
        } else {
            $.cookie( "access_count0" , "visited" , { expires: 999 , path: "/" } );
            $('body').addClass('movieFixed');
            youtubeFunc.init();
        }
    } 
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • t_obara

    2018/07/26 12:34

    どのように上手くいかないのかを提示されるとよろしいかと思います。また、参照されるサイトは可能な限り新しい情報をご覧になることをお勧めいたします。Youtubeも色々と変更されているので、その当時動作していたものでも、現在は動作しなくなっていることも多いので。

    キャンセル

まだ回答がついていません

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

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

関連した質問

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

  • JavaScript

    16325questions

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

  • YouTube API

    93questions

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