移动浏览器不支持 WebM 视频时的回退图像

Question

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

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

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

我也尝试将 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>
     )
  }
}

移动浏览器不支持 WebM 视频时的回退图像

Fallback image when mobile browser don't support WebM video

javascript

html

webm