如何在更改其属性时避免更改视频高度

Question

点击按钮改变视频poster和src属性
点击后视频高度变为0 - 一小段时间 - 但足以在整个页面上产生丑陋的效果
如何避免这种情况？
注意 - lorem.mp4 和 ipsum.mp4 具有相同的分辨率和尺寸

<video class='vtop' id='player' controls poster='lorem.jpg'>
<source src='lorem.mp4' type='video/mp4'>
</video>

js

var player = $('#player');
$('button').on('click', function(){
    player.attr('poster', 'ipsum.jpg');
    player.attr('src', 'ipsum.mp4');
    player[0].play();
});

Answer 1

我尝试了您的代码并向其中添加了一个 css 文件并给视频一个固定高度：

video {
  height: 400px;
}

我觉得够用了，点击按钮没看到什么特殊效果。

Answer 2

高度会发生变化，因为您的视频播放器高度取决于视频高度。当您更改src 时，视频播放器的高度也会发生变化。您需要做的只是为您的video 标签指定height。