lisajamhoury/keythumbnails.html

## keythumbnails.html
<html>
  <head>
  </head>
  <body>
    <div id=thumbs>Loading video in background...</div>

    <script>

    function videoToImage(iSrc) {

      let i = 0;
      let video = document.createElement("video");
      let thumbs = document.getElementById("thumbs");

      video.addEventListener('loadeddata', function() {
        thumbs.innerHTML = "";
          video.currentTime = i;
      }, false);

      video.addEventListener('seeked', function() {
          // now video has seeked and current frames will show
          // at the time as we expect
          this.generateThumbnail(i);

          // when frame is captured, increase
          i++;

          // if we are not passed end, seek to next interval
          if (i <= video.duration) {
              // this will trigger another seeked event
              video.currentTime = i;
          }
        else {
              // DONE!, next action
          console.log("done!");
          }

      }, false);

      video.preload = "auto";
      // video.src = "./assets/vid_white.webm";
      video.src = iSrc;

      video.generateThumbnail = function() {
        let c = document.createElement("canvas");
        let ctx = c.getContext("2d");
        c.width = this.videoWidth;
        c.height = this.videoHeight;
        ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
        let img = new Image();
        img.src = c.toDataURL('image/webp');
        thumbs.appendChild(img);
      }
    }

    videoToImage("./assets/vid_white.webm");


    </script>

  </body>
</html>
	<html>
	<head>
	</head>
	<body>
	<div id=thumbs>Loading video in background...</div>

	<script>

	function videoToImage(iSrc) {

	let i = 0;
	let video = document.createElement("video");
	let thumbs = document.getElementById("thumbs");

	video.addEventListener('loadeddata', function() {
	thumbs.innerHTML = "";
	video.currentTime = i;
	}, false);

	video.addEventListener('seeked', function() {
	// now video has seeked and current frames will show
	// at the time as we expect
	this.generateThumbnail(i);

	// when frame is captured, increase
	i++;

	// if we are not passed end, seek to next interval
	if (i <= video.duration) {
	// this will trigger another seeked event
	video.currentTime = i;
	}
	else {
	// DONE!, next action
	console.log("done!");
	}

	}, false);

	video.preload = "auto";
	// video.src = "./assets/vid_white.webm";
	video.src = iSrc;

	video.generateThumbnail = function() {
	let c = document.createElement("canvas");
	let ctx = c.getContext("2d");
	c.width = this.videoWidth;
	c.height = this.videoHeight;
	ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
	let img = new Image();
	img.src = c.toDataURL('image/webp');
	thumbs.appendChild(img);
	}
	}

	videoToImage("./assets/vid_white.webm");


	</script>

	</body>
	</html>