javascript - 背景视频在 Chrome 中悬停时不起作用

Question

当我悬停链接时，我正在尝试完成背景视频播放。实际上它在除 Chrome 之外的所有浏览器中都可以正常工作。Chrome 中发生的事情是，当我悬停链接时，我看到了视频的第一帧，仅此而已。重新加载页面并不能解决问题。但是单击徽标刷新页面确实可以解决问题。当我将“静音”添加到视频标签时，它也可以正常工作。我读到 Chrome 默认会阻止视频和音频自动播放（我有 66.0.3359.181 版本的 Chrome）。

那么有什么解决方案可以在第一次入口时在 Chrome 中播放带声音的背景视频吗？

您可以在此处查看网站示例：

http://s90685xj.beget.tech/

我正在使用的代码：

var viewport = document.getElementsByClassName('fade')[0]
var video = document.getElementById('video')
viewport.addEventListener('mouseover', function() {
  video.play()
}, false);
viewport.addEventListener('mouseout', function() {
  video.pause()
}, false);
document.getElementById('video').addEventListener('loadedmetadata', function() {
  this.currentTime = 24;
}, false);

<a href="#" class="fade film">New York<span><video id="video" class="video-background"><source src="http://s90685xj.beget.tech/wp-content/uploads/2018/05/Hernandos-Hideaway-Broadway-Dreams-NYC-Showcase-2016.mp4"></source></video></span></a>

提前感谢您的帮助！

标签： javascriptgoogle-chromevideo