モバイルで再生していないjqueryを使用して動画を動的に追加しました

Question

動画のタグと動画のソース（.webm）の動画を動的に追加して、その動画の一部を画面上でタッチして表示しようとしています。私はビデオタグを取得できますが、ビデオは再生されません。

<div class="thumb-overlay playthumb"> 
    <img src="http://img.domain.com/thumbs/2.jpg" title="" alt="" id="2" class="img-responsive "> 
    <div class="duration">15:11</div> 
</div> 
<script type="text/javascript"> 
$(document).ready(function(e) { 
    $(".playthumb").on('touchstart', function(event) { 
     var thumb = $(this).children('img')[0]; 
     var id = thumb.id; 
     $('#thumbPlayerM').remove(); 
     var video = $('<video style="width:100%;height:100%;position:absolute;top:0;left:0;padding:0;margin:0;" id="thumbPlayerM" class="img-fluid" loop=""></video>'); 
     var content = '<source type="video/webm" src="http://img.domain.com/webm/' + id + '/' + id + '.webm"></source>'; 
     $(video).append(content); 
     $(video).hide(); 
     var target = $("#" + id); 
     $(target).after($(video)); 
     $(video)[0].play(); 
     $(video).fadeIn(); 
    }); 
}); 
</script> 

私もビデオ画像の上に来たが再生されていないにも

var vid = $("#thumbPlayerM"); 
vid.play(); 
$(video).fadeIn(); 

これを試してみてください。 はここに私のコードです。誰でも私を助けることができますか？ありがとうございました。

Answer 1

が、私はこれを追加する必要があり、この問題を修正：

<video autoplay loop muted playsinline></video> 

マイ動画はすでにミュートされているが、私はそれが働いていなかった理由はわかりません。エンコーダをチェックする必要があります。