刷新页面后视频的“自动播放”无法正常工作

Question

我想添加一个自动播放和循环播放的视频，不显示控件。当我在代码中添加'controls'时，控件会显示并且视频可以正常播放。但是当我将'controls'更改为'autoplay'并刷新测试页面时，视频不会播放。以下是代码:

<video src="./images/Kusko Enterprise Catering Services - Google Chrome 2021-10-03 16-30-57_Trim.mp4" class="kusko_catering_video" autoplay></video>

请问我能否得到帮助来找出我的错误？

- myt

Answer 1

如果您在元素中设置了autoplay选项，除非您也设置了muted选项，否则在刷新时不会自动播放。这是浏览器的一个特殊情况，允许防止在仅刷新的情况下将视频播放出声音。

因此，请将您的元素更改为：

<video id="video-field" src="files/video" loop autoplay muted></video>

还有人在评论中询问关于Angular的问题。

<video [muted]="'muted'" loop autoplay [src]="videoSource"></video>

- tech_geek

---

添加静音的 Angular 方式 [muted]="'muted'" 是我让这个工作正常所缺少的唯一部分，谢谢。 - Juliano Vargas

Answer 2

我认为这就是你想要的。

        <video src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/h264.mov" autoplay loop></video>

你的代码看起来很好，只需要添加循环属性以进行连续播放。我认为问题在于你的源代码。

- mr.Hritik

---

嗨！出于某些原因，这似乎不太好用。它的行为就像我运行你的代码片段时一样。我也尝试将我的源更改为你的，但它没有运行。 - myt

@MaameYaaTwumasi 请提供您代码的 jsfiddle 链接。 - mr.Hritik

@MaameYaaTwumasi，这样我就可以找出问题所在。 - mr.Hritik

这是我使用“控件”时的链接：https://codepen.io/maame-yaa/pen/jOwgzBQ，这是我使用“自动播放循环”时的链接：https://codepen.io/maame-yaa/pen/KKqOoWb。我使用了您的视频源。 - myt

我在使用 Angular 应用时遇到了同样的问题，只有在使用菜单链接等导航网站时第一次有效...但是当页面被刷新后，它就不再自动播放了。有人找到原因了吗？ - Juliano Vargas

Answer 3

在您的播放器播放之前，您必须先在页面上进行第一次交互。

- Djb