JSFiddle - React, Tailwind, and code Playground

by dustinkerstein

HTML

<h2>h264</h2>
<video id="h264" controls autoplay muted width="300"></video>
<h2>vp9</h2>
<video id="vp9" controls autoplay muted width="300"></video>

JavaScript

const h264src = "https://data.panomoments.com/processed/5849a51bc26d08000b62f9f8/591cd3a6f09f94000b5e489e/sd_dashinit.mp4";
const vp9src = "https://data.panomoments.com/processed/5849a51bc26d08000b62f9f8/591cd3a6f09f94000b5e489e/vp9_sd_dashinit.mp4";

const h264 = document.getElementById("h264");
const vp9 = document.getElementById("vp9");

var reloaded = false;

h264.src = h264src;
vp9.src = vp9src;

window.requestAnimationFrame(debug);

function debug() {
  console.log("h264.readyState: " + h264.readyState + " vp9.readyState: " + vp9.readyState)
  if (!reloaded && h264.readyState == 4 && vp9.readyState == 4) {
  	console.log("Reloading src");
  	reloaded = true;
    h264.src = h264src;
		vp9.src = vp9src;
  }
  window.requestAnimationFrame(debug);
}