如何從視頻列表播放選定的視頻？

我正在與反應js。我有一個視頻列表，並且有控制器按鈕可以播放和暫停每個視頻。（視頻列表是材料列表的組成部分），我想要的是，如果用戶點擊視頻列表中的視頻，則應播放選定的視頻。我試圖用refs和play（）方法來做到這一點，但每次都是用戶選擇最後一個視頻播放的視頻。我不明白爲什麼它是這樣的。如何從視頻列表播放選定的視頻？

<GridList cols={2} style={styles.gridList} cellheight="auto" 
onChange={this.changeNum}> 

    {videoData.map((tile,i) => (
    <GridTile 
     key={tile.video} title={tile.vidTitle} style={styles.gridTile} 
     actionIcon={<div> 
     <IconButton><PlayIcon color="white" onClick={this.playVideo.bind(this,"vidRef")} /></IconButton> 
     <IconButton><PauseIcon color="white" onClick={this.pauseVideo.bind(this)} /></IconButton> 
     </div>} 
     > 
     <video ref="vidRef" src={tile.video} type="video/mp4" controls></video> 

    </GridTile> 
))}

和調用playVideo（）方法是：

playVideo(index) { 
    this.refs.vidRef.play(); 
}

當一個像它的工作代碼，我告訴。我認爲「vidRef」值可能會導致問題，但我不確定。每個點擊事件播放最後一個視頻，因爲最後一個視頻的ref值是「vidRef」。

我該如何做到這一點？

例如，我點擊了3.mp4，但播放了最後一個視頻（cut.mp4）。

來源

2017-09-07 Selin Gök

你可以嘗試設置唯一的名稱加入索引值給他們參考的每個視頻，因此，例如，它可能是REF = {「vidRef」 + I}」得到REF =「vidRef1」'爲第一個視頻，'ref =「vidRef2」「爲第二個視頻等。

然後訪問到裁判會是這樣的this.refs [ 'vidRef' + 1]

來源

2017-09-07 07:04:08 alcorrius

由於它的工作原理。其實，我嘗試設置獨特的價值，但我不能像this.refs ['vidRef'+ i]使用this.refs :)再次感謝.. –

如何從視頻列表播放選定的視頻？

回答

相關問題