为什么 videojs 不能只在 Chrome 中工作?

Why does videojs not work only in Chrome?

我在 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>

State 根据 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>

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

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

Chrome's autoplay policies are simple:

  • Muted autoplay is always allowed.
  • Autoplay with sound is allowed if:
    • User has interacted with the domain (click, tap, etc.).
    • On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
    • On mobile, the user has [added the site to their home screen].
  • Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

至于为什么在打开开发者工具的情况下启用自动播放:这模糊地回答了它:

Developer switches

As a developer, you may want to change Chrome autoplay policy behavior locally to test your website depending on user engagement.

  • You can decide to disable entirely the autoplay policy by setting the Chrome flag "Autoplay Policy" to "No user gesture is required" at chrome://flags/#autoplay-policy. This allows you to test your website as if user were strongly engaged with your site and playback autoplay would be always allowed.

  • You can also decide to make sure playback autoplay is never allowed by disabling use of MEI, applying autoplay policy to Web Audio, and whether sites with the highest overall MEI get playback autoplay by default for new users. This can be done with three internal switches with

    chrome.exe --disable-features=PreloadMediaEngagementData,AutoplayIgnoreWebAudio, MediaEngagementBypassAutoplayPolicies.

我通过向视频标签添加以下属性解决了这个问题:

data-setup='{"fluid": true, "autoplay":true,"html5": {"vhs": 
{"overrideNative": true}, "nativeAudioTracks": false, "nativeVideoTracks": false}}'

这会导致一切都使用非本地播放器。