0

here is a live example - https://abuena.net/_livex/02/

when the first video is finished and the second is started player changes its height, producing a flickering effect.

how to avoid this?

both videos are of the same dimensions and resolution
pls check console

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;
};
qadenza
  • 9,025
  • 18
  • 73
  • 126

1 Answers1

1

You may find that the effect you are seeing will be different on different browsers and browser versions, but one way that does not seem to suffer from that resizing step, for use cases I have seen at least, is to use two video players on your page.

The first player plays the initial video and is visible while the second one, placed at exactly the same place on the page, is preloaded and paused but not made visible.

When you switch to the second video, you make the first video element invisible on the page and the second one visible. You can then preload your next video in the invisible one again if you have multiple videos to play.

You can see an example in the snippet in this answer: https://stackoverflow.com/a/58269415/334402

Mick
  • 24,231
  • 1
  • 54
  • 120
  • hmm... thanks but two videos is just an example, in reality I have 20+ of them and want to play them all on the same player. I suppose it would be too heavy for a page to have 20 videos stacked and preloaded – qadenza Feb 20 '21 at 11:51
  • 1
    You just need two players with this approach - one for the video current playing and one for whichever one is next in your playlist. – Mick Feb 21 '21 at 17:26