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

add comments, change structure of parsing data- attribs

Browse Source
This commit is contained in:
Sanj 2012-05-07 07:44:21 +05:30
parent 8c7d55f67b
commit 04d8953464
2 changed files with 166 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -3,6 +3,13 @@
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="padmavideo.js"></script>
<script type="text/javascript">
$(function() {
$('.padmaVideo').padmavideo({
'callback': function(video) { console.log(video); foo = video;}
});
});
</script>
</head>
<body>
<div class="padmaVideo" data-padma-id="AJW"></div>

192
padmavideo.js
View File

@ -1,28 +1,48 @@
'use strict';
(function($) {
$.fn.padmavideo = function(id, options) {
$.fn.padmavideo = function(options) {
//get options, giving preference, in order, to data- attributes defined on the html element, options passed when instantiatiing $(element).padmavideo(options), defaults.
var options = options || {},
namespace = options.namespace || "padma",
$this = this;
var optionTypes = {
'strings': ['api', 'base', 'resolution', 'action', 'id'],
'integers': ['in', 'out', 'width', 'interval'],
'arrays': ['layers', 'keys']
//'functions': ['callback'] FIXME: lets not.
};
var dataOptions = $.extend(options, $this.getDataOptions(optionTypes, namespace));
var opts = $.extend({
'id': 'ABC', //FIXME: throw an error if id is undefined at this point
'layers': ['transcripts'],
'url': "http://pad.ma/api/",
'time_in': 0,
'time_out': 0,
'keys': ['layers'], //FIXME: add more apt keys
'api': "http://pad.ma/api/",
'in': 0,
'out': 0,
'padma_base': 'http://pad.ma/',
'resolution': '480p',
'width': '640',
'interval': 400,
'action': 'get' //action POST param to send to url
}, options);
var $this = this;
'action': 'get', //action POST param to send to url
'callback': function() { $.noop(); } //function to call after done instantiating PadmaVideo object, called with the object.
}, dataOptions);
var keys = ['layers']; //FIXME: add more apt keys
var $loading = $('<div />').addClass("padmaLoading").text("Loading video...").appendTo($this);
var sendData = JSON.stringify({'id': id, 'keys': keys});
//alert("hi");
var deferred = $.post(opts.url, {'action': opts.action, 'data': sendData}, function(response) {
//get the padma id and instantiate a PadmaVideo object with the current element and render it and execute optional callback
var id = opts.id,
$loading = $('<div />').addClass("padmaLoading").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 padma = new PadmaVideo(id, response.data, $this, opts);
padma.render();
opts.callback(padma);
}, "json");
deferred.error(function(data) {
@ -30,29 +50,80 @@
});
};
/*
PadmaVideo class
Parameters:
id: <string> pandora video id
data: <object> data for the video object
$el: <jQuery element>
opts: <object> options object
*/
var PadmaVideo = function(id, data, $el, opts) {
this.id = id;
this.data = data;
this.$el = $el;
this.o = opts;
this.videoURL = opts.padma_base + id + "/" + opts.resolution + ".webm";
this.getVideoURL = function() {
return opts.padma_base + id + "/" + opts.resolution + ".webm";
};
//empties element, appends video widget
this.render = function() {
var that = this;
this.$el.empty();
this.$el.append(that.getWidget());
};
/*
Use this to set options on the player from the outside.
Example:
var padmaVideoObject = $('#video').data("padmavideo");
padmaVideoObject.setOption("width", 250);
*/
this.setOption = function(key, val) {
var that = this;
this.o[key] = val;
if ($.inArray(key, ['resolution']) != -1) {
this.destroy();
this.render();
return this;
}
if ($.inArray(key, ['in', 'out', 'layers']) != -1) {
this.updatePlayer();
return this;
}
if ($.inArray(key, ['width']) != -1) {
this.$video.animate({'width': that.o.width + "px"});
return this;
}
console.log("attempt to set invalid option or option which will make no difference to player state");
};
/*
Returns currently defined option for key specified
Parameters:
key: <string> eg. 'width'
*/
this.getOption = function(key) {
return this.o[key] || "invalid option";
};
//returns <jQuery element> widget for this PadmaVideo object
this.getWidget = function() {
var that = this;
var $container = this.$container = $('<div />').addClass("padmaContainer");
var $video = this.$video = $('<video />')
.appendTo($container)
.attr("src", that.videoURL)
.attr("src", that.getVideoURL())
.attr("controls", "controls")
.addClass("padmaVideo")
.animate({'width': that.o.width})
.load()
.bind("loadedmetadata", function() {
that.updatePlayer();
})
.bind("play", function() {
that.interval = setInterval(function() {
that.updatePlayer();
@ -73,18 +144,19 @@
return $container;
};
//update annotations, etc. based on video currentTime
this.updatePlayer = function() {
var that = this;
var currentTime = this.$video[0].currentTime;
//first, handle if video has crossed end-point
if (that.o.time_out != 0) {
if (currentTime > that.o.time_out) {
that.$video[0].currentTime = that.o.time_out;
//first, handle if video has crossed out-point or is before in-point
if (that.o.out != 0) {
if (currentTime >= that.o.out) {
that.$video[0].currentTime = that.o.out;
that.$video[0].pause();
}
if (currentTime < that.o.time_in) {
that.$video[0].currentTime = that.o.time_in;
if (currentTime <= that.o['in']) {
that.$video[0].currentTime = that.o['in'];
that.$video[0].pause();
}
}
@ -113,6 +185,12 @@
}
};
/*
Parameters:
layerName: <string> eg. 'transcripts'
currentTime: <float> in seconds
Returns <array> of matched layer objects
*/
this.getLayersAtTimecode = function(layerName, currentTime) {
var ret = [];
var theseLayers = this.data.layers[layerName];
@ -124,8 +202,19 @@
return ret;
};
this.destroy = function() {
this.$video[0].pause();
this.$video.remove();
this.$el.empty();
};
};
/*
Parameters:
layerName: <string> eg. 'transcripts'
layers: <array> layer objects to render
Returns <jQuery element> for an annotation type - i.e. all 'transcripts', or all 'descriptions'
*/
function getElemForLayer(layerName, layers) {
var $elem = $('<div />').addClass("padmaLayer");
var title = layerName.substr(0,1).toUpperCase() + layerName.substr(1, layerName.length);
@ -142,6 +231,14 @@
return $elem;
}
/*
Silly function to check if two layer arrays are the same (i.e. to check if matchedLayers have changed)
Parameters:
layers1: <array> of layer objects
layers2: <array> of layer objects to compare with
Returns <boolean> true if layer arrays are the same, false if different
FIXME: this id concatenation string comparison is a bit weird, but it seemed like a non-expensive simple way to do it
*/
function isSameLayers(layers1, layers2) {
var idString1 = '',
idString2 = '';
@ -162,34 +259,55 @@
return idString1 == idString2
}
//return true or false based on whether the browser can play padma video
//Returns <boolean> true or false based on whether the browser can play padma video
//FIXME: actually implement this function
function canPlayVideo() {
return true;
}
//loop through all elements with class padmaVideo and automagically instantiate them using optional data- attributes for options
$(document).ready(function() {
$('.padmaVideo').each(function() {
var padmaId = $(this).attr("data-padma-id"),
options = {},
$this = $(this);
/*
Get options from data- attributes
Parameters:
optionTypes: <object>
example: {
'strings': ['option1', 'option2', 'option3'],
'integers': ['fooint', 'barint'],
'arrays': ['list1', 'list2']
}
if ($this.hasAttr("data-padma-layers")) options.layers = $this.attr("data-padma-layers");
if ($this.hasAttr("data-padma-url")) options.url = $this.attr("data-padma-url");
if ($this.hasAttr("data-padma-in")) options.time_in = $this.attr("data-padma-in");
if ($this.hasAttr("data-padma-out")) options.time_out = $this.attr("data-padma-out");
if ($this.hasAttr("data-padma-base")) options.padma_base = $this.attr("data-padma-base");
if ($this.hasAttr("data-padma-resolution")) options.resolution = $this.attr("data-padma-resolution");
if ($this.hasAttr("data-padma-width")) options.width = $this.attr("data-padma-width");
if ($this.hasAttr("data-padma-interval")) options.interval = $this.attr("data-padma-interval");
// if ($this.hasAttr("data-padma-height")) options.height = $this.attr("data-padma-height");
namespace: <string>
example: 'padma'
namespace for data- attributes
$this.padmavideo(padmaId, options);
example html:
<div id="blah" data-padma-option1="foobar" data-padma-fooint="23" data-padma-list2="apples, oranges">
usage:
var dataOptions = $('#blah').getDataOptions(optionTypes, namespace);
*/
$.fn.getDataOptions = function(optionTypes, namespace) {
var $element = this;
var prefix = "data-" + namespace + "-",
options = {};
$.each(optionTypes['strings'], function(i,v) {
var attr = prefix + v;
options[v] = $element.hasAttr(attr) ? $element.attr(attr) : undefined;
});
$.each(optionTypes['integers'], function(i,v) {
var attr = prefix + v;
options[v] = $element.hasAttr(attr) ? parseInt($element.attr(attr)) : undefined;
});
$.each(optionTypes['arrays'], function(i,v) {
var attr = prefix + v;
options[v] = $element.hasAttr(attr) ? $element.attr(attr).split(",") : undefined;
});
return options;
}
/*
FIXME: possibly improve - http://stackoverflow.com/questions/1318076/jquery-hasattr-checking-to-see-if-there-is-an-attribute-on-an-element#1318091
*/
$.fn.hasAttr = function(attr) {
return this.attr(attr) != undefined;
};