使用 jquery 动态添加的视频不在移动设备上播放答案

【问题标题】：Dynamically added videos using jquery not playing on mobile使用 jquery 动态添加的视频不在移动设备上播放
【发布时间】：2018-03-25 07:29:24
【问题描述】：

我试图通过动态添加视频标签和视频源（.webm）视频在touchstart 事件上点击该屏幕时显示视频预览，并将开始自动播放。我可以获取视频标签，但没有播放视频。这是我的代码：

<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？
视频播放有限制，特别是手机自动播放，出于数据消耗的原因，more details here
你好@chade_ 是的，id 正确返回。顺便说一句，我把它修好了

标签： javascript jquery video.js video-player

【解决方案1】：

我解决了这个问题，需要添加这个：

<video autoplay loop muted playsinline></video>

我的视频已经静音，但我不知道为什么它不起作用。我必须检查我的编码器。

【讨论】：