[html] Disable html5 video autoplay

How can I disable html5 video autoplay?

what I've tried:

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

I'd remove the autoplay attribute, since if the browser encounters it, it autoplays!

autoplay is a HTML boolean attribute, but be aware that the values true and false are not allowed. To represent a false value, you must omit the attribute.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

Also, the type goes inside the source, like this:

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

References:

• http://www.w3.org/TR/html-markup/video.html
• HTML Spec (boolean attributes)

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

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

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.

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"

Remove ALL attributes that say autoplay as its presence in your tag is a boolean shorthand for true.

Also, make sure you always use video or audio elements. Do not use object or embed as those elements autoplay using 3rd part plugins by default and cannot be stopped without changing settings in the browser.

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

remove the autoplay in video tag. use code like this

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

it is 100% working