<h1>View in iPhone (Mobile Safari)</h1>
<p id="status">Loading video...</p>
<canvas id="canvas" />
<video id="video">
  <source src="https://archive.org/download/BigBuckBunny_328/BigBuckBunny_512kb.mp4" type="video/mp4" />
</video>
body {
  text-align: center;
}
h1 {
  font-size: 1.3em;
  font-weight: bold;
}
video {
  display: none;
}
canvas {
  max-width: 100%;
}
View Compiled
const rAF = window.requestAnimationFrame;
const video = document.getElementById('video')
const canvas = document.getElementById('canvas')
canvas.width = 426;
canvas.height = 240;
const context = canvas.getContext('2d')

let t = null

function render(time) {
  context.drawImage(video, 0, 0)
  video.currentTime = Math.round(time / 25) / 1000 * 25
}

function update() {
  render(Date.now() - t)
  rAF(() => update())
}

function init() {
  document.getElementById('status').remove()
  t = Date.now()
  update()
}

video.addEventListener('canplaythrough', () => init())
video.load()
View Compiled
Rerun