動態加載和自動播放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

在添加src 后使用.play() 。

 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>