Search code examples
javascriptreactjsonchangefilereadervideo-upload

How to get the Video Duration from onChange function after uploading in react.js


I want to get the video duration from onChange function after uploading in react.js. I have shared my code in stackblitz. Link is here - Working Demo

I have mentioned in the code where I need to get the video duration. I need it inside onchange function's reader.onloadend portion. Here's my code given in the following portion:

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'));

Solution

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

    Taken from here: How to get duration of video when I am using filereader to read the video file?