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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

YouTube API

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

3180閲覧

youtube API 埋め込み再生でミュートが解除される

OnomimonO

総合スコア16

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

YouTube API

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

1クリップ

投稿2016/09/20 15:09

###前提・実現したいこと
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でテスト中

naoyan👍を押しています

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

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

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

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

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

guest

回答1

0

そもそものバックグラウンド再生の動画の方の音声をなくすのはどうでしょうか?
背景の再生処理なので、ファイルも軽くなっていいかなと思います。

投稿2016/12/06 01:24

naoyan

総合スコア604

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

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

OnomimonO

2016/12/06 03:12

わかりにくかったらすみません。 バックグラウンドの音声をなくす方法を聞いています。
naoyan

2016/12/06 10:58

すみません!ちょっと意味取り違えてました! 再生ボタンを押す前と、押した後で、動画って連続して再生されてますでしょうか? それとも、再生ボタン後に、はじめから再生されるのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問