google-chrome - 如何在 Chrome 中使用 ember.js 自动播放视频

Question

我有一个非常非常简单的 ember 应用。

在我的application.hbs中，我只有以下代码(没有其他路由、模板、组件等)

<video autoplay loop muted playsinline>
  <source src="https://res.cloudinary.com/dthskrjhy/video/upload/v1545324364/ASR/Typenex_Dandelion_Break_-_Fade_To_Black.mp4">
</video>

{{outlet}}

问题是我无法让该视频在 Chrome 上自动播放。最初，这似乎是 Chrome 特定的问题，但即使在遵循此 popular question 之后也是如此，最佳答案不能解决我的问题。

更重要的是，如果我创建一个简单的 html 页面，该视频会在 Chrome 和任何其他浏览器上自动播放。因此，我只能从 ember 应用程序中重现这个问题。

另请注意，如果我要从单独的路径打开自动播放视频(即我切换到新页面并返回)，自动播放现在可以正常工作。因此，此问题仅在应用程序首次加载时发生。我找不到任何可以替代的流行组件。

我很好奇如何在首次打开 Chrome 时自动播放此视频。

Answer 1

这很可能是 Chrome 的一个错误。显然，根据视频属性的设置方式，会导致自动播放不起作用或不起作用。这是 example

我能够通过创建一个简单的组件并将视频 html 包装在组件内，然后在 didInsertElement() 内重置视频属性来实现这一点。

Components/video-playback.hbs

<video playsinline=true autoplay=true muted=true loop=true>
  <source src="https://res.cloudinary.com/dthskrjhy/video/upload/v1545324364/ASR/Typenex_Dandelion_Break_-_Fade_To_Black.mp4">
</video>

video-playback.js

import Component from '@ember/component';

export default Component.extend({
  didInsertElement() {
    this._super(...arguments);
    let video = this.element.children[0];
    video.muted = true;
  }
});

重要的是再次设置属性，因为渲染存在错误。

可能有一种更简单的方法可以在不需要组件的情况下执行此操作，但这对我来说已经足够了。