Javascript 移动浏览器不'；不支持WebM视频

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

<video
  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时，任何人都知道如何显示图像。

如前所述，支持的不是标签，而是媒体，大多数移动浏览器在重置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>
     )
  }
}

类应用程序扩展了PureComponent{
状态={
isSupportWebM：是的，
}
componentDidMount（）{
const videoElement=document.querySelector（'.video'）；
videoElement.addEventListener（'error'，（）=>{
这是我的国家({
isSupportWebM:false，
});
});
}
组件将卸载（）{
//删除侦听器
}
render（）{
常数{
isSupportWebM，
}=本州；
返回(
{
isSupportWebM
? 
: 
}
)
}
}

如前所述，支持的不是标签而是媒体，大多数移动浏览器在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>
     )
  }
}

类应用程序扩展了PureComponent{
状态={
isSupportWebM：是的，
}
componentDidMount（）{
const videoElement=document.querySelector（'.video'）；
videoElement.addEventListener（'error'，（）=>{
这是我的国家({
isSupportWebM:false，
});
});
}
组件将卸载（）{
//删除侦听器
}
render（）{
常数{
isSupportWebM，
}=本州；
返回(
{
isSupportWebM
? 
: 
}
)
}
}

此处@bhansa的可能重复项不支持的不是标签，而是媒体。要执行操作，您可以始终收听

错误

事件。我猜（未测试）poster+

onerror=e=>this.src=”“

可以。哦，实际上，当src重置时，Safari不会再次放置海报。。。然后，您可能需要直接用img替换您的视频元素…这里可能是@bhansa的副本。不支持的不是标签，而是媒体。要执行操作，您可以始终收听

错误

事件。我猜（未测试）poster+

onerror=e=>this.src=”“

可以。哦，实际上，当src重置时，Safari不会再次放置海报。。。然后你可能需要直接用img替换你的视频元素。。。