html5-video-presentation
<html> | |
<head> | |
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> | |
<style> | |
video { | |
width: 100%; | |
height: auto; | |
} | |
</style> | |
</head> | |
<body style="background-color: black"> | |
<div id="wrapper"> | |
<div id="video-player-prototype" class="video-player" style="display:none"> | |
<video src=""> | |
Your browser does not support the <code>video</code> element. | |
</video> | |
</div> | |
</div> | |
</body> | |
</html> | |
<script> | |
/* | |
-------------------------------------------------------------------------- | |
JAVASCRIPT VIDEO PRESENTATION | |
Shows a bunch of HTML5 videos in a presentation style. | |
Keyboard shortcuts: | |
- left/right or PgUp/PgDn: go to previous/next video | |
- space: toggle pause/play for current video | |
- A: toggle autoplay | |
- L: toggle loop | |
- C: toggle HTML5 controls | |
The settings will be saved in localStorage and overridden from there. | |
Author: Werner Robitza | |
-------------------------------------------------------------------------- | |
*/ | |
$(document).ready(function() { | |
// -------------------------------------------------------------------------- | |
// Set the paths to the individual films here. | |
// Recommended format: H.264 in MP4 container, with MOOV atom at the | |
// beginning | |
var films = [ | |
"file1.mp4", | |
"file2.mp4", | |
] | |
// if set to true, start playback immediately | |
var autoplay = true | |
// if set to true, loop presentation | |
var loop = true | |
// show HTML5 controls | |
var controls = false | |
// -------------------------------------------------------------------------- | |
// DO NOT CHANGE ANYTHING BELOW THIS LINE | |
// override settings from localStorage | |
if (localStorage.getItem('loop') != null) { | |
loop = JSON.parse(localStorage.getItem('loop')) | |
console.log("Loaded 'loop' as " + localStorage.getItem('loop') + " from localStorage") | |
} | |
if (localStorage.getItem('autoplay') != null) { | |
autoplay = JSON.parse(localStorage.getItem('autoplay')) | |
console.log("Loaded 'autoplay' as " + localStorage.getItem('autoplay') + " from localStorage") | |
} | |
if (localStorage.getItem('controls') != null) { | |
controls = JSON.parse(localStorage.getItem('controls')) | |
console.log("Loaded 'controls' as " + localStorage.getItem('controls') + " from localStorage") | |
} | |
function playNextVideo() { | |
playVideoAtIndex(currentIndex + 1) | |
} | |
function stopAndHideAllVideos() { | |
$('.video-player').hide() | |
$('.video-player').each(function(){ | |
var video = $(this).find('video').first().get(0) | |
video.currentTime = 0 | |
video.pause() | |
}) | |
} | |
function playVideoAtIndex(index) { | |
stopAndHideAllVideos() | |
// if the end has been reached | |
if (index > maxIndex) { | |
// if looping was enabled, start again | |
if (loop) { | |
playVideoAtIndex(0) | |
} | |
return | |
} | |
if (index < 0) { | |
return | |
} | |
if (index == 0) { | |
currentVideo = $('#video-player-' + index).fadeIn('slow') | |
} else { | |
currentVideo = $('#video-player-' + index).show() | |
} | |
$(currentVideo).find('video').first().get(0).play() | |
currentIndex = index | |
} | |
function togglePauseAtIndex(index) { | |
currentVideo = $('#video-player-' + index) | |
videoPlayer = $(currentVideo).find('video').first().get(0) | |
if (videoPlayer.paused) | |
videoPlayer.play() | |
else | |
videoPlayer.pause() | |
} | |
function toggleControls() { | |
if (controls) | |
$('#wrapper').find('video').attr('controls', 'controls') | |
else | |
$('#wrapper').find('video').removeAttr('controls') | |
} | |
// MAIN SCRIPT | |
// -------------------------------------------------------------------------- | |
var index = 0 | |
films.forEach(function(film) { | |
console.log("Loading film " + film) | |
video = $('#video-player-prototype').clone() | |
video.attr('id', 'video-player-' + index) | |
video.find('video').first().attr('src', film) | |
$('#wrapper').append(video) | |
videoPlayer = video.find('video').first().get(0) | |
videoPlayer.addEventListener('ended', function(){ | |
playNextVideo() | |
}) | |
index = index + 1 | |
}) | |
var maxIndex = index - 1 | |
var currentIndex = -1 | |
var currentVideo = $('#video-player-prototype') | |
// if autoplay was enabled, start right away | |
if (autoplay) { | |
playVideoAtIndex(0) | |
} | |
toggleControls() | |
// -------------------------------------------------------------------------- | |
// keyboard event listeners | |
var KEYCODE_LEFT = 37 | |
var KEYCODE_RIGHT = 39 | |
var KEYCODE_PGUP = 33 | |
var KEYCODE_PGDN = 34 | |
var KEYCODE_SPACE = 32 | |
var KEYCODE_A = 65 | |
var KEYCODE_C = 67 | |
var KEYCODE_L = 76 | |
$(document).keydown(function(e) { | |
console.log("Key pressed " + e.keyCode) | |
switch(e.which) { | |
case KEYCODE_LEFT: | |
case KEYCODE_PGUP: | |
if (currentIndex < 0) { | |
console.log("Not able to go left.") | |
} | |
playVideoAtIndex(currentIndex - 1) | |
break | |
case KEYCODE_RIGHT: | |
case KEYCODE_PGDN: | |
if (currentIndex >= maxIndex) { | |
console.log("Not able to go right.") | |
} | |
playVideoAtIndex(currentIndex + 1) | |
break | |
case KEYCODE_SPACE: | |
togglePauseAtIndex(currentIndex) | |
break | |
case KEYCODE_C: | |
controls = !controls | |
console.log("Set 'controls' to " + controls) | |
localStorage.setItem('controls', controls) | |
toggleControls(controls) | |
break | |
case KEYCODE_L: | |
loop = !loop | |
console.log("Set 'loop' to " + loop) | |
localStorage.setItem('loop', loop) | |
break | |
case KEYCODE_A: | |
autoplay = !autoplay | |
console.log("Set 'autoplay' to " + autoplay) | |
localStorage.setItem('autoplay', autoplay) | |
break | |
default: return | |
} | |
e.preventDefault() | |
}) | |
}) | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment