How to play video in react - reactjs

Question

I have a play/pause button for every video.
When I click on the play button, the last video is always played, and the icon changes on all videos. I try to do that with refs and play() method but every time, whatever video the user selects just the last video is played. Every click event play the last one.
Also, the code for full screen does not work.
This is my code:
class Video extends React.Component {
constructor(props) {
super(props);
this.state = {
playing: false,
videoList: [
{
src: 'https://clips.vorwaerts-gmbh.de/VfE_html5.mp4',
type: "video/mp4"
},
{
src: "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
type: "video/mp4"
},
{
src: "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
type: "video/mp4"
},
{
src: "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
type: "video/mp4"
}
]
}
}
onPlayPauseClick = (index) => (event) => {
this.setState({
playing: !this.state.playing
});
this.state.playing ? this.video.pause() : this.video.play();
}
// onFullScreenClick = (video) => {
// this.setState({ video: video })
// if (video.requestFullscreen) {
// video.requestFullscreen();
// } else if (video.webkitRequestFullscreen) {
// video.webkitRequestFullscreen();
// } else if (video.mozRequestFullscreen) {
// video.mozRequestFullscreen();
// } else if (video.msRequestFullscreen) {
// video.msRequestFullscreen();
// }
// }
renderList = () => {
const { playing } = this.state;
return this.state.videoList.map((item, index) => {
return (
<li key={`item_${index}`}>
<video ref={(video) => { this.video = video; }} src={item.src}></video>
<img
src={playing ? "https://icon2.kisspng.com/20180419/pyq/kisspng-computer-icons-arrow-triangle-play-icon-5ad83452103159.1624767815241186100663.jpg" : "https://cdn2.iconfinder.com/data/icons/flat-and-simple-pack-2/512/1_Control_pause-512.png"}
className="play"
onClick={this.onPlayPauseClick(index)}
/>
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_fullscreen_exit_48px-512.png" className="full" />
</li>
)
});
}
render() {
return (
<div>
<ul>
{this.renderList()}
</ul>
</div>
);
}
}
class Buttons extends React.Component {
render() {
return (
<div>
<Video />
</div>
);
}
}
ReactDOM.render(<Video />, document.getElementById('app'));

Answer 1

It's happened because you saved the last video item in this.video, after iterating through videoList array elements . Try to save ref in this['video_'+index]=video instead of this.video=video, and start to play with code this['video_'+index].play()

Answer 2

Hey I think you have your ref messed up, you can create a new array of ref and use it with the index
constructor () {
this.ref = [];
}
and in your return do something like this
return this.state.videoList.map((item, index) => {
return (
<li key={`item_${index}`}>
<video ref={(video) => { this.ref.push(video) }} src={item.src}></video>
<img
src={playing ? "https://icon2.kisspng.com/20180419/pyq/kisspng-computer-icons-arrow-triangle-play-icon-5ad83452103159.1624767815241186100663.jpg" : "https://cdn2.iconfinder.com/data/icons/flat-and-simple-pack-2/512/1_Control_pause-512.png"}
className="play"
onClick={this.onPlayPauseClick(index)}
/>
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_fullscreen_exit_48px-512.png" className="full" />
</li>
)
});
and then you can call your ref inside the play pause method
onPlayPauseClick = (index) => (event) => {
this.setState({
playing: !this.state.playing
});
this.state.playing ? this.ref[index].pause() : this.ref[index].play();
}
For fullscreen I can suggest you don't try to over complicate the things, there is an awesome library for the player you can go with it.
https://www.npmjs.com/package/react-player

Answer 3

Full functioning code for your question.
import React from "react";
class Video extends React.Component {
constructor(props) {
super(props);
this.video = [];
this.state = {
playing: [false, false, false, false],
videoList: [
{
src: "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
type: "video/mp4"
},
{
src: "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
type: "video/mp4"
},
{
src: "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
type: "video/mp4"
},
{
src: "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
type: "video/mp4"
}
]
};
}
onPlayPauseClick = index => event => {
this.setState(state => {
state.playing = !state.playing;
state.playing ? this.video[index].play() : this.video[index].pause();
return state.playing[index];
});
};
onFullScreenClick = index => event => {
let video = this.video[index];
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (video.mozRequestFullscreen) {
video.mozRequestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}
};
renderList = () => {
const { playing } = this.state;
return this.state.videoList.map((item, index) => {
return (
<li key={`item_${index}`}>
<video
ref={video => {
this.video[index] = video;
}}
src={item.src}
/>
<img
src={
playing
? "https://icon2.kisspng.com/20180419/pyq/kisspng-computer-icons-arrow-triangle-play-icon-5ad83452103159.1624767815241186100663.jpg"
: "https://cdn2.iconfinder.com/data/icons/flat-and-simple-pack-2/512/1_Control_pause-512.png"
}
className="play"
onClick={this.onPlayPauseClick(index)}
/>
<img
src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_fullscreen_exit_48px-512.png"
className="full"
onClick={this.onFullScreenClick(index)}
/>
</li>
);
});
};
render() {
return (
<div>
<ul>{this.renderList()}</ul>
</div>
);
}
}
export default Video;

Answer 4

Im use react-player, where option "controls" - Set to true or false to display native player controls. look at the "react-player", it has everything you need
<ReactPlayer url={'url/to/video'} className={classes.styleView} controls/>