Play HTML5 Video Backwards

In this example below you will see how to do a Play HTML5 Video Backwards with some HTML / CSS and Javascript

Copied from here ... http://jsfiddle.net/bplumb/h9EVQ/8/

Thumbnail
This awesome code was written by Иванов Павел, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Иванов Павел ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Play HTML5 Video Backwards</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <video id="video" preload playsinline mute loop autoplay>
	<source src="https://www.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4" type="video/mp4" preload>
</video>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ardentum/play-html5-video-backwards-paWQGW */
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

html {
  overflow: hidden;
}

video {
  width: 100vw;
  background: #aaa;
  position: fixed;
  top: 0;
}
video.ready {
  background: #222;
}

button {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  padding: 1rem;
  border-radius: 6px;
  cursor: pointer;
}


/*Downloaded from https://www.codeseek.co/ardentum/play-html5-video-backwards-paWQGW */
initMotion();

var speedmodifier = 1;

var log = _.throttle(function () {
  for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
    args[_key] = arguments[_key];
  }

  var res = args.map(function (arg) {
    return _.round(arg, 0);
  }).map(function (arg) {
    return arg === 0 || arg === -0 ? 0 : arg;
  });

  console.log(res);
}, 100);

function initMotion() {
  window.addEventListener('touchmove', function (e) {
    var x = e.changedTouches[0].clientX;
    var time = x / window.innerWidth * 47;
    requestAnimationFrame(function () {
      video.currentTime = Math.max(time, 0);
    });
  });
}

document.addEventListener('touchend', function () {
  video.pause();
  console.log('pause');
});

var FRAME_DELAY = 1 / 60;

function play() {
  video.currentTime = Math.max(video.currentTime + speedmodifier, 0);
  requestAnimationFrame(play);
};

function initVideoPlay() {
  var video = document.getElementById('video');
  var intervalRewind;
  video.currentTime = 23;
  var playing = false;
  video.classList.add('ready');
}

Comments