使用jquery动态添加视频不在手机上播放

问题描述：

我试图通过动态添加视频标签和视频源（它是.webm）视频并开始自动播放时，某人在该屏幕上触摸某个人在touchstart事件上显示视频预览。我可以获取视频标签，但视频不会播放。这里是我的代码：使用jquery动态添加视频不在手机上播放

<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();

视频即将在图像上，但不是在玩。任何人都可以帮助我？谢谢。

行'var id = thumb.id;'正确返回'id'？ –

由于数据消费的原因，在手机上播放视频和特别自动播放存在限制，[更多详情]（https://stackoverflow.com/questions/42160528/html5-autoplay-video-in-mobile-device#42161532） – Kaddath

你好@chade_是的，id正确返回。顺便说一句，我弄明白了 – Apurba

答

我解决了这个问题，需要补充一点：

<video autoplay loop muted playsinline></video>

我的影片已静音，但我不知道为什么它不工作。我必须检查我的编码器。

使用jquery动态添加视频不在手机上播放

相关推荐