How to add autoplay attribute in html5 video player

Question

I want to add an attribute autoplay to a <video></video> element, when a specific target button is clicked.

HTML

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

I tried with jQuery:

$('.targetButton').on('click', function(){
  $('video').attr("autoplay"," ");
});

... but the video does not play. What am I doing wrong?

Answer 1

Setting the autoplay flag is not enough to make the video play, you should call the load() method right after setting autoplay to true so that the video will reload and then play, since the flag is true.

$('video').autoplay = true;
$('video').load();

But why do this when you can actualy play the video with JS? Here's how to do it with jQuery:

$('video').play();