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

Posted 2023-05-07

【中文标题】如何在 Chrome 中自动播放 ember.js 中的视频

【英文标题】：How to autoplay a video in ember.js in Chrome

【发布时间】：2019-06-12 06:06:55

【问题描述】：

我有一个非常简单的 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 时自动播放此视频。

【问题讨论】：

这似乎不是 ember 问题，而是 chrome 问题。 this code 在 chrome 中也不起作用。也许他们半年前改变政策时忘记了什么？

你是对的。我也没有通过渲染这么好的捕获来测试它

在didInsertElement 期间调用.play() 时，您还会收到一条DOMException 消息，该消息链接到一个页面，该页面被重定向到他们已更改策略的公告。有趣的是，在 JSBin 中从简单的 setTimeout 调用 .play() 效果很好......

我似乎仍然遇到了带有 setTimeout 的 domException。还在调查这个

【参考方案1】：

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

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

组件/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;
  
);

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

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

【讨论】：

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