katspaugh/thumbnails.js

## thumbnails.js
/*
<html>
  <style>
    ::part(thumbnails) {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      overflow: hidden;
    }
    video {
      width: 100%;
    }
  </style>

  <div id="thumbnails" part="thumbnails"></div>

  <video src="/examples/audio/nasa.mp4" controls />
</html>
*/

import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'

const MAX_THUMBS = 5
const thumbnails = document.querySelector('#thumbnails')
const video = document.querySelector('video')
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = 600
canvas.height = 400

const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  media: video,
})

wavesurfer.getWrapper().appendChild(thumbnails)

function captureFrame() {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
  const src = canvas.toDataURL()
  const img = document.createElement('img')
  img.src = src
  return img
}

function onSeeked() {
  if (video.currentTime > 0) {
    const img = captureFrame()
    img.style = `width: ${100 / MAX_THUMBS}%; height: auto; box-sizing: border-box; border: 2px solid #fff;`
    thumbnails.appendChild(img)
  }

  if (video.currentTime < video.duration) {
    video.currentTime += Math.floor(video.duration / MAX_THUMBS)
  } else {
    video.removeEventListener('seeked', onSeeked)
    setTimeout(() => video.currentTime = 0, 100)
  }
}

video.addEventListener('seeked', onSeeked)

wavesurfer.on('ready', () => {
  onSeeked()
})
	/*
	<html>
	<style>
	::part(thumbnails) {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	overflow: hidden;
	}
	video {
	width: 100%;
	}
	</style>

	<div id="thumbnails" part="thumbnails"></div>

	<video src="/examples/audio/nasa.mp4" controls />
	</html>
	*/

	import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'

	const MAX_THUMBS = 5
	const thumbnails = document.querySelector('#thumbnails')
	const video = document.querySelector('video')
	const canvas = document.createElement('canvas')
	const ctx = canvas.getContext('2d')
	canvas.width = 600
	canvas.height = 400

	const wavesurfer = WaveSurfer.create({
	container: document.body,
	waveColor: 'rgb(200, 0, 200)',
	progressColor: 'rgb(100, 0, 100)',
	media: video,
	})

	wavesurfer.getWrapper().appendChild(thumbnails)

	function captureFrame() {
	ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
	const src = canvas.toDataURL()
	const img = document.createElement('img')
	img.src = src
	return img
	}

	function onSeeked() {
	if (video.currentTime > 0) {
	const img = captureFrame()
	img.style = `width: ${100 / MAX_THUMBS}%; height: auto; box-sizing: border-box; border: 2px solid #fff;`
	thumbnails.appendChild(img)
	}

	if (video.currentTime < video.duration) {
	video.currentTime += Math.floor(video.duration / MAX_THUMBS)
	} else {
	video.removeEventListener('seeked', onSeeked)
	setTimeout(() => video.currentTime = 0, 100)
	}
	}

	video.addEventListener('seeked', onSeeked)

	wavesurfer.on('ready', () => {
	onSeeked()
	})