javascript - 移动浏览器不支持 WebM 视频时的后备图像

Question

我有一个使用移动浏览器的 WebM 视频。当这些浏览器不支持WebM时，我想显示图像:

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

但在 iOS 的移动 safari/chrome/firefox 浏览器中，它显示黑色背景并带有无法播放图标。它不会像我预期的那样回退显示图像。

我还尝试将 poster 属性添加到 video 标记:

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

还有这个:

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

这也不起作用。

任何人都知道如何在浏览器不支持 WebM 时显示图像。

Answer 1

如@Kaiido说的是，支持的不是标签而是媒体，大多数移动浏览器在重置 src 后不会再次放置海报。

所以我必须直接替换图像。

我使用 React 作为我的堆栈，这是我的解决方案:

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