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

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

1 个答案: