Disable html5 video autoplay

Question

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>

You deleted [this question](http://stackoverflow.com/q/19694776/827263) just as I was posting a comment. Did you solve the problem? Unless you're certain the question won't be useful to anyone else, you probably shouldn't delete it. — Keith Thompson, Oct 30 '13 at 22:40
@KeithThompson sorry. I thought it won't have any use. undeleted. — kkgzjjmj, Oct 30 '13 at 22:48

caulitomaz · Answer 1 · 2020-09-17T12:41:15.603

68

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:

edited Sep 17 '20 at 12:41

answered Oct 29 '13 at 17:09

caulitomaz

2,141
14
20

I tested my code, it doesn't autoplay. Are you sure you are not starting the video via javascript? – caulitomaz Oct 29 '13 at 19:55
I'm not sure why this didn't work for others, but this was the only thing that worked for me. – Jerreck Feb 04 '15 at 19:38
Happened to be the only solution that worked for me using a MP4 file that was hosted on AWS. Thanks! – Alex Williams Nov 16 '15 at 21:58
Facepalmed when this was the solution for mine as well. Had the "autoplay" in and tried everything....looked here...tried....facepalm and thoughts of yelling about wasted hour :) – Majestic12 Nov 14 '16 at 22:14
1

This answer is not correct. I'm not sure if the provided link at one point stated that the `autoPlay` attribute is not a type of boolean, but it actually does state it explicitly: "The autoplay attribute is a boolean attribute. When present, the user agent (as described in the algorithm described herein) will automatically begin playback of the media resource as soon as it can do so without stopping." This is similarly noted at W3C Schools: https://www.w3schools.com/tags/att_video_autoplay.asp – myermian Sep 14 '20 at 05:29
You are right, @myermian. It is a boolean attribute, it's just that the value "false" is set by omitting the attribute, per the spec (https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes) . Updating the answer. – caulitomaz Sep 14 '20 at 08:29

score 12 · Answer 2 · answered Dec 21 '15 at 14:43

12

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

answered Dec 21 '15 at 14:43

rsnr4u

141
1
2

score 5 · Answer 3 · answered Aug 06 '14 at 03:37

5

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

answered Aug 06 '14 at 03:37

anita

1,477
1
14
12

1

Here video is not playing just because it's not having autoplay in Video tag. I am not aware of 'autostart' but I guess it's not helping here. – Tushar Vaghela Sep 21 '17 at 03:45

Dhaval Mistry · Answer 4 · 2017-11-07T05:27:18.040

2

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

edited Nov 07 '17 at 05:27

answered Nov 06 '17 at 14:45

Dhaval Mistry

41
10

Eduard Florinescu · Answer 5 · 2018-02-09T09:09:45.713

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.

score 1 · Answer 6 · answered Feb 27 '21 at 07:12

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.

score 1 · Answer 7 · answered Apr 08 '21 at 20:05

1

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

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

answered Apr 08 '21 at 20:05

Mike

378
1
8

score 0 · Answer 8 · answered Sep 03 '18 at 07:56

0

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

answered Sep 03 '18 at 07:56

Harish Varaliya

11
2

Outdated syntax – umbriel Mar 27 '19 at 11:03

score 0 · Answer 9 · answered Nov 27 '22 at 18:37

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>

score -1 · Answer 10 · answered Jun 17 '16 at 19:27

-1

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"

answered Jun 17 '16 at 19:27

Reza

18,865
13
88
163

2

Video will autoplay even if we set autoplay="" or autoplay="false", If video tag has attribute autoplay it will autoplay. We can avoid playing video by removing autoplay attribute from video tag. – Tushar Vaghela Sep 21 '17 at 03:39

score -8 · Answer 11 · answered Mar 30 '14 at 06:20

-8

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

answered Mar 30 '14 at 06:20

DemOnyitO

13
1

That's what the person originally tried. The answer from @caulitomaz says that it you put the autoplay tag then it plays. – paulmorriss Apr 21 '15 at 11:32

Disable html5 video autoplay

11 Answers11

Linked