Skip to content

Instantly share code, notes, and snippets.

@jake

jake/video.html

Last active August 29, 2015 14:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jake/1ad4defb9aa504b75c8e to your computer and use it in GitHub Desktop.
Save jake/1ad4defb9aa504b75c8e to your computer and use it in GitHub Desktop.
Download ZIP
EO video looper
Raw
video.html
<html>
<head>
<title>video</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #000;
}
#bgvid {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: #000 no-repeat;
background-size: cover;
}
#log {
position: fixed;
top: 10px;
left: 10px;
color: #fff;
font-size: 20px;
font-family: monospace;
}
</style>
</head>
<body>
<video autoplay autobuffer loop id="bgvid" poster="poster.jpg">
<source src="video.mp4">
<source src="video.mp4" type="video/mp4">
</video>
<div id="log">loading</div>
<script type="text/javascript">
$("#log").click(function(){
$("#log").hide();
});
$('video').bind('progress', function() {
var progress = ($('video').get(0).buffered.end(0) / $('video').get(0).duration) * 100;
$("#log").text(progress);
if (progress >= 99) $("#log").hide();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment