Search code examples
htmlvideopreload

How to preload a html page or a video before it loads


I just wanna know, how to preload a html file or a video in html before that page is opened. Because I wanna a guy. Like if he opens the site and click a button, immediately a new page would come and play the video... Also I wanna disable the video controls too... Is it possible? and if possible, how to do it?


Solution

  • This will allow preload and autoplay the video on a new page

    /index.html

    <a href="/video.html" target="_blank">Click to play</a>
    

    /video.html

    <video width="320" height="240" autoplay muted preload="auto">
      <source src="movie.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    

    or if you just want to open the video on the same page like a modal you'll need javascript and css

    /index.html

    <style>
        #modal{
            display:none;
            position:absolute;
            z-index:10;
            top:20;
            left: 50%;
            transform: translate(-50%, 0);
            background: black;
        }
    </style>
    <body>
        <button id="playBtn">Click to play</button>
        <div id="modal">
        <video id="vid" width="320" height="240" autoplay muted preload="auto">
          <source src="video.mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
        </div>
        <script>
            document.querySelector('#playBtn').addEventListener('click',function(){
                document.querySelector('#modal').style.display = 'block';
                document.getElementById('vid').play();
            })
      </script>
    </body>
    

    Safari and chrome browsers blocks video autoplay unless it is muted.