Question

我想在react.js中上传后从onChange函数获取视频时长。我已经在stackblitz中共享了我的代码。链接在这里- Working Demo

我在代码中提到了需要获取视频时长的地方。我需要在onchange函数的 reader.onloadend 部分中。这是以下部分给出的代码：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      get_video: '',
      videoAttribute: []
    };
  }

  chosenVideo(e) {
        e.preventDefault();

        /*this.setState({
            file_state: e.target.files[0]
        });*/

        var file = e.target.files[0];
        var file_state = e.target;
        var reader = new FileReader();
        reader.onloadend = () => {
            this.setState({
                get_video: reader.result,
                videoAttribute: file_state
            });

      console.log("video duration"); // I want to get the video duration here

            console.log(reader);
        };
        reader.readAsDataURL(file);
    }

  render() {

    var isVideoPreview = '';

    if(this.state.get_video != '') {
      isVideoPreview = (
        <video 
          type="video/swf" 
          src={this.state.get_video} 
          className="get_preview_video_class" 
          controls
        >
            </video>
      );
    }

    return (
      <div>
        <input 
          id="upload_1006_mybataz" 
          type="file" 
          accept="video/*" 
          onChange={this.chosenVideo.bind(this)} 
        /> 
        <div>
          {isVideoPreview}
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 1

var media = new Audio(reader.result);
media.onloadedmetadata = function(){
     media.duration; // this would give duration of the video/audio file
};

从这里拍摄：How to get duration of video when I am using filereader to read the video file?

在react.js中上传后如何从onChange函数获取视频时长

1 个答案: