Javascript HTML5视频在加载新视频时更改宽度/高度或出现故障？_Javascript_Html_Video

Javascript HTML5视频在加载新视频时更改宽度/高度或出现故障？

javascript html video

Javascript HTML5视频在加载新视频时更改宽度/高度或出现故障？,javascript,html,video,Javascript,Html,Video,我正试图让HTML5视频播放器平稳地加载和转换到另一个视频或播放视频。但是，当它重新加载文件时，视频会消失，然后重新出现。我不想那样。这是我的密码： <!DOCTYPE html> <html> <head></head> </head> <body> <video id="myVideo" width="320px" height="240px" autoplay controls onended=

我正试图让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>


var vid=document.getElementById（'myVideo'）；
函数replay（）
{
vid.src=“capture.webm”；
参阅load（）；
视频播放（）；
}

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

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

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

加载视频后，您可以使用

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();

我无法在最新的Google Chrome上重现这个问题（尽管使用的是

mp4

视频，而不是

webm

）：。在这个例子中，视频本身在加载新视频时会改变其高度和宽度。有没有办法防止这种情况发生？我想澄清的一件事是，现在播放器控制器不动了，但视频本身变为空白，调整大小，然后恢复到原来的大小。有没有一种方法可以平稳地过渡到下一个视频（加载）而不发生这种情况？不管是否使用

px

后缀，它实际上应该理解为像素。