我想在不使用‘mediainfo.js’命令的情况下在React.js中使用弹出

框来显示视频的相关信息。在React.js中，可以通过使用HTML5的video元素和JavaScript来实现这个功能。

首先，在React组件中，使用video元素来显示视频：

import React from 'react';

class VideoInfo extends React.Component {
  render() {
    return (
      <div>
        <video controls src="path/to/video.mp4"></video>
      </div>
    );
  }
}

export default VideoInfo;

这样，就在页面上显示了一个带有控制条的视频播放器。接下来，我们可以通过JavaScript来获取视频的相关信息。为了达到不使用"mediainfo.js"命令的要求，我们可以使用HTML5的video元素提供的属性和方法来获取视频的信息。

import React from 'react';

class VideoInfo extends React.Component {
  constructor(props) {
    super(props);
    this.videoRef = React.createRef();
  }

  componentDidMount() {
    const videoElement = this.videoRef.current;

    videoElement.addEventListener('loadedmetadata', () => {
      console.log('Video duration:', videoElement.duration);
      console.log('Video dimensions:', videoElement.videoWidth, 'x', videoElement.videoHeight);
    });
  }

  render() {
    return (
      <div>
        <video ref={this.videoRef} controls src="path/to/video.mp4"></video>
      </div>
    );
  }
}

export default VideoInfo;

在上面的代码中，我们通过在video元素上添加一个ref属性，并在组件的constructor方法中使用React.createRef()来创建一个ref对象。然后，通过在componentDidMount生命周期方法中，使用videoRef.current来获取video元素，并添加一个事件监听器来监听loadedmetadata事件。在这个事件回调函数中，我们可以通过video元素的属性和方法获取视频的信息，比如视频的时长和尺寸。

这样，当视频加载完成后，就会在控制台上输出视频的时长和尺寸信息。你可以根据需要将这些信息显示在弹出框中或者其他的位置。

在这个功能中，React.js是作为前端开发框架使用的，用于构建用户界面和组件。使用HTML5的video元素和JavaScript来实现视频播放和获取视频信息的功能。没有特定的云计算相关的名词或产品与此功能直接相关。

参考链接：