Question

我有2个视频。我要隐藏第二个视频。
我希望在第一个视频播放完后播放新视频，而无需下载。
从理论上讲，加载后应保留在缓存中，但浏览器会再次访问该目录。但是，在播放第二个视频之前，会出现一秒钟的黑屏。

let myvid = document.getElementById('my-player');
let myvid2 = document.getElementById('my-player2');

myvid.addEventListener('ended', function(e) {
  activeVideo = activeVideo++;

  myvid.src = myvid2.src;

  const playPromise = myvid.play();
  if (playPromise !== null) {
    playPromise.catch(() => {
      myvid.play();
    })
  }
});

.second {
  display: none;
}

<video id="my-player" class="video-js" controls preload="auto" poster="second.mp4" data-setup='{}'>
    <source src="1.MOV" type=" video/mp4"/>
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">
            supports HTML5 video
        </a>
    </p>
</video>
<section class='second'>
  <video id="my-player2" class="video-js" controls preload="auto" poster="second.mp4" data-setup='{}'>
    <source src="2.MOV" type=" video/mp4"/>
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">
            supports HTML5 video
        </a>
    </p>
</video>

如何消除黑屏？如果这不可能，那么如何在JS中合并两个视频？

是什么原因导致影片播放延迟？

0 个答案: