/html5-video-presentation.html
Last active Aug 25, 2017
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