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

Question

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

然而，添加到loadmetadata事件中的代码永远不会被触发。

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

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

代码如下所示：

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

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

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

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

如果我运行一个简单的例子，就像这个一样，它工作正常。

Answer 1

在反应中，您应该尽可能使用合成事件。您的用例示例：

class MediaPlayer extends Component {

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

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

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