HTML5 Video poster attribute in Safari and Chrome

Question

In Firefox the image specified by the poster attribute of the VIDEO tag remains on screen until the play button is pressed. However in the Webkit browsers (Safari a

Answer 1

It's 2020 Jan. so you may figure out the solution. but I left my solution for other people. Many people say it's a bug. but I disagree. It's just a difference between firefox and chrome/edge.

Suppose you have in your HTML and post to the server thumbnail image. then you'll change the poster value to the src server gives to you. like this:

xhr.addEventListener("load", function() {
    if (this.status === 200) {
      const data = JSON.parse(this.responseText);
      player.poster = `/image/${data.thumbnailMain}`; // change the poster value
      player.load();                                  // then load.
    } else {
      console.error(this.responseText);
    }
  });

In firefox, video tag is designed when poster property value changes, it will load automatically. but chrome/edge won't load(); so you should player.load() manually;