CODEWITHSUNDEEP
javascriptjqueryhtml
Sandeep Shah
Sandeep Shah

Reputation: 169

Disable autoplay and show controls with HTML5 video

I have an HTML5 video which works, but the problem that I have is that whenever I go to the video in the browser - it starts playing immediately. How can I disable the autoplay function? I've tried it with the attribute autoplay="false", but no results.

And the controls is always hidden and I must right click and click on "show controls" for the controls to popup. I also tried enabling this with: showcontrols="true", but no reaction there too.

All help is appreciated. Below is my code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>hls.js</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .hlsjs {
                position: relative;
                width: 70%;
            }
            .ratio {
                position: absolute;
                padding-top: 75%;
            }
            video {
                background-color: #ccc;
                width: 100%;
            }
        </style>
        <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
        <script>
            window.onload = function() {
                if (Hls.isSupported()) {
                    var video1 = document.getElementById("video1");
                    hls1 = new Hls({
                        debug : true
                    }), hls1.on(Hls.Events.MEDIA_ATTACHED, function() {
                        hls1.loadSource("http://fdfasd.com/fdsa.m3u8");
                    });
                    hls1.attachMedia(video1);
                }
            };
        </script>
    </head>
    <body>
        <h1>hls.js</h1>
        <h2>First instance</h2>
        <div class="hlsjs">
            <video id="video1" autoplay="false" showcontrols="true"></video>
            <div class="ratio"></div>
        </div>
    </body>
</html>

Upvotes: 2

Views: 6556

Answers (3)

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(); 
  video.controls = true
}

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: 1

evolutionxbox
evolutionxbox

Reputation: 4122

If you specify the autoplay attribute the video will play automatically, even if it's false. Which can be seen here:

<video src="http://vjs.zencdn.net/v/oceans.mp4" autoplay="false"></video>

Also, the showcontrols attribute should actually be controls.

So the desired HTML will be:

<video id="video1" controls></video>

Sources:

Upvotes: 9

torox
torox

Reputation: 490

You have to remove it completely. The tag attribute doesn't take a boolean but is a switch itself. This will remove autoplay but still show controls

<video
  id="video1" 
  controls 
  src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4">
</video>

Upvotes: 1

Related Questions