Playing Video in Reverse

Elements Audio & Video
2

Humble beginning. All the code running it is currently on a button. Movie is in a symbol. Video data is not really optimized for web but it’s just a concept …

var symbolInstance = hypeDocument.getSymbolInstancesByName('video')[0];
var video = symbolInstance.element().querySelector('video');

var continueAtTime = null;
var midpoint = video.duration/2;

if (!video.dataset.hasOwnProperty('isForward')){
	video.dataset.isForward = true;
	continueAtTime = 0;
	video.addEventListener('timeupdate', function(e){
		var isForward = video.dataset.isForward == 'true'; 
		if ( isForward && video.currentTime > midpoint ) {
			video.currentTime=midpoint;
			video.pause();
		} 
	});
} else {
	video.dataset.isForward = !(video.dataset.isForward == 'true');
}

if (continueAtTime==null){
	continueAtTime = ((video.currentTime - midpoint) * -1)  + midpoint;
}

video.currentTime = continueAtTime;
video.play();

Proof of concept:
VideoPlayReverse.html

Download:
VideoPlayReverse.hype.zip

1 Like