How To Load HTML5 Video After Video Ends and Set Controls List Attribute In React?

In modern browsers, adding a video to your page is as easy as adding an image. I am not going on detail on how HTML5 Video works.

It is very easy to add HTML5 video in React. React DOM now supports these media events on audio and video tags: onAbort, onCanPlay, onCanPlayThrough, onDurationChange, onEmptied, onEncrypted, onEnded, onError, onLoadedData, onLoadedMetadata, onLoadStart, onPause, onPlay, onPlaying, onProgress, onRateChange, onSeeked, onSeeking, onStalled, onSuspend, onTimeUpdate, onVolumeChange, onWaiting.

In this tutorial, you can see how to add HTML5 video tag controlsList attribute in React and how to load the video to the beginning of the video or start frame again after video has ended.

componentDidMount() {
  document.querySelectorAll('video')
  .forEach( x => x.setAttribute("controlsList","nodownload noremoteplayback"));
}

onVideoEnded = (index) => {
   var video = document.querySelector('#video'+index);
   video.load();
}

return (
  <video id="video1" controls muted src="https://example.com/video.mp4" 
  onEnded={() => this.onVideoEnded('1') />
);

These are only some of used properties, event and method of HTML5 Video in this article. For more details, please visit HTML5 Video.

Attributes
controls => Shows the default video controls (play, pause, etc).
muted => Mutes the audio from the video
Used Event
onEnded => Fired when the video has finished playing
Used Method
load() => method loads the video and reset the play head to the beginning of the video