JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <video width="320" height="240" id="myvideo" controls>
    <source src="http://docs.evostream.com/sample_content/assets/bunny.mp4" type="video/mp4">
  Your browser does not support the video tag.
  </video>
</div>
<div>
  <button id="playbutton">
  Play/Pause
  </button>
  <button id="skipforwardbutton">
  Skip 30sec &gt;
  </button>
  <br>
  <input id="videoslider" type="range" min="0">
</div>

JavaScript

const myVideo = document.getElementById("myvideo");
const playButton = document.getElementById("playbutton");
const skipButton = document.getElementById("skipforwardbutton");
const videoSlider = document.getElementById("videoslider");

myVideo.onloadedmetadata = function() {
	const videoDuration = myVideo.duration;
  videoSlider.setAttribute("max", videoDuration);
};

myVideo.addEventListener("timeupdate", function() {
	videoSlider.setAttribute("value", myVideo.currentTime);

});

playButton.addEventListener("click", function() {
  if (myVideo.paused == true) {
    myVideo.play();
  } else {
    myVideo.pause();
  }
});

skipButton.addEventListener("click", function() {
	myVideo.currentTime = myVideo.currentTime + 30;
});

videoSlider.addEventListener("input", function() {
	myVideo.currentTime = videoSlider.value;
});