1

I have a WebM video using the mobile browser. When these browsers don't support WebM, I want to show an image:

<video
  src={video}
  autoPlay>
  <img src={poster} />
</video>

But in mobile safari/chrome/firefox browser in iOS, It shows a black background with an can't play icon. It doesn't fallback to show an image as I expect.

And I also try to add poster attribute to video tag:

<video
  poster={poster}
  src={video}
  autoPlay>
  <img src={poster} />
</video>

And this:

<video
  loop
  autoPlay>
  <source src={video} type="video/webm" />
  <img src={poster} style={{ width: '100%', height: '100%' }} />
</video>

It doesn't work, either.

Anyone have a clue on how to show an image When the browser doesn't support WebM.

weichao.x
  • 315
  • 1
  • 13
  • Possible duplicate of [How can I display an image if browser does not support HTML5's – bhansa Nov 02 '17 at 07:39
  • 2
    @bhansa here it's not the tag that is not supported but the media. To OP, you could always listen to the `error` event. I guess (not tested) that the poster + `onerror = e => this.src = ""` would do it. – Kaiido Nov 02 '17 at 07:54
  • 1
    Oh actually Safari doesn't place the poster again when the src is reset... You'll then probably have to replace your video element with an img directly... – Kaiido Nov 02 '17 at 08:19

1 Answers1

0

As @Kaiido said, It's not the tag that supported but the media, and most mobile browsers don't place the poster again when then src is reset.

So I have to replace the image directly.

I use React as my stack, here is my solution:

class App extends PureComponent {
  state = {
    isSupportWebM: true,
  }

  componentDidMount(){
    const videoElement = document.querySelector('.video');
    videoElement.addEventListener('error', () => {
      this.setState({
        isSupportWebM: false,
      });
    });
  }

  componentWillUnmount(){
    // remove the listener
  }

  render(){
     const {
       isSupportWebM,
     } = this.state;
     return (
       <div>
         {
           isSupportWebM
           ? <video src={...}></video>
           : <img src={...} />
         }
       </div>
     )
  }
}
weichao.x
  • 315
  • 1
  • 13