HTML5 Video poster attribute in Safari and Chrome

user_294089 0
Viewed 19538

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 and Chrome) the poster is dumped in favor of the first frame from the video as soon as the video metadata is fetched.

I want to avoid having to place the poster on top of the video element manually if I could. Does anyone know of a fix for this? 

<video src="some_url" poster="images/poster.jpg">
    <source type="video/ogg" src="some_url" />
</video>
webkit css html javascript
4 Answers

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 <video preload="metadata"> 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;

user_127421360

You can try the following code.

<video src="video/video.mp4#t=0.5" playsinline controls preload="metadata">
      <source src="video/video.mp4#t=0.5" type="video/mp4">
</video>
user_146113090
Related