Safari 和 Chrome 中的 HTML5 视频海报属性

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 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>

Answer 1

It seems that WebKit strips the attribute as soon as the video is fethced, because iOS 3.x for Iphone and Ipad has a serious bug where it is not possible to play the video at all when there is a poster attribute specified. This was fixed in iOS 4, but the workaround still stays, even in Safari 5...There are a lot of users who didn't upgrade to iOS 4 yet, so no luck with the poster...

I'm going to try and position the image absolutely over the video using Javascript, and removing it when the video is played - that seems like the best solution...

Answer 2

If you can get away with not preloading the video you can set preload="none" on the video element. In Safari this results in the poster being displayed.

Safari on iOS probably sets preload="none" as the default to save bandwidth, while the desktop version preloads unless you explicitly tell it not to.

Answer 3

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;