質問: 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つ、ミュートでループ再生を行いたいです。 詳しい方がいらっしゃればご教示いただきたく思います。
回答: 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では`onReady`や`onStateChange`などのイベントが発火しない * Edgeで動画の自動再生とループを同時に実現するには、`videoId`で動画を指定して、`playlist`でも動画を指定する必要がある * なぜか`playerVars`では、Edgeのみがオプションを指定できる。しかも、なぜかマニュアルに書いていない`mute`パラメーターが使えた 更に、Chrome・Firefox・Operaでも以下のような少し面倒なことがありました。 * 自動再生をするには`player.playVideo()`を実行する必要がある(これ単体では問題なし) * しかし、`videoId`のみで動画を指定する場合は問題なく動くが、`playlist`のみを再生する場合には`playlist`を用意するのに時間がかかるため、`playlist`の準備が完了するのを待ってから`player.playVideo()`を実行しなければならない。 * そして、動画のループをするには`playlist`を用意する必要がある。 これらを解決する方法は次のとおりです。 * Edge用に`playerVars`でオプションを指定する * `videoId`と`playlist`の両方で動画を指定する。(同じ動画を2つ用意することになる。) 関連 * iframe 組み込みの YouTube Player API リファレンス * YouTube 埋め込みプレーヤーとプレーヤーのパラメータ * AutoPlay Not working properly * YouTube player iframe API: playVideo doesn't work on Firefox 9.0.1 * Youtube iframe api not playing video on Edge / IE コード akkkkinさんの要望 > > ランディングページを表示させた際、youtubeがオートで再生され、音はミュートの状態にしたく思っています。 > > 1ページ上で再生させたい動画数は1つ、ミュートでループ再生を行いたいです。 > > > 最新のEdge・Chrome・Firefox・Operaのみ確認しています。 iPhoneやAndroidでは`playVideo()`が使えず、希望通りには動きません。 ``` ```