Disable autoplay and show controls with HTML5 video
<p>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 <code>autoplay="false"</code>, but no results.</p>

<p>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: <code>showcontrols="true"</code>, but no reaction there too.</p>

<p>All help is appreciated. Below is my code</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;hls.js&lt;/title&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;style&gt;
            .hlsjs {
                position: relative;
                width: 70%;
            }
            .ratio {
                position: absolute;
                padding-top: 75%;
            }
            video {
                background-color: #ccc;
                width: 100%;
            }
        &lt;/style&gt;
        &lt;script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"&gt;&lt;/script&gt;
        &lt;script&gt;
            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);
                }
            };
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;hls.js&lt;/h1&gt;
        &lt;h2&gt;First instance&lt;/h2&gt;
        &lt;div class="hlsjs"&gt;
            &lt;video id="video1" autoplay="false" showcontrols="true"&gt;&lt;/video&gt;
            &lt;div class="ratio"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>