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

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

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

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

JavaScript

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

Q&A

0回答

230閲覧

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

am_765

総合スコア7

YouTube API

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

JavaScript

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

0グッド

0クリップ

投稿2018/07/25 13:24

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

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

html

1<!-- 初回に訪れた際に再生される動画 --> 2<div id="fvMovie" class="sp"> 3<div id="mV_youtube" class="aspect_ratio"> 4<div id="videoDetails" class="aspect_ratio_object"></div> 5<div class="skipBtn"><img src="imgs/sp/btn-skip.png" alt="skip"></div> 6</div><!-- / #mV_youtube .aspect_ratio --> 7</div><!-- / #fvMovie --> 8 9<!-- 2回目以降に訪れた際にクリックされると再生される動画 --> 10<div id="player"></div> 11<p class="play-movie"><img src="imgs/sp/btn-play-movie.png" alt=""></p>

javaScript

1$(window).load(function(){ 2 var player; 3 $winW = window.innerWidth ? window.innerWidth: $(window).width(); 4 $breakP = 640; 5 if($breakP > $winW) { 6 7 var youtubeFunc = { 8 init: function() { 9 var tag = document.createElement("script"), 10 firstScriptTag = document.getElementsByTagName("script")[0]; 11 12 tag.src = "https://www.youtube.com/iframe_api"; 13 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 14 15 function onYouTubeIframeAPIReady() { 16 player1 = new YT.Player("videoDetails", { 17 width: 320, 18 height: 240, 19 videoId: "aaa", 20 playerVars: { 21 controls: 0, // UIを非表示にする 22 disablekb: 0, // キーボードによる操作を不可にする 23 fs: 0, // フルスクリーンボタンを消す 24 iv_load_policy: 3, // アノテーションを非表示にする 25 modestbranding: 1, // ロゴを非表示にする 26 playsinline: 1, 27 autoplay: 1, 28 rel: 0, // 関連動画を非表示にする 29 showinfo: 0 // インフォメーションを非表示にする 30 }, 31 events: { 32 "onReady": onPlayerReady, 33 "onStateChange": onPlayerStateChange 34 } 35 }); 36 } 37 38 function onPlayerReady(evt) { 39 evt.target.mute(); 40 evt.target.playVideo(); 41 playerReady = true; 42 } 43 44 function onPlayerStateChange(evt) { 45 if (evt.data === YT.PlayerState.ENDED) { 46 $('#mV_youtube').animate({ 47 'opacity': 0 48 }, 0, function () { 49 $('#mV_youtube').addClass('start'); 50 }); 51 $('body').removeClass('movieFixed'); 52 $('#fvMovie').addClass('movieStop'); 53 location.reload(); 54 } 55 } 56 57 // スキップ 58 $(function() { 59 $('.skipBtn').click(function() { 60 location.reload(); 61 }); 62 }); 63 64 window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady; 65 } 66 } 67 68 var youtubeFunc2 = { 69 init: function() { 70 var tag = document.createElement("script"), 71 firstScriptTag = document.getElementsByTagName("script")[0]; 72 73 tag.src = "https://www.youtube.com/iframe_api"; 74 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 75 // play-movie-btn 76 var $ = document.querySelector.bind(document); 77 // init player 78 function onYouTubeIframeAPIReady() { 79 player = new YT.Player('player', { 80 height: '50', 81 width: '50', 82 videoId: 'aaa', 83 events: { 84 'onReady': onPlayerReady2 85 } 86 }); 87 } 88 // when ready, wait for clicks 89 function onPlayerReady2(event) { 90 var player = event.target; 91 iframe = $('#player'); 92 setupListener2(); 93 } 94 function setupListener2() { 95 $('.play-movie').addEventListener('click', playFullscreen2); 96 } 97 function playFullscreen2() { 98 player.playVideo(); 99 var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen; 100 if (requestFullScreen) { 101 requestFullScreen.bind(iframe)(); 102 } 103 } 104 } 105 } 106 107 108 var cookieCheck = $.cookie("access_count0"); 109 if (cookieCheck == 'visited') { 110 $('#fvMovie').addClass('movieStop') 111 youtubeFunc2.init(); 112 } else { 113 $.cookie( "access_count0" , "visited" , { expires: 999 , path: "/" } ); 114 $('body').addClass('movieFixed'); 115 youtubeFunc.init(); 116 } 117 } 118});

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

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

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

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

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

t_obara

2018/07/26 03:34

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問