Random Videos

Play videos radomly

by Thomas Orthbandt

HTML

<video id="myVideo" autoplay muted src="https://test-nominum.pantheonsite.io/wp-content/themes/nominum/assets/images/videos/hero-video.mp4" type="video/mp4"></video>

CSS

body {
    background: #eee;
    margin: 0 auto;
}

video {
    line-height: 100px;
    color: #eee;
    font-weight: bold;
    text-shadow: 0 1px 2px #000;
    text-align: center;
    width: 100%;
}

JavaScript

/*var videos = ['hero-video1'],
 		numVideos = videos.length,
 		count = 0,
 		player = document.getElementById('myVideo');

player.addEventListener('ended',myHandler,false);

function myHandler(e) {
   if(!e)
   { e = window.event; }
   count++;
   player.src="https://dev-nominum.pantheonsite.io/wp-content/themes/nominum/assets/images/videos/hero-video"+count+".mp4";
   count = (count + 0) % numVideos;
}*/

  var videos = [
    'hero-video1',
    'hero-video2',
    //'hero-video3',
    //'hero-video4',
    //'hero-video5',
  ];
  var numVideos = videos.length;
  var count = 0;
  var player = document.getElementById('myVideo');
  player.addEventListener('ended',myHandler,false);

  function myHandler(e) {
      if(!e)
      { e = window.event; }
      count++;
      player.src="https://test-nominum.pantheonsite.io/wp-content/themes/nominum/assets/images/videos/hero-video"+count+".mp4";
      count = (count + 0) % numVideos;
  }