JSFiddle - React, Tailwind, and code Playground

by blueseal

HTML

<script src="https://raw.githubusercontent.com/antimatter15/whammy/master/whammy.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <script src="whammy.js"></script>
    <meta charset="utf8">
    <title>HTML5 Images to Video Converter | TechSlides</title>

    <style>
      body {
        text-align: center;
      }

      ul {
        list-style: none;
      }

      #drag {
        border: 10px solid black;
        text-align: center;
        padding: 20px;
        width: 500px;
        margin: auto;
        display: inline-block;
      }

      #einput {
        width: 400px;
      }

      #output {
        margin: 20px;
      }

      #filesinput {
        visibility: collapse;
        width: 0px;
      }

      #output img {
        border: 5px solid #333;
        margin-right: 2px;
      }

      #small label {
        font-size: 14px;
      }

      #small div {
        margin: 5px 0;
      }

    </style>

  </head>

  <body>
    <h1>HTML5 Video Editor and Photo SlideShow Creator</h1>

    <p>Select some photos, set some options, and watch how a video is generated using your images as a slideshow. Check out the source to see how it works. <a href="http://techslides.com/convert-images-to-video-with-javascript/">Back to Article</a></p><br>

    <span id="status">Select some images.</span><br><br>


    <div id="drag">DROP!
      <button id="fbutton">Select Image(s)</button>
      <div id="small">
        <div><label>Width:</label><input id="width" type="number" step="1" value="500"></div>
        <div><label>Height:</label><input id="height" type="number" step="1" value="300"></div>
        <div><label>Video Frame Rate:</label><input id="framerate" type="number" step="1" value="15"></div>
      </div>
      <button id="createvideo">Create Video</button>
    </div>
    <input type="file" id="filesinput" multiple>

    <br>
    <video id="awesome" controls autoplay loop></video>
    <br>

    <a style="display:none" id="download"...

JavaScript

window.addEventListener('load', () => {
  console.log(window.whammy)

  /* Drag'n drop stuff */
  var drag = document.getElementById("drag");
  var fbutton = document.getElementById("fbutton");
  var createvideo = document.getElementById("createvideo");
  var files = document.getElementById("filesinput");

  var ctx = 0;

  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  //image to video via Whammy
  var video = new Whammy.Video(15);

  var filesarr = [];



  createvideo.addEventListener("click", function() {

    document.getElementById('status').innerHTML = "Working... Please Wait.";

    document.getElementById('awesome').src = "";
    ctx = 0;

    canvas.width = document.getElementById("width").value;
    canvas.height = document.getElementById("height").value;
    video = new Whammy.Video(document.getElementById("framerate").value);

    //if we have images loaded
    if (filesarr.length > 0) {

      //loop through them and process
      for (i = 0; i < filesarr.length; i++) {
        var file = filesarr[i];
        if (file.type.match(/image.*/)) {
          process(file);
        } else {
          document.getElementById('status').innerHTML = "This file does not seem to be a image.";
        }
      }

    } else {
      document.getElementById('status').innerHTML = "Please select some images.";
    }

  }, false);





  fbutton.addEventListener("click", function() {
    document.getElementById('filesinput').click();
  }, false);

  drag.ondragover = function(e) {
    e.preventDefault()
  }
  drag.ondrop = function(e) {
    e.preventDefault();
    filesarr = e.dataTransfer.items;
    document.getElementById('status').innerHTML = "Please select options and click on Create Video.";
  }

  //process files VIA INPUT
  files.addEventListener("change", function(e) {
    filesarr = e.target.files;
    document.getElementById('status').innerHTML = "Please select options and click on Create Video.";
  }, false);



 ...