Question

我有视频背景。它使用自动播放。这是：

<video muted loop autoPlay >
    <source src="assets/videos/background.mp4" type="video/mp4">
</video>

仅当页面为： 1.硬刷新（正常负载不起作用） 2.导航到（如果我在另一页面上，然后导航到主页）

如果您只是导航到该链接，它就不起作用。链接：https://jackseabolt.github.io/trasher/（请不要弄乱网站）

关于这里发生了什么的任何想法？

Answer 1

将静音属性添加到视频的工作原理。这是一种浏览器功能，可确保嘈杂的视频不会自动播放。

Answer 2

在我的情况下发生了同样的问题，您的解决方案对我有用，但略有变化，而不是 muted 在 [] 中，将其替换为：

<video muted="true" autoplay playsinline loop>
    <source src="your_video" type="video/mp4">
</video>

然后在有角度的网页中使用它对我有用。

Answer 3

Google禁止在Chrome中进行强制操作来刷新视频或输入直接URL来开始播放视频。
这些方法中无一有效：

setTimeout(this.videoStarts,300); // works only time to time, so isn't reliable

不是（使用jQuery），也（使用React引用）：

this.video.current.play();
$('.video').get(0).play(); // simply won't work

要解决此问题，您可以添加交互：
1.创建一个模式窗口，该窗口将要求用户同意播放内容。
或
2.在所需的代码上添加一个onclick事件，它将触发play()。

Answer 4

我遇到了完全相同的问题。

video.play()返回承诺。

此代码可能会对您有所帮助。

document.addEventListener('DOMContentLoaded', function (e) {

  var promise = document.querySelector('video').play();

  if (promise !== undefined) {
      promise.catch(error => {
          console.log ("Auto-play failed")
          // Auto-play was failed
      }).then(() => {
          console.log ("Auto-play started")
          // Auto-play started
      });
  }
});

或CoffeeScript

document.addEventListener 'DOMContentLoaded', (e) ->
  promise = document.querySelector('video').play()
  if promise != undefined
    promise.catch((error) ->
      console.log 'Auto-play failed'
    ).then ->
      console.log 'Auto-play started'

Answer 5

U并不是说在您的项目中使用Angular。现在很简单：

<video [muted]="true" autoplay playsinline loop>
    <source src="your_video" type="video/mp4">
</video>

只需将muted属性更改为[muted]="true"。

视频自动播放在没有硬刷新的情况下无法正常工作

5 个答案: