如何使用html5视频标签在reactjs中创建视频播放列表？ import React，{Component}来自'React'； 导入“/Video.css”； 导出类视频扩展组件{ 建造师（道具）{ 超级（道具） 此.state={ 索引：1， 视频：[] } 这个数字=5； 对于（var i=1；i ) } } 导出默认视频

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

导入React，{Component}来自'React'；
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

导入“/Video.css”；
导出类视频扩展组件{
建造师（道具）{
超级（道具）
此.state={
索引：1，
视频：[]
}
这个数字=5；
}
循环（事件）{
if（this.state.index==this.numbers）{
这是我的国家({
索引：1
})
}否则{
这是我的国家({
索引：this.state.index+1
})
}
event.target.src=`Video/v${this.state.index}.mp4`
event.target.play（）；
}
render（）{
返回(
this.looping（event）}>
)
}
}
导出默认视频

我刚刚删除了this.state.video url和使用this.numbers的track数组元素。 我刚刚添加了一个循环函数，在这个函数中，它将在数组上循环，以提供播放列表的感觉。

---

Reactjs支持视频标签的统一事件

谢谢，这对我很有帮助

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