HTML5 视频在加载新视频时会改变宽度/高度或出现故障？答案

【问题标题】：HTML5 video changes width/height or glitches when loading new video?HTML5 视频在加载新视频时会改变宽度/高度或出现故障？
【发布时间】：2019-10-17 12:53:24
【问题描述】：

我正在尝试获取它，以便 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>

如何使播放器看起来流畅并简单地重播，而播放器不会消失，然后在重新加载和播放视频时重新出现？

【问题讨论】：

我无法在最新的 Google Chrome 上重现该问题（尽管使用的是 mp4 视频而不是 webm）：jsFiddle。
在该示例中，视频本身在加载新视频时会更改其高度和宽度。有没有办法防止这种情况发生？
我想澄清的一件事是现在播放器控制器没有移动，但视频本身变得缺乏，调整大小，然后又回到原来的大小。有没有办法在不发生这种情况的情况下顺利过渡到下一个视频（加载）？

标签： javascript html video

【解决方案1】：

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

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

【讨论】：

无论是否使用px后缀，实际上都应该将其理解为像素。

【解决方案2】：

您可以在视频加载后使用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();

【讨论】：