Question

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

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

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

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

代码如下所示：

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

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

我认为这可能是因为对象的范围，因此我将其更改为仅用于测试的全局......没有帮助。

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

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

Answer 1

在反应过程中，您应尽可能使用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} />
        );
    }
}

在React-Redux应用程序

1 个答案: