首次加载或刷新后视频未播放答案

【问题标题】：Video not playing upon first load or after refreshing首次加载或刷新后视频未播放
【发布时间】：2020-06-11 16:23:15
【问题描述】：

我在我的网站主页上发布的视频在第一次加载或刷新后没有播放，而在我从其他页面转到主页后播放。如果我将 muted 属性添加到 video 元素，问题可能会得到解决，但我确实希望播放背景音乐。以下是我的代码：

  componentDidMount() {
    document.getElementById("opening").play();
  }

  ......

  <video autoPlay id="opening">
    <source src={opening} type="video/mp4"></source>
  </video>

谢谢！

【问题讨论】：

这能回答你的问题吗？ Video auto play is not working in Safari and Chrome desktop browser
Also good lecture
否，因为我不希望视频被静音，帖子中的答案建议添加静音属性
您是否知道这是浏览器的问题并且您无法绕过它？您至少可以等到用户开始点击页面，然后您就可以开始播放电影了
是的，我只是想提出这个问题来检查是否真的没有办法解决它

标签： html reactjs html5-video

【解决方案1】：

我遇到了类似的问题。然后我做了这个。虽然它不是用户友好的，但在此之后它工作了

   <video 
        src={require('../../resources/sampleVid.mp4')} 
        autoPlay = {false}
        controls = {true}
        loop = {true}
        muted = {false}
        className="flex justify-center mw7-ns"
    />

【讨论】：

【解决方案2】：

恐怕，但没有办法自动播放 HTML 5 视频中的音频。

这里明确提到https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

最后修改时间：2020 年 5 月 16 日，由 MDN 贡献者撰写

自动播放音频（或带有音轨的视频）的网站可能会给用户带来不愉快的体验，因此应避免可能的。如果你必须提供自动播放功能，你应该做选择加入（要求用户专门启用它）。然而，这可以在创建源将设置为稍后，在用户控制下。有关其他信息，请参阅我们的自动播放指南有关如何正确使用自动播放的信息。

在某些浏览器（例如 Chrome 70.0）中，如果没有 muted 属性，自动播放将不起作用。

【讨论】：