React - 在使用 array.map() 加载项目后播放媒体

Question

我正在使用 react-player 渲染带有 map() 的 YouTube 视频，如下所示：

class Jukebox extends Component {
  constructor (props) {
    super(props);
    this.state = {
     youtube_urls:[],      
     clients:[],        
    };
  };

  componentDidMount() {
    if (this.props.isAuthenticated) {
      this.getItems();
    }
  };

  getItems(event) {
    const {userId} = this.props
    const options = {
      url: `${process.env.REACT_APP_WEB_SERVICE_URL}/jukebox/${userId}`,
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': true,
        Authorization: `Bearer ${window.localStorage.authToken}`
      }
    };
    return axios(options)
    .then((res) => { 
      console.log(res.data)  
      console.log(res.data.data) 
      this.setState({
        clients: res.data.data[0].clients,
        youtube_urls:res.data.data[0].youtube_urls
      })
    })
    .catch((error) => { console.log(error); });
  };

render() {
 const { youtube_urls } = this.state;
 return (
  <div>      
   <h1 className="title is-1">Jukebox</font></h1>
  {
   clients.map((client, index) => {
     /* 
    Obtain preview from state.previews for current artist index 
    */
    const audio = youtube_urls[index]
    /* 
    Render current client data, and corresponding audio url
    */
    return(
      <div key={index}>
      <ul>
        <ReactPlayer 
          url={ audio }
          controls
          playing // <--- does not work
          width='50'
          height='150'
        />
        <div className="Line" />
      </ul></div>
     )
   })
 })
};

根据图书馆的一项规定，playing（见上文），您可以在渲染完成后自动播放媒体，但如果我使用 map()，这将导致所有视频在同时.

同时还有callback prop onReady():

Called when media is loaded and ready to play. If playing is set to true, media will play immediately.

问题：

如何实现这一点并让所有视频播放，从索引 0 开始，在加载所有媒体后一次播放一个？

Answer 1

我会使用两个状态变量：videosLoadedCount、playingIndex。在 0 处初始化 videosLoadedCount，在 -1 处初始化 playingIndex。

可以根据playingIndex状态值推导出播放道具

每当有 onReady 时，递增 videosLoadedCount。当达到视频数量时，可以递增playingIndex。每当有 onEnded 回调时，您就会递增 playingIndex.

像这样的东西应该可以工作：

class Jukebox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loadedVideosCount: 0,
      currentPlayingIndex: -1,
    };
  }

  render() {
    const { youtube_urls } = this.props;
    const { loadedVideosCount, currentPlayingIndex } = this.state;

    return (
      <div>
        {youtube_urls.map((url, index) => (
          <ReactPlayer
            url={url}
            controls
            onLoaded={() =>
              this.setState(currentState => ({
                loadedVideosCount: loadedVideosCount + 1,
                currentPlayingIndex:
                  loadedVideosCount + 1 === youtube_urls.length ? 0 : -1,
              }))
            }
            onEnded={() =>
              this.setState(currentState => ({
                currentPlayingIndex: currentPlayingIndex + 1,
              }))
            }
            playing={index === currentPlayingIndex} // <--- does not work
            width="50"
            height="150"
          />
        ))}
      </div>
    );
  }
}

React - 在使用 array.map() 加载项目后播放媒体

React - play media after items are loaded with array.map()

reactjs

react-player