-1

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?

Suki
  • 11
  • 2

1 Answers1

2

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.

hanlia
  • 36
  • 3