pooper Looper

adding poop function. loop HTML5 video

by trentHarlem

HTML

<div id='container'>

  <div>
    <input id="video-input" type="file" accept="video/*" /><br><br>
  </div>
  <video id="video" controls autoplay loop muted>
  </video>
  <fieldset id='loopControls' legend='loop controls'>
    <legend>Loop controls:</legend>
    <button id="start">Loop <b>Start</b></button>
    <button id="end">Loop <b>End</b></button>
    <button id="button"><b>Play</b> Loop</button>
    <button id="stopButton"><b>Clear</b> Loop</button>
  </fieldset>
  <div id="message"></div>
  <div>
    <p>
      <ol>
        <li>Click "Choose File" to Select a Video .mp4 etc (.mov only plays on Safari)</li>
        <li>Click "Loop <b>Start</b>" at the point in the vid you want the loop to start</li>
        <li>CLick "Loop <b>End</b>" when you want loop to end</li>
        <li>Click "<b>Play</b> Loop"
        </li>
        <li>Click "OK" anytime a error message appears.. </li>
        <li>Click <b>Clear</b> loop to exit the current loop. </li>
      </ol>
    </p>
  </div>
</div>

CSS

* {
  font-family: system-ui;
  text-align: left;
}

ol {
  line-height: 1.3em;
}

#video {
  width: 100%;
  height: auto;
}

JavaScript

const fileLength = 0;

       (function localFileVideoPlayer() {
	'use strict'
  var URL = window.URL || window.webkitURL
  var displayMessage = function (message, isError) {
    var element = document.querySelector('#message')
    element.innerHTML = message
    element.className = isError ? 'error' : 'info'
  }
  var playSelectedFile = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')
    var canPlay = videoNode.canPlayType(type)
    if (canPlay === '') canPlay = 'no'
    var message = 'Can play type "' + type + '": ' + canPlay
    var isError = canPlay === 'no'
    displayMessage(message, isError)

    if (isError) {
      return
    }

    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)

  document.getElementById('video-input').addEventListener("click", function() {
    document.getElementById('video-input').style.display = 'none';
  
});
  
})()

// LOOPER
const ready = () => {
      const video = document.getElementById('video');
      const button = document.getElementById('button');
      const startButton = document.getElementById('start');
      const endButton = document.getElementById('end');
      const stopButton = document.getElementById('stopButton');
      let timeStamp = [];
      
      getLoopStart = () => {
        timeStamp[0] = video.currentTime
        num = video.currentTime
        // loopStart = video.currentTime
        // timeStamp.unshift(loopStart);
        console.log(Math.round( num * 100 + Number.EPSILON ) / 100)
        console.log('start')
        console.log(timeStamp)
      }
      startButton.addEventListener('click', getLoopStart);
      
      getLoopEnd = () => {
        timeStamp[1] = video.currentTime
        // loopEnd = video.currentTime
        // timeStamp.push(loopEnd)
        console.log('end')
       ...