2

在 react.js 中上传后，我想从 onChange 函数中获取视频时长。我在 stackblitz 中分享了我的代码。链接在这里 -工作演示

我在代码中提到了我需要获取视频持续时间的地方。我需要它在 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'));
4

1 回答 1

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

取自这里：当我使用文件阅读器读取视频文件时，如何获取视频的持续时间？

于 2019-01-22T07:49:19.417 回答