在React应用程序中播放视频时出现Safari错误

Question

在我的React应用程序中，我在Safari中遇到了一个问题(这在Chrome和Firefox中运行良好(，当我用鼠标悬停在视频上播放时，我会收到以下错误：

NotAllowedError:用户代理或平台，可能是因为用户拒绝准许

相关代码块如下：

{ this.state.url ? 
<video className="video"
onMouseOver={event => {
this.onVideoPlay(this.state.url, event);
}}
onMouseOut={event => {
this.onVideoPause(this.state.url, event);
}}
src={`${this.state.url}`} >
</video>
: null
}

我的两个函数是这样的：

onVideoPlay = async (videoUrl, event) => {
if (!videoUrl || !event || videoUrl === 'url(${videoBg})') return;
if (!this.state.isPlaying) {
await event.target.play();
this.setState({ isPlaying: true });
}
};
onVideoPause = async (videoUrl, event) => {
if (!videoUrl || !event) return;
if (this.state.isPlaying) {
await event.target.pause();
this.setState({ isPlaying: false });
}
}

这里的问题是什么，我该如何解决？

Answer 1

如果非要我打赌，我会说问题是试图在没有直接用户交互的情况下播放未静音的视频。

根据Safari文档：

只有当元素不包含音轨或静音属性设置为true时，它才能使用play((方法自动播放而不需要用户手势。如果此视频元素获得音轨或在没有用户手势的情况下取消静音，则播放将暂停。如果视频元素在屏幕上不可见或在视口外，则播放停止。

将视频配置为静音播放应该可以解决这个问题，MDN自动播放指南也指出了这一点。

你可以争辩说，在你的情况下，你确实有一个用户手势，鼠标悬停。但这不算与网站的互动。它必须是点击或按键，正如webkit博客所指定的那样。

例如，它能和点击一起工作吗？