视频自动播放不能正常工作 chrome 和 safari？

Posted 2023-02-19

【中文标题】视频自动播放不能正常工作 chrome 和 safari？

【英文标题】：Video autoPlay is not working chrome and safari?

【发布时间】：2019-02-23 05:24:41

【问题描述】：

我想在 reactjs 中让视频自动播放而无需任何用户手势。我知道根据最近的谷歌和苹果网络视频政策，我们无法在没有用户手势的情况下自动播放有音频的视频。但我看到很少有网站仍然可以在现代网络浏览器中自动播放视频。

我在 *** 上遇到了许多与此问题相关的问题，但没有一个对我有帮助。

这是我尝试过的。

试试 1。

<video id="miniVideo" preLoad="yes" autoPlay="autoplay" loop   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"  
 
allow="autoplay; fullscreen"></iframe>

试试 3。

脚本：

componentDidMount()
    var videoTimer = document.getElementById("miniVideo");
    videoTimer.play();

html：

<video id="miniVideo"  >
<source src="/video/cooper.mp4" type="video/mp4" />
<p>This browser does not support the video element.</p>
</video>

您的帮助将不胜感激。谢谢

【参考方案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;

【讨论】：

我以前试过这个，在 safari 中没有用：-/ .谢谢你的时间兄弟。

我还可以补充一点，到目前为止，React 似乎还没有添加 muted 属性。检查此以获取更多信息github.com/facebook/react/issues/6544