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

Question

I am trying to grab a video URL from data-src and add it to src for my video. I have that much working when I snoop the page code but the video isn't showing up on the page and playing. I'm using jQuery since I have a few other bits of code using it to run some functionality.

<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(document).ready(function ($) {
    "use strict";

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

How do I get it to show up / play the video after the src has been loaded?

Answer 1

Use .play() after adding it's 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>