如何在加载前预加载 html 页面或视频

Question

我只想知道，如何在 html 页面打开之前预加载 html 文件或视频。因为我想要一个男人。就像如果他打开网站并单击一个按钮，就会立即出现一个新页面并播放视频……我也想禁用视频控件……这可能吗？如果可能的话，怎么做？

Answer 1

这将允许在新页面上预加载和自动播放视频

/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>

或者，如果您只想像模式一样在同一页面上打开视频，则需要 javascript 和 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 和 chrome 浏览器阻止视频自动播放，除非它被静音。

如何在加载前预加载 html 页面或视频

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

html

video

preload