如何在 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 的错误。显然，根据视频属性的设置方式，会导致自动播放不起作用或不起作用。这是一个

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

视频-playback.js

import Component from '@ember/component';

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

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

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

如何在 Chrome 中自动播放 ember.js 中的视频

How to autoplay a video in ember.js in Chrome

google-chrome

ember.js