CAMP/jquery.pandoravideo.js
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

return this.each() to work nicely with chaining as well as multiple jquery elements

Browse Source
This commit is contained in:
Sanj 2012-05-18 03:14:28 +05:30
parent a588cd6f90
commit 5e9f216540
1 changed files with 60 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
jquery.pandoravideo.js
View File

@ -1,56 +1,68 @@
'use strict'; 'use strict';
/*
jQuery plugin to embed video from a pan.do/ra instance
Usage:
html:
<div id="video" data-pandora-id="AA"></div>
js:
$('#video').pandoravideo();
Options can be passed as data- attributes in the html or in an options object - read code for docs
*/
(function($) { (function($) {
$.fn.pandoravideo = function(options) { $.fn.pandoravideo = function(options) {
//get options, giving preference, in order, to data- attributes defined on the html element, options passed when instantiatiing $(element).pandoravideo(options), defaults. //get options, giving preference, in order, to data- attributes defined on the html element, options passed when instantiatiing $(element).pandoravideo(options), defaults.
var options = options || {}, var options = options || {},
namespace = options.namespace || "pandora", namespace = options.namespace || "pandora",
$this = this;
optionTypes = {
'strings': ['api', 'base', 'resolution', 'action', 'id'],
var optionTypes = { 'integers': ['width', 'interval'],
'strings': ['api', 'base', 'resolution', 'action', 'id'], 'floats': ['in', 'out'],
'integers': ['in', 'out', 'width', 'interval'], 'arrays': ['layers', 'keys'],
'arrays': ['layers', 'keys'], 'booleans': []
'booleans': [] //'functions': ['callback'] FIXME: lets not.
//'functions': ['callback'] FIXME: lets not. };
};
var dataOptions = $.extend(options, $this.getDataOptions(optionTypes, namespace));
return this.each(function() {
var $this = $(this),
dataOptions = $.extend(options, $this.getDataOptions(optionTypes, namespace)),
opts = $.extend({
'id': 'ABC', //FIXME: throw an error if id is undefined at this point
'layers': ['transcripts', 'descriptions', 'keywords', 'places'],
'keys': ['layers'], //data keys to fetch from API call. FIXME: add more apt keys
'api': "//pad.ma/api/", //pandora instance api end-point - see http://pad.ma/api
'in': 0, //in point (float, in seconds) of clip
'out': 0, //out point of clip
'pandora_base': 'pad.ma/', //pandora instance from where to fetch video and image data
'resolution': '480p', //resolution of video (96p, 240p, or 480p)
'width': '640', //display (css) width
'interval': 300, //interval (in ms) to run updatePlayer polling loop
'action': 'get', //action POST param to send to url
'callback': function() { $.noop(); } //function to call after done instantiating pandoraVideo object, called with the object.
}, dataOptions),
id = opts.id,
$loading = $('<div />').addClass("pandoraLoading").text("Loading video...").appendTo($this),
sendData = JSON.stringify({'id': id, 'keys': opts.keys});
var opts = $.extend({ //get the pandora id and instantiate a pandoraVideo object with the current element and render it and execute optional callback
'id': 'ABC', //FIXME: throw an error if id is undefined at this point var deferred = $.post(opts.api, {'action': opts.action, 'data': sendData}, function(response) {
'layers': ['transcripts', 'descriptions', 'keywords', 'places'], $loading.hide().remove();
'keys': ['layers'], //data keys to fetch from API call. FIXME: add more apt keys var pandora = new PandoraVideo(id, response.data, $this, opts);
'api': "//pad.ma/api/", //pandora instance api end-point - see http://pad.ma/api pandora.render();
'in': 0, //in point (float, in seconds) of clip opts.callback(pandora);
'out': 0, //out point of clip }, "json");
'pandora_base': '//pad.ma/', //pandora instance from where to fetch video and image data
'resolution': '480p', //resolution of video (96p, 320p, or 480p)
'width': '640', //display (css) width
'interval': 300, //interval (in ms) to run updatePlayer polling loop
'action': 'get', //action POST param to send to url
'callback': function() { $.noop(); } //function to call after done instantiating pandoraVideo object, called with the object.
}, dataOptions);
//get the pandora id and instantiate a pandoraVideo object with the current element and render it and execute optional callback deferred.error(function(data) {
var id = opts.id, alert("failed to load video data");
$loading = $('<div />').addClass("pandoraLoading").text("Loading video...").appendTo($this), });
sendData = JSON.stringify({'id': id, 'keys': opts.keys});
var deferred = $.post(opts.api, {'action': opts.action, 'data': sendData}, function(response) {
$loading.hide().remove();
var pandora = new PandoraVideo(id, response.data, $this, opts);
pandora.render();
opts.callback(pandora);
}, "json");
deferred.error(function(data) {
alert("failed to load video data");
}); });
}; };
/* /*
pandoraVideo class pandoraVideo class
Parameters: Parameters:
@ -68,7 +80,8 @@
this.o = opts; this.o = opts;
this.annotPoint = -1; this.annotPoint = -1;
this.getVideoURL = function() { this.getVideoURL = function() {
return opts.pandora_base + id + "/" + opts.resolution + ".webm"; var rand = parseInt(Math.random() * 10000);
return "//video" + rand + "." + opts.pandora_base + id + "/" + opts.resolution + ".webm";
}; };
//empties element, appends video widget //empties element, appends video widget
@ -184,11 +197,11 @@
//first, handle if video has crossed out-point or is before in-point //first, handle if video has crossed out-point or is before in-point
if (that.o.out != 0) { if (that.o.out != 0) {
if (currentTime >= that.o.out) { if (currentTime > (that.o.out + 2)) {
that.$video[0].currentTime = that.o.out; that.$video[0].currentTime = that.o.out;
that.$video[0].pause(); that.$video[0].pause();
} }
if (currentTime <= that.o['in']) { if (currentTime < (that.o['in'] - 2)) {
that.$video[0].currentTime = that.o['in']; that.$video[0].currentTime = that.o['in'];
that.$video[0].pause(); that.$video[0].pause();
} }
@ -341,6 +354,10 @@
var attr = prefix + v; var attr = prefix + v;
options[v] = $element.hasAttr(attr) ? parseInt($element.attr(attr)) : undefined; options[v] = $element.hasAttr(attr) ? parseInt($element.attr(attr)) : undefined;
}); });
$.each(optionTypes['floats'], function(i,v) {
var attr = prefix + v;
options[v] = $element.hasAttr(attr) ? parseFloat($element.attr(attr)) : undefined;
});
$.each(optionTypes['arrays'], function(i,v) { $.each(optionTypes['arrays'], function(i,v) {
var attr = prefix + v; var attr = prefix + v;
options[v] = $element.hasAttr(attr) ? $.map($element.attr(attr).split(","), $.trim) : undefined; options[v] = $element.hasAttr(attr) ? $.map($element.attr(attr).split(","), $.trim) : undefined;