CODEWITHSUNDEEP
jqueryhtml5-videoattr
Gregory Schultz
Gregory Schultz

Reputation: 856

How to automatically play a video when the URL is loaded into the player?

I'm having a problem with my code on cloning a url in a div into a video player. The problem I'm having is that it's suppose to automatically play when the URL is loaded. The URL is loaded but won't play.

How do you trigger the play button when a URL is loaded into a player?

JS Code:

$("#next-item").on("click", function() {
var mp3Url = $("#video-ID-1").data('rel');
    $("#video-to-play").attr('src', mp3Url);
    $('#video-to-play video').trigger('play');
});
video {width:480px;height:auto}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="next-item" class="button">Next</button>
<div id="video-ID-1" class="slider-slide-wrap video-post" data-rel="https://ia601401.us.archive.org/3/items/5sec-sound-test/5sec%20sound%20test.mov">
  <div class="media-contain">
    <video preload="auto" id="video-to-play" onloadstart="this.volume=0.5" src="#"></video>
  </div>
</div>

Upvotes: 0

Views: 1144

Answers (1)

pac421
pac421

Reputation: 66

Just remove the " video" in the jquery selector of the trigger. Like this :

$('#video-to-play').trigger('play');

You can also use the html "autoplay" attribute to always start the video automatically :

<video preload="auto" id="video-to-play" onloadstart="this.volume=0.5" src="#" autoplay></video>

Upvotes: 1

Related Questions