React-Redux應用程序未觸發Javascript視頻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仍然無法正常工作。

我認為可能是由於對象的范圍所致，所以我將其更改為僅用於測試的全局對象……無濟於事。

關於可能會導致什么的其他想法？

如果我運行一個簡單的示例，像這樣的示例，它將很好地工作。

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} />
        );
    }
}