Question

我正试图让HTML5视频播放器顺利加载并转换到另一个视频或播放视频。但是，当它重新加载文件时，视频会消失然后重新出现。我不希望这种情况发生。这是我的代码：

 <!DOCTYPE html> 
 <html> 
 <head></head>
 </head>
 <body> 
 <video id="myVideo" width="320px" height="240px" autoplay controls onended="replay()">
     <source src="capture.webm" type="video/webm">
 </video>
 <script>
     var vid = document.getElementById('myVideo');
     function replay()
     {
        vid.src = "capture.webm";
        vid.load();
        vid.play();
     }
 </script>
 </body> 
 </html>

我如何让播放器看起来流畅，只是重播而播放器不会消失，然后在重新加载并播放视频时重新出现？

Answer 1

在加载视频后，您可以使用video.videoHeight来获取视频的大小，但是我发现某些资源在加载后无法获取videoHeight事件。

这是示例：

const video = document.getElementById('video');
video.addEventListener('canplay', () => {
  console.log(video.videoHeight); // some resources can not get this value
});
video.src = RESOURCE_ADDRESS;
video.load();

Answer 2

我在标记中看到的一个问题是宽度和高度属性中的单位。尝试不使用px单元。视频播放器默认将其视为像素。如果宽度和高度未设置或不正确，您会看到闪烁或更改大小。

 <video id="myVideo" width="320" height="240" autoplay controls onended="replay()">
      <source src="capture.webm" type="video/webm">
 </video>

HTML5视频在加载新视频时会改变宽度/高度或毛刺？

2 个答案: