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>

回答1:

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)

回答2:

remove the autoplay in video tag. use code like this

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

it is 100% working

回答3:

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

回答4:

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

回答5:

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.

回答6:

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

回答7:

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"

回答8:

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

来源：https://stackoverflow.com/questions/19664622/disable-html5-video-autoplay

标签

html

video

autoplay