<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 RANDOM VIDEO PLAYER</title>
<style>
* {
margin: 0; /* fallback style */
margin: initial;
}
html {
background-color: black;
color: white;
}
video {
display: block;
margin: 0 auto;
max-height: 100vh;
max-width: 100vw;
}
</style>
</head>
<body>
<section id="videos">
<video poster="video1.png" controls="controls" preload="none">
<source type="video/mp4" src="https://ia601604.us.archive.org/34/items/BrianCambellIfYouAreEverAround/Brian%20Cambell%20-%20If%20You%20Are%20Ever%20Around.mp4">
</video>
<video poster="video2.png" controls="controls" preload="none">
<source type="video/mp4" src="https://ia802602.us.archive.org/20/items/THERAINVILLESGOONTHEROAD/THE%20RAINVILLES%20GO%20ON%20THE%20ROAD.mp4">
</video>
<video poster="video3.png" controls="controls" preload="none">
<source type="video/mp4" src="https://ia801302.us.archive.org/5/items/TownOfAjaxOntarioCanada/Town%20of%20Ajax%20Ontario%20Canada.mp4">
</video>
</section>
<script>
(function () {
"use strict";
var videosSection = document.getElementById("videos");
var videosSectionClone = videosSection.cloneNode();
var videos = videosSection.getElementsByTagName("video");
var randomVideo = videos.item(Math.floor(Math.random() * videos.length)).cloneNode(true);
randomVideo.removeAttribute("controls");
randomVideo.setAttribute("preload", "auto");
videosSectionClone.appendChild(randomVideo);
videosSection.parentNode.replaceChild(videosSectionClone, videosSection);
randomVideo.play();
})();
</script>
</body>