<!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');
}