【実現したいこと】
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});
あなたの回答
tips
プレビュー