自動挿入されたvideoタグにjQueryでmutedを追加したいです。

Question

１．HTMLの<a>タグにmp4をリンク先にしています。
２．<a>タグをクリックすると<video>タグが自動で挿入されます。
3.この時にjQueryでvideoタグにmutedを追加したいと考えております。
おそらくmutedをつければ自動再生されるのでは・・・と思ってます。

下記のように書いてみましたが、駄目でしたので、ご教示して頂けると助かります。
宜しくお願いいたします。

※書き忘れましたが、
・chromeでは正常に動作します。
・Safariだと画面中央に小さい長方形が表示されこれをクリックすれば正常に再生されます。
（１回目のクリックで正常に再生させたいです）

・IE11だと「mp4を開くか、または保存しますか？」と表示され、再生がされない。
（再生されるようにしたいです。）

HTMLコード

    <div class="swiper-slide">
     <a href="movie/test.mp4" data-lity="data-lity">
     <img src="img/slider/test.png">
     </a>
    </div>

Jqueryコード

$(function(){
  $(document).on('click', '.swiper-slide a',function(){
   $('video').prop('muted',true);
    
   });
});

Answer 1

いろいろと勘違いされています。

まず、aタグについてです。
href属性でurlが設定されている以上、クリックすればそのページを開きにいきます。
今回の場合は movie/test.mp4 にページ遷移するので現在のページの処理は無視されます。
開いている現在のページで映像を表示させるようにするなら、この書き方ではダメです。

次にjQueryについてです。

$(function(){
  $(document).on('click', '.swiper-slide a',function(){
   $('video').prop('muted',true); //ここがvideoタグに消音を指定している

   });
});

jqueryの書き方自体に問題はありませんが、消音を指定するvideoタグがHTMLのどこにもありません。
その為、あらかじめvideoタグを挿入した後にこのコードを実行する必要があります。

こんな感じでどうでしょう

<div class="swiper-slide">
  <a data-lity="data-lity"> <!-- リンクであるhrefは消します -->
    <img src="img/slider/test.png">
  </a>
</div>

$(function(){
  $('.swiper-slide a').on('click',function(){  
    $(this).after('<video controls autoplay>'); //videoタグをaタグの次に追加
    $('video').append('<source src="movie/test.mp4">'); //videoタグの中にsourceタグを追加
    $('video').prop('muted',true); //追加した
  });
});

20200817修正、lity.js が使用されている前提

lity.jsを詳しくは知りませんが、画面に挿入される動画は iframe によって表示されます。
なので iframe の中に存在する video 要素に対して消音を設定する必要があります。

その際に前提として、iframe の中の要素を操作する場合、
iframe で開かれるファイルが同じサーバー上に存在していなければならないので注意してください。

いろいろサイトを調べてみるとlity.jsに限らず、
videoの自動再生についてはブラウザによってかなり挙動が怪しいようです。
IE11については場合によってはあきらめた方がいいかもしれません…。
少なくとも自分では解決できそうにないです。

それではコードです。

$(function(){
    $('.swiper-slide a').on('click',function(){
        setTimeout(function(){
            $('iframe').contents().find('video').get(0).muted = true;
            /*
              $('iframe').contents().find('video').get(0).play();
              $('iframe').contents().find('video').get(0).pause();
              $('iframe').contents().find('video').get(0).currentTime = 0;
              setTimeout(function(){ $('iframe').contents().find('video').get(0).play(); },500);
            */
        },1000);
    });
});

とりあえずこれが正しいやり方とは思いませんが、
aタグをクリックしてすぐはまだvideo要素が追加されていません。
その為、iframeとvideoが出力されるのを setTimeout関数を使って待ちます。
この例では 1000ms 待たせています。

もし、消音を実行しても症状が改善されなかった場合、
コメントアウトを解除して追加の4行も実行させてみてください。

こちらではコメントアウトを解除すると…

1. ミュートにする
2. 再生する
3. 一時停止する
4. 再生時間を初期化
5. 500ms後に再生する

が実行されます。
Javascript側からの命令で動画を動かしてみる、ということですね。

こちらで上手くいかないとなると、申し訳ないですが自分はお手上げです。

Comments

[mabo1114mo]

ありがとうございます。

頂いたコードで試した所、動画再生の画面が２つ（videoタグが２つ）出てしまいました。

jQueryで挿入したのとは別のもう１つのvideoタグですが、lity.jsの仕様なのか<a>タグのhrefにmp4を指定してからクリックすると自動で挿入されるようです。
可能であれば、自動で挿入されるvideoタグにmutedを入れたいのですが、可能でしょうか？

[phiar_poet]

最初の質問で lity.js を使用している旨が特に記載されていなかったので分かりませんでしたが、
そもそも lity.js によって追加された要素に対して muted を設定したいという話なのですね？

そうするとまた別の処理が必要になります。
lity.js で挿入されるのは iframe であり、その中に video が存在しています。

mutedを指定することで他のブラウザで動くようになるとは限りませんが
回答を編集いたしますのでしばらくした後にご確認ください。

[mabo1114mo]

お世話になります。
情報の提供不足で申し訳ありませんでした。
無事、コメントアウトせずに希望通りの動作が確認できました。
困っておりましたので、本当に助かりました。
ありがとうございます。