CODEWITHSUNDEEP
javascriptjqueryvideohtml5-videoautoload
tylorreimer
tylorreimer

Reputation: 79

Dynamically loading and autoplaying HTML5 video

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.

Markup:

<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');
    });
});

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

Upvotes: 0

Views: 2253

Answers (1)

apires
apires

Reputation: 927

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>

Upvotes: 3

Related Questions