Резервное изображение, если мобильный браузер не поддерживает видео WebM

У меня есть видео 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.


javascript html webm
person weichao.x    schedule 02.11.2017    source источник
comment
Возможный дубликат Как Могу ли я отобразить изображение, если браузер не поддерживает тег HTML5 ‹video›   -  person bhansa    schedule 02.11.2017
comment
@bhansa здесь не поддерживается не тег, а носитель. Для OP вы всегда можете прослушать событие error. Я предполагаю (не проверено), что плакат + onerror = e => this.src = "" сделает это.   -  person Kaiido    schedule 02.11.2017
comment
О, на самом деле Safari не размещает плакат снова, когда src сброшен ... Тогда вам, вероятно, придется заменить свой видеоэлемент непосредственно на img ...   -  person Kaiido    schedule 02.11.2017

Ответы (1)


arrow_upward
0
arrow_downward

Как сказал @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>
     )
  }
}
person weichao.x    schedule 02.11.2017