在 React App 中播放视频时 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 docs：

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

将视频配置为静音播放应该可以解决问题，MDN guide for autoplay 也指出。

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

例如，它是否适用于点击？