Video player and events

Attempting to figure out what's up with the video player and the events it uses :/

by David Iglesias

HTML

<video id="vid" src="https://github.com/flutter/packages/blob/2e1673307ff7454aff40b47024eaed49a9e77e81/packages/video_player/video_player/example/assets/Butterfly-209.webm?raw=true" playsinline></video>
<div id="controls">
  <input type="button" id="play" value="▶️" disabled />
  <input type="button" id="pause" value="⏸️" disabled />  
  <input type="range" id="progress" min="0" step="0.01" />
</div>

CSS

* { box-sizing: border-box; }
video, #controls { width: 320px; }
#controls {
  display: flex;
  gap: 4px;
}

#progress { flex: 1; }

JavaScript

if (!vid.autoplay) {
  console.log('Forcing auto-play programmatically');
  vid.muted = true;
  vid.play();
}

vid.addEventListener('seeking', (e) => {
  console.log(e.type);
  play.disabled = true;
});

vid.addEventListener('canplay', (e) => {
  console.log(e.type);
  play.disabled = false;
});

vid.addEventListener('play', (e) => {
  // When vid.play() is called!
  // This doesn't mean that the video is play*ing*.
  console.log(e.type);
});

vid.addEventListener('playing', (e) => {
  console.log(e.type);
  play.disabled = true;
  pause.disabled = false;
});

vid.addEventListener('ended', (e) => {
  console.log(e.type);
});

vid.addEventListener('pause', (e) => {
  console.log(e.type);
  play.disabled = false;
  pause.disabled = true;
});

vid.addEventListener('loadedmetadata', (e) => {
  console.log(e.type);
	progress.value = 0;
  progress.max = vid.duration;  
});

vid.addEventListener('timeupdate', (e) => {
  console.log(e.type, vid.currentTime);
  progress.value = vid.currentTime;
})

progress.addEventListener('input', (e) => {
  vid.currentTime = progress.value;
});

play.addEventListener('click', (e) => { vid.play(); });
pause.addEventListener('click', (e) => { vid.pause(); });