Question

我试图通过动态添加视频标记和视频源（即touchstart）视频，在.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>

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

使用jquery动态添加视频而不是在移动设备上播放

1 个答案: