Reactjs: видео автозапуска не работает хром и сафари?

Question

Я хочу сделать автозапуск видео без каких-либо жестов в реакции.Я знаю, что в соответствии с недавней политикой Google и Apple в отношении веб-видео мы не можем автоматически воспроизводить видео со звуком без жестов пользователя. Но я видел несколько веб-сайтов, которые по-прежнему автоматически воспроизводят видео в современных веб-браузерах.

Я сталкивался со многими вопросами.связанные с этой проблемой на stackoverflow, но никто не помог мне.

Вот что я пробовал.

Попробуйте 1.

<video id="miniVideo" preLoad="yes" autoPlay="autoplay" loop width="100%" height="auto" playsInline>
<source src="/mini/video/cooper.mp4" type="video/mp4" />
<source src="/mini/video/cooper.webm" type="video/webm" />
</video>

Попробуйте 2.

<iframe playsInline id="miniVideo" src="/mini/video/cooper.mp4" width="100%" 
 height="400px"
allow="autoplay; fullscreen"></iframe>

Попробуйте 3.

componentDidMount(){
    var videoTimer = document.getElementById("miniVideo");
    videoTimer.play();
}
<video id="miniVideo" width="100%" height="100%">
<source src="/video/cooper.mp4" type="video/mp4" />
<p>This browser does not support the video element.</p>
</video>

Ваша помощь будет высоко оценена. Спасибо

Answer 1

Я не уверен насчет Safari, но Chrome изменил политику автозапуска.Смотрите здесь: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Для автозапуска добавьте muted, связанный с тегом video.
Например:

import React, { Component } from 'react';

class Player extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isVideoMuted: true
    };
  }

  handleMuteState = () => {
    this.setState(prevState => ({
      isVideoMuted: !prevState.isVideoMuted
    }));
  }

  render() {
    return (
      <div>
        <video muted={this.state.isVideoMuted} src="./video.mp4" />
        <button onClick={this.handleMuteState}>{this.state.isVideoMuted ? 'Unmute' : 'Mute'}</button >
      </div>
    );
  }
}

export default Player;