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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

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

Q&A

解決済

2回答

501閲覧

ミュートの状態になるようにランディングページにYouTubeを埋め込んだのですが、音が消えません。

akkkkin

総合スコア83

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2017/08/03 11:52

編集2017/08/04 00:05

掲題の件でご相談です。

ランディングページを表示させた際、youtubeがオートで再生され、
音はミュートの状態にしたく思っています。

しかし、現在の状態ではオートでは再生されるのですが、
音がミュートの状態にならなく、音楽がながれてしまいます。

htmlファイル、script.jsファイルには
下記のように記述しています。

■index.htmlファイルの記述箇所

<figure class="Youtube"> <div class="embed-responsive embed-responsive-16by9"> <iframe id="yt1" class="embed-responsive-item" src="//www.youtube.com/embed/コード番号?enablejsapi=1&amp;origin=https://hogehogehoge.com&amp;rel=0&amp;playsinline=1" allowfullscreen></iframe> </div> </figure>

■script.jsファイルの記述箇所

//Youtube読み込み var tag = document.createElement('script'); tag.src = "//www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var playerD; var players=['player1', 'player2', 'player3', 'player4']; function onYouTubeIframeAPIReady() { playerD = new YT.Player('ytDigest', { wmode: 'transparent', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); for(var i=0; i<4; i++) { players[i] = new YT.Player('yt' + i.toString(), { wmode: 'transparent', events: { 'onReady': onPlayerReady2 } }); } } function onPlayerReady(event) { // event.target.playVideo(); //iOSで不具合があるのでコメントアウト event.target.mute(); } function onPlayerReady2(event) { // event.target.playVideo(); //iOSで不具合があるのでコメントアウト event.target.setVolume(50); } function onPlayerStateChange(event) { }

つきましては上記のコードをどう直せばランディングページを表示させたときミュートの状態で
YouTubeが再生されるのでしょうか?

1ページ上で再生させたい動画数は1つ、ミュートでループ再生を行いたいです。

詳しい方がいらっしゃればご教示いただきたく思います。

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

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

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

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

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

syuus

2017/08/03 14:48

5つの動画をミュートで自動再生させたいということでしょうか。1ページ上で再生させたい動画数とどういった条件(1つはミュートでループ再生、その他4つは自動再生させないなど...)で再生したいのかを追記していただければ、より良い回答が出てくるかと思います。
akkkkin

2017/08/04 00:05

1ページ上で再生させたい動画数は1つ、ミュートでループ再生を行いたいです。
guest

回答2

0

どういったことを実現させたいのか正確に読み取れなかったので、とりあえず5つの動画をミュートで再生させるコードを記載します。
公式リファレンスのコードに必要最低限の追記をしただけなので、うまいやり方ではありませんが参考になれば幸いです。

iframe 組み込みの YouTube Player API リファレンス

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <body> 6 <div id="player1"></div> 7 <div id="player2"></div> 8 <div id="player3"></div> 9 <div id="player4"></div> 10 <div id="player5"></div> 11 12 <script> 13 var tag = document.createElement('script'); 14 15 tag.src = "https://www.youtube.com/iframe_api"; 16 var firstScriptTag = document.getElementsByTagName('script')[0]; 17 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 18 19 var youtubeVideos = [ 20 { 21 youtubeId: 'M7lc1UVf-VE', 22 embedArea: 'player1' 23 }, { 24 youtubeId: '7halxV32aew', 25 embedArea: 'player2' 26 }, { 27 youtubeId: 'W0SC7vLT0Vs', 28 embedArea: 'player3' 29 }, { 30 youtubeId: 'utUcL_HGBGs', 31 embedArea: 'player4' 32 }, { 33 youtubeId: 'oJvF1uZcAus', 34 embedArea: 'player5' 35 } 36 ]; 37 38 function onYouTubeIframeAPIReady() { 39 for (var i = 0; i < youtubeVideos.length; i++) { 40 youtubeVideos[i]['embedArea'] = new YT.Player(youtubeVideos[i]['embedArea'], { 41 height: '360', 42 width: '640', 43 videoId: youtubeVideos[i]['youtubeId'], 44 events: { 45 'onReady': onPlayerReady, 46 'onStateChange': onPlayerStateChange 47 } 48 }); 49 } 50 } 51 52 function onPlayerReady(event) { 53 event.target.playVideo(); 54 } 55 56 function onPlayerStateChange(event) { 57 event.target.mute(); 58 } 59 </script> 60 </body> 61</html>

投稿2017/08/03 14:22

編集2017/08/03 14:30
syuus

総合スコア403

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

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

0

ベストアンサー

iframeタグを使用している方(index.htmlの方)はミュートにするパラメーターがマニュアルにも書いてないので、公式の方法ではミュートにできません。
YouTube 埋め込みプレーヤーとプレーヤーのパラメータ

