Question

我有一个非常简单的余烬应用程序。

在我的 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;
  }
});

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

也许不需要组件即可有一种更简单的方法，但这对我来说已足够。

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

1 个答案: