slhck/html5-video-presentation.html

## html5-video-presentation.html
<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>
	<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>