Slo Mo

adding Slow Motion control to HTML5 video player

by trentHarlem

HTML

<div>
  <div>
    <input id="video-input" type="file" accept="video/*" /><br><br>
  </div>
  <video controls autoplay loop muted></video>
  <fieldset>
    <legend>
      speed controls
    </legend>
    <button onclick="setSlowSpeed()" type="button">Slow Motion</button>
    <button onclick="setSuperSlow()" type="button">Super Slow</button>
    <button onclick="setPlaySpeed()" type="button">Original Speed</button>
  </fieldset>
  <span id='message'></span>
</div>

CSS

body {
  display: flex;
  justify-content: center;
  font-family: helvetica, sans-serif, system-ui;
}

/* #video {
  width: 50%;
  height: auto;
} */

JavaScript

let fileLength = 0;
  let file

  (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) {
      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)

    if (file > fileLength) {
      document.getElementById('video-input').style.display = 'none';
    }
  })()



  // Get the video element with id="video"
  var vid = document.querySelector('video')

  // Set the current playback speed to (slow motion)
  function setSlowSpeed() {
    vid.playbackRate = 0.5;
  }
  function setSuperSlow() {
    vid.playbackRate = 0.25;
  }  // Set the current playback speed to the Original Speed
  function setPlaySpeed() {
    vid.playbackRate = 1;
  }