CODEWITHSUNDEEP
htmlvideohtml5-videoautoplay
kkgzjjmj
kkgzjjmj

Reputation: 537

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>

Upvotes: 50

Views: 196164

Answers (11)

az_
az_

Reputation: 43

I wanted autoplay="false" in edit-mode but autoplay="true" in viewer-mode and solved it by adding the attibute via jQuery only in viewer-mode:

<video id="vid" class="my-vid" poster="https://poster-url/poster.jpg"
     loop="loop" controls="controls" width="100%" height="100%">
     <source src="https://video-url/vision.mp4" type= "video/mp4" />
</video>

<script type="text/javascript">
        if (document.location.href.indexOf('domain') > -1 ||
            document.location.href.indexOf('test') > -1) {
    
            $(document).ready(function() {
                $('video').attr('autoplay','autoplay')
         
            });
        }   

    </script>

Upvotes: 0

Mike
Mike

Reputation: 423

To disable autoplay, you have to REMOVE autoplay attribute completely.

Otherwise it will be interpreted as autoplay=true. Quite unobvious!

Upvotes: 3

Stokely
Stokely

Reputation: 15789

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.

Upvotes: 1

caulitomaz
caulitomaz

Reputation: 2331

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:

Upvotes: 73

Harish Varaliya
Harish Varaliya

Reputation: 11

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

Upvotes: 0

Eduard Florinescu
Eduard Florinescu

Reputation: 17511

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.

Upvotes: 2

Dhaval Mistry
Dhaval Mistry

Reputation: 41

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

Upvotes: 2

Reza
Reza

Reputation: 19843

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"

Upvotes: -1

rsnr4u
rsnr4u

Reputation: 141

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

Upvotes: 12

anita
anita

Reputation: 1637

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

Upvotes: 5

DemOnyitO
DemOnyitO

Reputation: 11

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

Upvotes: -9

Related Questions