如何在更改源时保持视频高度

Question

这是一个活生生的例子 - https://abuena.net/_livex/02/

当第一个视频结束并开始第二个视频时，播放器会改变高度，产生闪烁效果。

如何避免这种情况？

两个视频的尺寸和分辨率相同
请检查控制台

html

<video class='player' id='player' src='01.mp4' controls></video>

css

.player{
    display:block;
    width:100%;
    margin:0 auto;
    outline:none;
}

js

var player = document.getElementById('player');

player.onended = function(){
    if(this.getAttribute('src') == '01.mp4'){
        console.log(this.clientHeight);
        this.setAttribute('src', '02.mp4');
        this.play();
        console.log(this.clientHeight);
    }
    else{
        this.setAttribute('src', '01.mp4');
        this.load();
    }
};

window.onload = function() {
    let x = player.clientHeight;
    console.log(x);
    player.clientHeight = x;
};

Answer 1

您可能会发现您看到的效果在不同的浏览器和浏览器版本上会有所不同，但是至少对于我见过的用例来说，一种似乎不会受到调整大小步骤影响的方法是使用您页面上的两个视频播放器。

第一个播放器播放初始视频并且可见，而第二个播放器位于页面上完全相同的位置，预加载并暂停但不可见。

切换到第二个视频时，第一个视频元素在页面上不可见，而第二个视频元素可见。如果您有多个视频要播放，则可以再次在不可见视频中预加载下一个视频。

您可以在这个答案的片段中看到一个示例：

如何在更改源时保持视频高度

how to keep video height while changing its source

javascript

video