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

Question

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

1

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

weichao.x 02 нояб. 2017, в 09:25

Источник

0

Возможный дубликат Как я могу отобразить изображение, если браузер не поддерживает тег <video> в HTML5
bhansa 02 нояб. 2017, в 07:39
2

@bhansa здесь не тег, который не поддерживается, а медиа. Для OP, вы всегда можете прослушать событие error . Я думаю (не проверено), что плакат + onerror = e => this.src = "" сделает это.
Kaiido 02 нояб. 2017, в 07:54
1

О, на самом деле Safari не размещает постер снова, когда src сбрасывается ... Тогда вам, вероятно, придется заменить элемент видео на img напрямую ...
Kaiido 02 нояб. 2017, в 08:19

Показать ещё 1 комментарий

Теги:

javascript

html5

webm

1 ответ

Ещё вопросы

Возможный дубликат Как я могу отобразить изображение, если браузер не поддерживает тег <video> в HTML5
@bhansa здесь не тег, который не поддерживается, а медиа. Для OP, вы всегда можете прослушать событие error . Я думаю (не проверено), что плакат + onerror = e => this.src = "" сделает это.
О, на самом деле Safari не размещает постер снова, когда src сбрасывается ... Тогда вам, вероятно, придется заменить элемент видео на img напрямую ...

weichao.x · Accepted Answer · 2017-11-02T08-36-00.000Z

Как сказал @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>
     )
  }
}