Disable html5 video autoplay

Question

How can I disable html5 video autoplay?

what I\'ve tried:

Answer 1

Try adding autostart="false" to your source tag.

<video width="640" height="480" controls="controls" type="video/mp4" preload="none">
<source src="http://example.com/mytestfile.mp4" autostart="false">
Your browser does not support the video tag.
</video>

JSFiddle example

Answer 2

Indeed setting autoplay to false doesn't help some videos will play anyway. See this case in fiddle.

You might want to do by code something in the line of if you want to pause all the videos:

videos = document.querySelectorAll("video"); 
for(video of videos) {
  video.pause(); 
}

Of course the above case will not work if the video tag is in a shadow root element, but then hardly any general solution will work with shadow roots elements. There you will need a custom approach and expand first the shadow roots.

Answer 3

<video class="embed-responsive-item"  controls>
   <source src="http://example.com/video.mp4" autostart="false">
   Your browser does not support the video tag.
</video>

Answer 4

You can set autoplay=""

<video width="640" height="480" controls="controls" type="video/mp4" autoplay="">
<source src="http://example.com/mytestfile.mp4">
Your browser does not support the video tag.
</video>

ps. for enabling you can use autoplay or autoplay="autoplay"

Answer 5

just use preload="none" in your video tag and video will stop autoplay when the page is loading.

Answer 6

just put the autoplay="false" on source tag.. :)