JSFiddle - React, Tailwind, and code Playground

HTML

<video poster="https://media.w3.org/2010/05/sintel/poster.png" controls preload="none">
    <source id="mp4" src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
    <source id="webm" src="https://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
    <p>Your user agent does not support the HTML5 Video element.</p>
</video>

CSS

video {
  height: 150px;
  width: 300px;
}

JavaScript

const video = document.querySelector('video');

video.addEventListener('play', () => {
	console.log('Play');
});

video.addEventListener('playing', () => {
	console.log('Playing');
});

video.addEventListener('pause', () => {
	console.log('Pause');
});

video.addEventListener('seeking', () => {
	console.log('Seeking');
});

video.addEventListener('seeked', () => {
	console.log('Seeked');
});