Skip to content

Instantly share code, notes, and snippets.

@briancline

briancline/gist:1273117

Created October 9, 2011 00:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save briancline/1273117 to your computer and use it in GitHub Desktop.
Save briancline/1273117 to your computer and use it in GitHub Desktop.
Download ZIP
Proof-of concept: simple polling of messages attached to video positions
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>mur</title>
<script type="text/javascript" src="/static/js/jquery-1.6.wtfever.696969.js"></script>
<script type="text/javascript">
var Anno = {
secsToLookahead: 10,
videoPollIntervalMsec: 3000,
updateIntervalMsec: 1000,
pollVideoPosition: function(e) {
var positionInSecs = $('video').playerTime;
this.loadUpcomingMessagesForTime(positionInSecs);
},
/** Load upcoming annotations from server for the time range [N, N+10] */
loadUpcomingMessagesForTime: function(secs) {
$.getJson(
'/messages?pos=' + secs + '&range=' + this.secsToLookahead,
function(data) {
/** assuming JSON data returned by server in such an array of objects:
*
* [{"secs": 10, "name":"blair", text:"officercurious.jpg"},
* {"secs": 16, "name":"brian", text:"i'd roger that, girlfriend"},
* {"secs": 30, "name":"emmett", text:"meow"}
* ]
*/
for (var i = 0; i < data.length; i++) {
var html =
'<p data="' + data[i].secs + '" style="display:none">' +
'<strong>' + data[i].name + '</strong>: ' +
data[i].text + '</p>';
$(html).appendTo('#timed-messages');
}
});
},
updateIntervalMsec: function() {
var positionInSecs = $('video').playerTime;
$('p[data=' + positionInSecs']').each(function(element) {
$(element).show();
});
}
};
/** set up timers when page finishes loading */
$(function() {
setInterval('Anno.pollVideoPosition', Anno.videoPollIntervalMsec);
setInterval('Anno.updateAnnotationsList', Anno.updateIntervalMsec);
});
</script>
</head>
<body>
<video id="video" controls>
<source type="video/webm; codecs='vp8.0,vorbis'" src="http://video.mur.fm/another-mursday-at-the-office.webm" />
<source type="video/ogg; codecs='theora,vorbis'" src="http://video.mur.fm/another-mursday-at-the-office.ogv" />
<source type="video/mp4; codecs='avc1.4D401E, mp4a.40.2'" src="http://video.mur.fm/another-mursday-at-the-office.m4v" />
</video>
<div id="timed-messages">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment