如何在reactjs中创建一个视频播放列表，使用html5视频标签?

Question

import React, { Component } from 'react';
import "./Video.css";
export class Video extends Component {
constructor(props) {
super(props)
this.state = {
index: 1,
videos: []
}
this.numbers = 5;
for (var i = 1; i < this.numbers + 1; i++) {
this.setState({
videos: this.state.videos.push('Video/v' + i + '.mp4')
})
}
}
render() {
return (
<div className='vid ml-5'>
<video className='video px-2 py-2' autoPlay width='950px' height='auto' src='Video/v1.mp4' ></video>
</div>
)
}
}
export default Video

上面是我的reactjs视频播放器组件的代码，我想为this.state.videos中的url创建播放列表。谁都可以帮我，谢谢你。

Answer 1

import React, { Component } from 'react';
import "./Video.css";
export class Video extends Component {
constructor(props) {
super(props)
this.state = {
index: 1,
videos: []
}
this.numbers = 5;
}
looping(event) {
if( this.state.index === this.numbers){
this.setState({
index : 1
})
}else{
this.setState({
index : this.state.index + 1
})
}
event.target.src = `Video/v${this.state.index}.mp4`
event.target.play();
}
render() {
return (
<div className='vid ml-5'>
<video className='video px-2 py-2' autoPlay width='950px' height='auto' src='Video/v1.mp4' onEnded = {(event) => this.looping(event)} ></video>
</div>
)
}
}
export default Video

我只是删除了this.state.video url和track数组元素使用this.numbers。我刚刚添加了一个循环函数，它会在数组上循环，给人一种播放列表的感觉。Reactjs支持视频标签onEnded事件