Skip to content

Instantly share code, notes, and snippets.

@jgv

jgv/index.html

Created February 5, 2013 00:47
Show Gist options
  • Save jgv/4711166 to your computer and use it in GitHub Desktop.
Save jgv/4711166 to your computer and use it in GitHub Desktop.
Download ZIP
Video scrobbly thing.
Raw
index.html
<!doctype html>
<html>
<head>
<style>
* { margin:0; paddding:0; }
video { width:100%; height:100%; display:none; }
</style>
</head>
<body>
<video id="video" poster="http://content.bitsontherun.com/thumbs/q1fx20VZ-720.jpg" preload="none">
<source src="http://content.bitsontherun.com/videos/q1fx20VZ-52qL9xLP.mp4" type="video/mp4">
<source src="http://content.bitsontherun.com/videos/q1fx20VZ-27m5HpIu.webm" type="video/webm">
</video>
<div id="loading">
<h1>loading!!!</h1>
<img src="http://dump.fm/images/20120120/1327112309485-dumpfm-arjununcle-loading_mac4.gif">
</div>
<script src="srcobble.js"></script>
</body>
</html>
Raw
scrobble.js
!function(window, $){
var mx, dw = document.width, v = document.getElementById("video"), duration, loadedVideo = false, loadedmeta = false;
v.addEventListener('loadedmetadata', function(){
loadedMeta = true;
duration = v.duration;
}, false);
v.addEventListener("canplaythrough", function(){
loadedVideo = true;
}, false);
document.addEventListener("mousemove", function(e){
if (loadedVideo && loadedMeta) {
v.style.display = "block";
document.getElementById("loading").style.display = "none";
mx = e.clientX;
var onPage = mx / dw * 100;
v.currentTime = duration * (onPage / 100);
}
}, false);
window.addEventListener("resize", function(e){
dw = document.width;
}, false)
v.load();
}(window);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment