Automatic fullscreen html5 video playback?

Question

I have two little kids (3 & 4) and they like to watch cartoons all the day on their tablets/desktop. So I've uploaded a ton of cartoons on a server. Is there a way, when they tap/click on the link, the cartoons I've uploaded to start in full screen mode from a random video, in random order and looping?! I'm not too familiar with html5 coding, so i beg you to give me a simplest possible code for automated full screen video playback when they open the page... Many many many thanks in advance!!!

Answer 1

This should work:

create an empty html page with 1 video tag with autoplay attribute
then with JavaScript create an array of all the paths to the videos that you want to play
attach a function to the 'ended' event of the video tag
inside the function generate a random index Math.floor(Math.random() * clipPaths.length);
with the generated index get a random path from the array
set the path as the 'src' attribute of the video tag

You just need to put all the paths in the clipPaths array...

 <!DOCTYPE html>
<html>
<head>
  <style>
  video#myVideo { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    background-size: cover; 
}
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<video id="myVideo" controls autoplay>

</video>
  <script>
    clipPaths = [
      'https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv',
      'http://techslides.com/demos/sample-videos/small.mp4',
      'http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4'

    ];
    var myVideo = document.getElementById('myVideo');
    myVideo.addEventListener('ended',myHandler,false);

    function myHandler(e) {
      var randClip = clipPaths[Math.floor(Math.random() * clipPaths.length)];
      myVideo.setAttribute('src',randClip);
    }
    var randClip = clipPaths[Math.floor(Math.random() * clipPaths.length)];

    myVideo.setAttribute('src',randClip);


  </script>
  </body>
</html>

link to working example link

Automatic fullscreen html5 video playback?

Question

1 answers

solution1
0 ACCPTED 2016-01-13 12:36:15

Automatic fullscreen html5 video playback?

Question

1 answers

solution1 0 ACCPTED 2016-01-13 12:36:15

solution1
0 ACCPTED 2016-01-13 12:36:15