如何在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特有的问题，但即使按照这个流行问题的回答，顶部答案也不能解决我的问题。

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

还要注意，如果我从不同的路由打开自动播放视频（即我切换到一个新页面然后回来），现在自动播放就可以正常工作。因此，这个问题只发生在应用程序首次加载时。我找不到任何可以替代的流行组件。

我想知道如何让这个视频在第一次打开Chrome时自动播放。

- Cameron

---

这似乎不是一个Ember问题，而更像是Chrome的问题。即使在Chrome中，此代码也无法工作。也许半年前他们改变政策时忘记了某些东西？ - Lux

你说得对。我也没有通过渲染测试它，所以很好地发现了。 - Cameron

在didInsertElement期间调用.play()时，您还会收到一个带有链接到页面的DOMException，该页面将被重定向到公告，说明他们已更改其政策。有趣的是，在JSBin中使用简单的setTimeout调用.play()却可以正常工作... - Lux

我似乎仍然在使用setTimeout时遇到了domException。 我还在研究这个问题。 - Cameron

Answer 1

这很可能是Chrome的一个bug。显然，根据视频属性的设置方式，会导致自动播放无法工作或正常工作。这是一个示例。

我通过创建一个简单的组件并将视频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;
  }
});

重要的是重新设置属性，因为渲染存在一个bug。

可能有一种更简单的方法可以不需要组件就能解决这个问题，但对我来说，这已经是一个足够好的修复方法了。

- Cameron

---

这个问题在2022年仍然存在，但这个解决方案仍然有效。 - Serg Chernata