Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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