React-Redux 应用程序未触发 Javascript Video loadmetadata 事件

Question

我有一个从视频中读取一些元数据的 React-Redux 应用程序。

但是，添加到 loadmetadata 事件的代码永远不会被触发。

作为一种解决方法，我添加了一个计时器来等待 1 秒，这是一个非常糟糕的解决方案，并不是每次都有效。

另一件事是，我找不到一种无需操作 DOM 即可将视频元素集成到 Redux 代码中的优雅方法。

代码如下所示:

  videoPlayerElement = document.getElementById(`videoplayer-${videoId}`);
  videoPlayerElement.addEventListener('loadedmetadata', function(e) {
      const duration = videoPlayerElement.duration;
      ...
  })

监听器中的代码永远不会执行。我也尝试了不同的方法来分配 loadmetadata 事件，即:直接分配给 videoPlayerElement.onloadmetadata 仍然不起作用。

我认为这可能是因为对象的范围，所以我将它更改为全局只是为了测试......没有帮助。

关于可能导致什么的任何其他想法？

如果我运行一个简单的例子，比如 this one它工作正常。

Answer 1

在 React 中你应该使用 synthetic events在可能的情况。您的用例示例:

class MediaPlayer extends Component {

    handleMetadata = event => {
        const duration = event.currentTarget.duration;
        // ...
    }

    render() {
        const {src} = this.props;

        return(
            <video src={src} onLoadedMetadata={this.handleMetadata} />
        );
    }
}