Question

我在React中使用video.js。我的问题是视频仅在Chrome中无法正常播放。视频已加载，但不会自动播放。它可以在Firefox，Microsoft Edge甚至Internet Explorer中运行。仅当我打开开发人员工具后，视频才会在Chrome中启动。您曾经遇到过这样的问题吗？我的代码很简单：

<video data-setup='{"loop": true, "autoplay": true, "loadingSpinner": false}' 
className="video-js vjs-default-skin article-video">
    <source src={this.state.video}/>
</video>

国家根据innerWidth加载不同的视频。

编辑：

静音的属性允许Chrome自动播放视频：

<video muted="muted" data-setup='{"loop": true, "autoplay": true, "loadingSpinner": false}' 
className="video-js vjs-default-skin article-video">
    <source src={this.state.video}/>
</video>

Answer 1

目前，chrome阻止了html5视频中的自动播放，因此默认情况下，它们将不允许自动播放。 Read more about the change here...

以下是他们的自动播放政策：

Chrome的自动播放政策很简单：


始终允许静音的自动播放。

在以下情况下，允许自动播放声音：

用户已与域互动（单击，点击等）。

在桌面上，已经超过了用户的“媒体参与指数”阈值，这意味着该用户以前曾播放有声视频。

在移动设备上，用户已[将网站添加到主屏幕中。]



顶部框架可以将自动播放权限委派给其iframe，以允许自动播放声音。

关于在开发者工具打开的情况下启用自动播放的原因：含糊地回答了：

开发人员开关

作为开发人员，您可能需要更改Chrome   在本地自动播放政策行为以测试您的网站，具体取决于   用户参与度。



您可以通过设置以下选项来决定完全禁用自动播放策略：   将Chrome的“自动播放策略”标志标记为“无需用户手势”   chrome：// flags /＃autoplay-policy。这可以让您测试您的网站   好像用户与您的网站紧密互动并自动播放   将始终被允许。



您还可以通过禁用MEI，将自动播放策略应用于Web音频，以及通过设置自动播放策略来确保从未允许播放自动播放   总MEI最高的网站是否可以通过以下方式自动播放   新用户的默认设置。这可以通过三个内部开关来完成

chrome.exe --disable-features = PreloadMediaEngagementData，AutoplayIgnoreWebAudio，MediaEngagementBypassAutoplayPolicies。

为什么videojs不能仅在Chrome中使用？

1 个答案: