动态加载和自动播放 HTML5 视频

Question

我正在尝试从 data-src 获取视频 URL，并将其添加到我的视频的 src。当我窥探页面代码但视频没有显示在页面上并播放时，我有很多工作。我正在使用 jQuery，因为我还有一些其他代码使用它来运行某些功能。

标记：

<video autoplay="autoplay" loop="loop" poster="/assets/video/bg-ss-vid.jpg">
    <source type="video/mp4" data-src="/assets/video/bg-ss-vid.mp4">
</video>

jQuery:

jQuery(document).ready(function ($) {
    "use strict";

    $("#site-hero video").each(function () {
        $('source', $(this)).attr("src", $('source', $(this)).data('src'));
        $('source', $(this)).removeAttr('data-src');
    });
});

如何在src 加载后显示/播放视频？

Answer 1

使用.play()在添加它是src。

jQuery(document).ready(function($) {
  "use strict";

  $("video").each(function() {
    var $source = $(this).find('source');
    var src = $source.attr('data-src');
    
    $source.removeAttr('data-src');
    $source.attr('src', src);
    $source.detach().appendTo($(this))
    
    $(this).get(0).play();
  });
});

video {
  width: 420px;
  height: 230px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video loop="loop" poster="http://placehold.it/420x230">
    <source type="video/mp4" data-src="http://techslides.com/demos/sample-videos/small.mp4">
</video>