playmepe · May 17, 2023 02:35 · Apr 8, 2015 · Apr 7, 2015 · Apr 7, 2015
diff --git a/html5-video-presentation.html b/html5-video-presentation.html
@@ -1,10 +1,16 @@
 <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; width=100%">
+    <div id="video-player-prototype" class="video-player" style="display:none">
       <video src="">
          Your browser does not support the <code>video</code> element.
       </video>
@@ -22,7 +28,7 @@
 
 Keyboard shortcuts:
 
-- left/right: go to previous/next video
+- left/right or PgUp/PgDn: go to previous/next video
 - space:  toggle pause/play for current video
 - A:      toggle autoplay
 - L:      toggle loop
@@ -94,6 +100,10 @@
       return
     }
 
+    if (index < 0) {
+      return
+    }
+
     if (index == 0) {
       currentVideo = $('#video-player-' + index).fadeIn('slow')
     } else {
@@ -154,21 +164,26 @@
 
   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.")
           }
@@ -181,17 +196,20 @@
 
           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
 

diff --git a/html5-video-presentation.html b/html5-video-presentation.html
@@ -26,6 +26,7 @@
 - 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.
 
@@ -39,15 +40,8 @@
   // Recommended format: H.264 in MP4 container, with MOOV atom at the
   // beginning
   var films = [
-    "00_Main.mp4",
-    "01_Zukunft.mp4",
-    "02_Erlebbare.mp4",
-    "03_Mission.mp4",
-    "04_Empfinden.mp4",
-    "05_Kernaspekte.mp4",
-    "06_Qualitaetsmonitoring.mp4",
-    "07_Dashboard.mp4",
-    "08_Zukuenftige.mp4"
+    "file1.mp4",
+    "file2.mp4",
   ]
 
   // if set to true, start playback immediately
@@ -56,6 +50,9 @@
   // if set to true, loop presentation
   var loop = true
 
+  // show HTML5 controls
+  var controls = false
+
   // --------------------------------------------------------------------------
   // DO NOT CHANGE ANYTHING BELOW THIS LINE
 
@@ -68,6 +65,10 @@
     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)
@@ -102,13 +103,30 @@
     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)
 
@@ -129,13 +147,16 @@
     playVideoAtIndex(0)
   }
 
+  toggleControls()
+
   // --------------------------------------------------------------------------
   // keyboard event listeners
 
   var KEYCODE_LEFT  = 37
   var KEYCODE_RIGHT = 39
   var KEYCODE_SPACE = 32
   var KEYCODE_A     = 65
+  var KEYCODE_C     = 67
   var KEYCODE_L     = 76
 
   $(document).keydown(function(e) {
@@ -155,11 +176,13 @@
           break
 
           case KEYCODE_SPACE:
-          videoPlayer = $(currentVideo).find('video').first().get(0)
-          if (videoPlayer.paused)
-            videoPlayer.play()
-          else
-            videoPlayer.pause()
+          togglePauseAtIndex(currentIndex)
+          break
+
+          case KEYCODE_C:
+          controls = !controls
+          localStorage.setItem('controls', controls)
+          toggleControls(controls)
           break
 
           case KEYCODE_L:

diff --git a/html5-video-presentation.html b/html5-video-presentation.html
@@ -0,0 +1,181 @@
+<html>
+  <head>
+    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
+  </head>
+  <body style="background-color: black">
+  <div id="wrapper">
+    <div id="video-player-prototype" class="video-player" style="display:none; width=100%">
+      <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: go to previous/next video
+- space:  toggle pause/play for current video
+- A:      toggle autoplay
+- L:      toggle loop
+
+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 = [
+    "00_Main.mp4",
+    "01_Zukunft.mp4",
+    "02_Erlebbare.mp4",
+    "03_Mission.mp4",
+    "04_Empfinden.mp4",
+    "05_Kernaspekte.mp4",
+    "06_Qualitaetsmonitoring.mp4",
+    "07_Dashboard.mp4",
+    "08_Zukuenftige.mp4"
+  ]
+
+  // if set to true, start playback immediately
+  var autoplay = true
+
+  // if set to true, loop presentation
+  var loop = true
+
+  // --------------------------------------------------------------------------
+  // 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")
+  }
+
+  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) {
+      currentVideo = $('#video-player-' + index).fadeIn('slow')
+    } else {
+      currentVideo = $('#video-player-' + index).show()
+    }
+    $(currentVideo).find('video').first().get(0).play()
+    currentIndex = index
+  }
+
+  // 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)
+  }
+
+  // --------------------------------------------------------------------------
+  // keyboard event listeners
+
+  var KEYCODE_LEFT  = 37
+  var KEYCODE_RIGHT = 39
+  var KEYCODE_SPACE = 32
+  var KEYCODE_A     = 65
+  var KEYCODE_L     = 76
+
+  $(document).keydown(function(e) {
+      switch(e.which) {
+          case KEYCODE_LEFT:
+          if (currentIndex < 0) {
+            console.log("Not able to go left.")
+          }
+          playVideoAtIndex(currentIndex - 1)
+          break
+
+          case KEYCODE_RIGHT:
+          if (currentIndex >= maxIndex) {
+            console.log("Not able to go right.")
+          }
+          playVideoAtIndex(currentIndex + 1)
+          break
+
+          case KEYCODE_SPACE:
+          videoPlayer = $(currentVideo).find('video').first().get(0)
+          if (videoPlayer.paused)
+            videoPlayer.play()
+          else
+            videoPlayer.pause()
+          break
+
+          case KEYCODE_L:
+          loop = !loop
+          localStorage.setItem('loop', loop)
+          break
+
+          case KEYCODE_A:
+          autoplay = !autoplay
+          localStorage.setItem('autoplay', autoplay)
+          break
+
+          default: return
+      }
+      e.preventDefault()
+  })
+})
+
+</script>