React視頻播放器開關

Question

我在React中構建了一個自定義視頻播放器。我需要的是讓玩家能夠播放5個不同的視頻，通過點擊右（或左）箭頭和循環開始播放。有點像旋轉木馬一次只能看到一個視頻。

我正在探索一個反應視頻播放器-，但我無法弄清楚在這個內部是否可能，或者我必須以某種方式構建它。有人以前做過或者可能使用過不同的內置播放器嗎？

Answer 1

是的，看起來這是你可以用這個包做的事情。看起來你可以指定像這樣的視頻源：

<Video controls autoPlay loop muted ref="video"> 
    <source src={videos[this.state.videoId]} type="video/mp4" /> 
    <Overlay /> 
    <Controls /> 
</Video> 

您需要在列表中創建的視頻和循環列表切換視頻。隨着他們的做法，他們已經創造了視頻的數組：

constructor(){ 
    super(); 
    this.videos = ['http://test.src/video.mp4','http://test2.src/video.mp4']; 
    this.state = { 
     videoId: 0 
    } 
} 
nextVideo(){ 
    let id; 
    if(this.state.videoId === this.videos.length - 1){ 
     //Loop back to first video 
     id = 0; 
    }else{ 
     id = this.state.videoId + 1; 
    } 
    this.setState({ 
     videoId: id 
    }); 
} 
prevVideo(){ 
    let id; 
    if(this.state.videoId === 0){ 
     //Loop back to last video 
     id = this.videos.length - 1; 
    }else{ 
     id = this.state.videoId - 1; 
    } 
    this.setState({ 
     videoId: id 
    }); 
} 
render(){ 
    return (
     <Video controls autoPlay loop muted ref="video"> 
      <source src={this.videos[this.state.videoId]} type="video/mp4" /> 
      <Overlay /> 
      <Controls /> 
     </Video> 
    ) 
} 

那麼你就需要附上nextVideo和prevVideo功能，左，右箭頭。