react中获取html5的video的视频时长
时间: 2023-12-13 07:04:48 浏览: 232
获取视频播放时长
在React中获取HTML5 video的视频时长可以通过以下步骤实现:
1. 在React组件中创建一个video元素的引用:
```javascript
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中获取视频时长:
```javascript
componentDidMount() {
const video = this.videoRef.current;
const duration = video.duration;
console.log(duration);
}
```
注意,视频必须已经加载完成才能获取到duration属性的值,因此建议在componentDidMount中获取视频时长。
阅读全文