时间戳

首页 > 解决方案 > 在 React App 中播放视频时 Safari 错误

reactjs - 在 React App 中播放视频时 Safari 错误

问题描述

在我的 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 });
    }
  }

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

标签： reactjssafarihtml5-video

解决方案

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

根据Safari 文档：

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

正如MDN 自动播放指南也指出，将视频配置为静音播放应该可以解决问题。

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

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

推荐阅读