CODEWITHSUNDEEP
javascripthtml
Gaz Smith
Gaz Smith

Reputation: 1108

HTML5 video not autoplaying from javascript

I have an html5 video I am using javascript to load and play but since using this method the video will not autoplay. If I do not load and start using javascript the video doesn't always load it seems to be a 50/50 chance whether or not it is a black screen or it actually loads. Is there a way to autoplay from javascript?

$(document).ready(function() {
  var video = document.getElementById('video');
  var mp4 = document.getElementById('mp4');

  mp4.src = 'promo2.mp4';

  video.load();
  video.play();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divVideo" style="margin-top:30px;">
  <video id="video" controls autoplay width="560">
    <source id="mp4" type="video/mp4" />
  </video>
</div>

Upvotes: 0

Views: 2655

Answers (2)

Nimitt Shah
Nimitt Shah

Reputation: 4587

Set autoplay property to true in your javascript.

See the Snippet below:

$( document ).ready(function() {
    		var video = document.getElementById('video');
        	var mp4 = document.getElementById('mp4');
    	
        	mp4.src = 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_10mb.mp4';
    	    video.autoplay = true;
        	video.load();
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divVideo" style="margin-top:30px;">
    <video id="video" controls autoplay width="560">
        <source id="mp4" type="video/mp4" />
    </video>
</div>

Upvotes: 0

Francis Malloch
Francis Malloch

Reputation: 1094

I believe that Chrome has blocked auto-playing videos from javascript, or at least has blocked auto-playing videos with audio. Try muting the video and then autoplay it. Add these HTML tags to the video element.

playsinline autoplay muted loop

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Upvotes: 5

Related Questions