###前提・実現したいこと
YoutubeAPIを用いて、サイト内でバックグラウンド(埋め込み)再生。
再生ボタンを押すとフルスクリーンで再生される(その時は音声あり)。
フルスクリーン再生から抜けられるescapeアイコンを右上に表示、クリックすると通常ページに戻る。(通常ページではバックグラウンド再生なのでミュート)
フルスクリーン中にバックボタン(戻る)操作をすると、通常ページに戻る(もちろんミュート)。
↑これができてない
###発生している問題・エラーメッセージ
フルスクリーン再生から戻る操作をして、 もう一度進んで通常ページを開くと、バックグラウンド再生なのに、 音声が出てしまう。(ミュートが解除される)
###該当のソースコード
HTML
1<section> 2<div id="player"></div> 3 4 5 <div class="play-video-icon" id="play-fullscreen" style="margin:30px auto"> 6 <i style="font-size:50px" class="fa fa-play"></i> 7 </div> 8</section> 9 10<!-- Youtube Full --> 11<div id="fullscreen-div" style="display:none;position:fixed;z-index: 1040;width:100%;height:100%;top:0"> 12 <iframe id="main_player" width="100%" height="100%" frameborder="0" allowfullscreen></iframe> 13 <div id="closebutton"><i style="z-index:99999;font-size:50px;position:absolute;top:0;right:0" class="fa fa-close"></i></div> 14</div> 15
Javascript
1var fullscreen = document.getElementById('play-fullscreen'), 2 main_player = document.getElementById('main_player'); 3 4var fullscreendiv = document.getElementById('fullscreen-div'); 5var closebutton = document.getElementById('closebutton'); 6fullscreen.addEventListener('click', function (e) { 7 fullscreendiv.style.display = 'block'; 8 main_player.src = "https://www.youtube.com/embed/tQzUI3wJeG8?autoplay=1&loop=1;rel=0&controls=1&showinfo=0&autohide=1"; 9 player.mute(); 10}); 11 12 13 14$(document).keyup(function(e) { 15 if (e.keyCode == 27) { // Esc 16 fullscreendiv.style.display = 'none'; // or whatever you want 17 } 18}); 19 20closebutton.addEventListener('click', function (e) { 21 fullscreendiv.style.display = 'none'; 22 main_player.src = ''; 23 }); 24 25 26//======================================== 27// For background Video 28//======================================== 29 30var tag = document.createElement('script'); 31 32tag.src = "https://www.youtube.com/iframe_api"; 33var firstScriptTag = document.getElementsByTagName('script')[0]; 34firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 35 36// 3. This function creates an <iframe> (and YouTube player) 37// after the API code downloads. 38var player; 39function onYouTubeIframeAPIReady() { 40 player = new YT.Player('player', { 41 height: '100%', 42 width: '100%', 43 playerVars: { 44 autoplay: 1, 45 loop: 1, 46 rel: 0, 47 playlist: 'tQzUI3wJeG8', 48 controls: 0, 49 showinfo: 0, 50 autohide: 1, 51 modestbranding: 1, 52 vq: 'hd1080'}, 53 videoId: 'tQzUI3wJeG8', 54 events: { 55 'onReady': onPlayerReady, 56 'onStateChange': onPlayerStateChange 57 } 58 }); 59} 60 61//Perfectly mute Yusuke 62// var media = document.getElementById("player"); 63// media.muted = true; 64 65 66// 4. The API will call this function when the video player is ready. 67function onPlayerReady(event) { 68 event.target.playVideo(); 69 event.target.mute(); 70 player.mute(); 71} 72 73var done = false; 74function onPlayerStateChange(event) { 75 76} 77function stopVideo() { 78 player.stopVideo(); 79} 80
###試したこと
コメントアウトしているperfectly mute を試した。
consoleを見たが、そもそもミュートの動きはなかった。
###補足情報(言語/FW/ツール等のバージョンなど)
chromeでテスト中
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/06 03:12
2016/12/06 10:58