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