IFrame Player APIの方(script.jsの方)では、function onPlayerReady2にもevent.target.mute();を書いてください。
これでは、onPlayerReadyを呼び出しているplayerDはミュートになりますが、onPlayerReady2を呼び出しているplayersの4つはミュートになりません。

追記

最初は「syuuphxさんのコードがそのまま動くので、それを参考にしてください」と書こうと思ったのですが、いろいろあって私も書いてみました。(特にEdgeで動かないという問題が……)

akkkkinさんの要望を実現するコードを回答の最下部に載せました。
コピペで動きます。公式のコードをひな形に利用しています。
最新のEdge・Chrome・Firefox・Operaのみ確認しています。
なお、iPhoneやAndroidではplayVideo()が使えず、希望通りには動きません。

以下、自分用のメモも兼ねて、少し解説させていただきます。
意味がよく分からないと思いますが、ご容赦ください…。

解説

先に次の点を頭に入れておいてから、この先を読み進めてください。

  • 動画の指定方法はvideoIdで1つ指定する方法と、playlistで1つ以上指定できる方法がある
  • playerVarsではプレイヤーのオプションやplaylistの指定ができる

最初は「syuuphxさんのコードがそのまま動くので、それを参考にしてください」と書こうと思ったら、Edgeで動きませんでした。
というか公式の例をコピペしても、Edgeで動きませんでした……。

それで調べていくうちに、一筋縄ではいかないことが分かりました。

Edgeでの問題点・謎な点は、次のとおりです。

  • EdgeではonReadyonStateChangeなどのイベントが発火しない
  • Edgeで動画の自動再生とループを同時に実現するには、videoIdで動画を指定して、playlistでも動画を指定する必要がある
  • なぜかplayerVarsでは、Edgeのみがオプションを指定できる。しかも、なぜかマニュアルに書いていないmuteパラメーターが使えた

更に、Chrome・Firefox・Operaでも以下のような少し面倒なことがありました。

  • 自動再生をするにはplayer.playVideo()を実行する必要がある(これ単体では問題なし)
  • しかし、videoIdのみで動画を指定する場合は問題なく動くが、playlistのみを再生する場合にはplaylistを用意するのに時間がかかるため、playlistの準備が完了するのを待ってからplayer.playVideo()を実行しなければならない。
  • そして、動画のループをするにはplaylistを用意する必要がある。

これらを解決する方法は次のとおりです。

  • Edge用にplayerVarsでオプションを指定する
  • videoIdplaylistの両方で動画を指定する。(同じ動画を2つ用意することになる。)

関連

コード

akkkkinさんの要望

ランディングページを表示させた際、youtubeがオートで再生され、音はミュートの状態にしたく思っています。
1ページ上で再生させたい動画数は1つ、ミュートでループ再生を行いたいです。

最新のEdge・Chrome・Firefox・Operaのみ確認しています。
iPhoneやAndroidではplayVideo()が使えず、希望通りには動きません。

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"/> 5 </head> 6 <body> 7 <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 8 <div id="player"></div> 9 10 <script> 11 // 2. This code loads the IFrame Player API code asynchronously. 12 var tag = document.createElement('script'); 13 14 tag.src = "https://www.youtube.com/iframe_api"; 15 var firstScriptTag = document.getElementsByTagName('script')[0]; 16 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 17 18 // 3. This function creates an <iframe> (and YouTube player) 19 // after the API code downloads. 20 var player; 21 22 // 動画のID 23 const videoId = 'M7lc1UVf-VE'; 24 25 function onYouTubeIframeAPIReady() { 26 player = new YT.Player('player', { 27 height: '360', 28 width: '640', 29 playerVars: { 30 playlist: videoId, 31 // 以下のオプションはChrome・Firefox・Operaでは使えないが、なぜかEdgeでは使える 32 autoplay: 1, 33 mute: 1, 34 loop: 1 35 }, 36 videoId: videoId, 37 // イベントがEdgeで発火しない・・・? 38 events: { 39 'onReady': onPlayerReady, 40 'onStateChange': onPlayerStateChange 41 } 42 }); 43 } 44 45 // 4. The API will call this function when the video player is ready. 46 // ↑ 実際はプレイリストを読み込む場合は準備できていない。少し待たないといけない。 47 function onPlayerReady(event) { 48 event.target.mute(); // ミュート 49 event.target.setLoop(true); // ループ 50 event.target.playVideo(); // 動画の開始 51 } 52 53 // 5. The API calls this function when the player's state changes. 54 // The function indicates that when playing a video (state=1), 55 // the player should play for six seconds and then stop. 56 function onPlayerStateChange(event) { 57 } 58 </script> 59 </body> 60</html>

投稿2017/08/03 13:07

編集2017/08/04 07:55
coba-coba

総合スコア1409

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問