react中获取html5的video的视频时长

在React中获取HTML5 video的视频时长可以通过以下步骤实现：

1. 在React组件中创建一个video元素的引用：

class VideoPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.videoRef = React.createRef();
  }
  
  render() {
    return (
      <div>
        <video ref={this.videoRef}>
          <source src="your_video_src" type="video/mp4" />
        </video>
      </div>
    );
  }
}

2. 在组件的生命周期函数componentDidMount中获取视频时长：

componentDidMount() {
  const video = this.videoRef.current;
  const duration = video.duration;
  console.log(duration);
}

注意，视频必须已经加载完成才能获取到duration属性的值，因此建议在componentDidMount中获取视频时长。

相关问题

react函数式组件中获取html5的video的视频时长为NAN，如何处理？

在 React 函数式组件中获取视频时长为 NaN 的原因可能是视频还没有加载完全，或者视频元数据还没有加载完成。你可以在视频加载完成时再去获取视频时长。

你可以通过监听 `loadedmetadata` 事件来获取视频元数据，然后获取视频时长。示例如下：

import React, { useState, useEffect } from 'react';

function VideoPlayer() {
  const [duration, setDuration] = useState(0);

  useEffect(() => {
    const video = document.getElementById('video');
    video.addEventListener('loadedmetadata', () => {
      setDuration(video.duration);
    });
  }, []);

  return (
    <div>
      <video id="video" src="your_video_src" controls />
      <p>视频时长: {duration}</p>
    </div>
  );
}

在上面的示例中，我们使用 `useEffect` 钩子来监听 `loadedmetadata` 事件，然后在回调函数中获取视频时长，并将其设置到组件的状态中。最后，我们将视频组件和视频时长一起渲染到页面上。