0

我正在使用 npm react-player 在反应应用程序中播放一些音频和视频文件。我允许用户切换音频的自动播放功能。

const ReactPlayer = require('react-player').default;
const autoplay = true; // if user chose to enable autoplay

React.createElement(ReactPlayer, { playing: autoplay, url: 'some/audio.wav' })

当播放器被渲染并开始在 chrome android 浏览器中播放时，它还会启动一个原生 android 播放器，（可以在 os 通知区域访问）

在此处输入图像描述

两个播放器完全同步，但如果浏览器播放器暂停，则本机播放器会继续播放。此外，如果在浏览器播放器的时间线上拖动点，它们会变得不同步并互相交谈。

有趣的是，当自动播放未打开，但用户必须手动按下将播放属性设置为的按钮时true，本机音频播放器和浏览器播放器控件会相互影响，如果在浏览器中暂停，则两者都会暂停，如果暂停在通知区域中会暂停并保持同步。

我怎样才能解决这个问题？

更新：

我还没有尝试更多。我没有在渲染组件之前设置playing为 true，而是尝试获取 html 元素componentDidMount()并在那里使用该play()函数。不幸的是，这具有相同的行为，它似乎启动了 2 个独立的播放器，最终将变得不同步:(

componentDidMount () {
  const player = document.getElementById(this.state.id);
  if (player) {
    const audio = player.getElementsByTagName('audio');
    if (audio && audio.length > 0) {
      this.state.autoplay && player.firstElementChild.play();
    }
  }
},
4

1 回答 1

0

我仍然不清楚幕后到底发生了什么，所以我不知道为什么这解决了这个问题的技术细节，但是......

我们的应用程序是使用创建的，由于锁定环境以及使用构建和配置等reacte-react-app，我们遇到了无穷无尽的问题。获得控制和理解配置的工作原理非常困难。我们决定从中弹出应用程序，而是现在使用另一个配置和构建脚本。这解决了我们的很多问题，包括这个特殊问题。react-scriptswebpackcreat-react-appwebpack

我无法在 codesandbox.io 沙盒上重现该问题，我安装react-player并复制了音频播放器并使用了相同的音频文件。在这里，内部和外部参与者是一致的。现在我们正在构建与creat-react-app这个问题完全无关的应用程序也从我们的应用程序中消失了。

所以我不能说为什么这会奏效，但只能推荐遇到类似问题的任何人做一个实验，creat-react-app如果你的应用程序是以这种方式创建的。

于 2020-03-05T11:56:41.283 回答