JSFiddle - React, Tailwind, and code Playground

by boushley

HTML

<div id="output">
</div>

<div id="wrapper">

<video id="first" src="http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8" autoplay></video>
</div>

CSS

.test video {
  max-width: 100px;
  max-height: 100px;
}

JavaScript

var video = document.querySelector('video')
var wrapper = document.querySelector('#wrapper')
var output = document.querySelector('#output')
setTimeout(function() {
	video.addEventListener('seeking', eventPrinter)
	video.addEventListener('seeked', eventPrinter)
  
  
  printIsSeeking()

	video.currentTime = 30
  
  printIsSeeking()
  
  wrapper.classList.add('test')
 
}, 1200)

setTimeout(printIsSeeking, 6000)

function eventPrinter(e) {
	log(e.type + ' : ' + e.target.id)
}

function printIsSeeking() {
	log('Video Seeking? ' + video.seeking) 
}

function log (text) {
	var line = document.createElement('p')
  line.textContent = text
  output.appendChild(line)
}