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

Posted 2023-05-08

【中文标题】Javascript Video loadmetadata 事件未在 React-Redux 应用程序上触发

【英文标题】：Javascript Video loadmetadata event not being triggered on React-Redux Application

【发布时间】：2018-09-28 17:51:36

【问题描述】：

我有一个从视频中读取一些元数据的 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，它可以正常工作。

【问题讨论】：

你是用你的 react 应用渲染 videoPlayerElement 还是从哪里来的？

是的，它是在 React 组件中呈现的。忘了提一下，当我在调用 getElementById 后记录对象时，视频对象就在那里。

他们为什么不使用react synthetic events？一般来说，如果没有必要，您应该避免从 DOM 中选择元素。我将在我的回答中提供一个例子。

为什么人们在没有礼貌地解释他们的理由的情况下继续投反对票？

这是一个非常好的问题。在我看来，如果你投反对票，你应该解释为什么以及需要改进的地方。虽然您的问题对于某些人来说可能是基本的，但我不明白为什么它应该被否决。

【参考方案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 />
        );