BubblesJS

HTML5 Video Captions and .SRT Subtitles Support

alert(INTRODUCTION);

Hello there, and thanks for being here.

As of now (and I deeply apologize if I stand mistaken) there is no usable and/or finalised standard for html5 videos and subtitles. There is a very strong initiative for subtitles actually, called WebVTT - through the use of the TRACK tag, but since there is not a complete solution yet - I 've decided to brew my own using the existing good ol' .srt format.

You can view the result below

Captions Demo

(video taken from video for everybody )

Subtitles Demo

+
-
0.00
jump to : 50%
jump to : 18s
jump to : Beginning
HIDE SUBTITLES

while(all[FEATURES--])

Bubbles.HOW_TO[USE];

One of my tagets while developing BubblesJS was to keep things as simple and efficient as possible. Between theory and practice there is a tremendous gap of course, so I will let you be the judge and jury.

Captions

var captionsDemo = new Bubbles.video('video-example',
{
	"hiddenLink" :	{
		type		: "link",
		effect		: "default",
		className	: "default",
		content		: "javascript: alert('YOU CLICKED AN INVISIBLE LINK');",
		dimensions	: [ '30%', '20%' ], //width - height
		position	: [ '70%', '66%' ], //top   - left  |  percent - %, pixels "px"
		config		: [ 2 ],
		callback	: function() { _gaq.push(['_trackPageview', 'Video1 Played']); }
	},
	"test02" :	{
		type		: "content",
		effect		: ["slide", "fade"]
		className	: "bubbles2",
		content	 	: " Hello World. And I am a sliding Box ",
		dimensions	: [ '110px', '17%' ],
		position 	: [ '100px', '200px' ],
		config	 	: [ 5, 8, 11, 15 ]
	}
});

The above snippet simply adds two captions in a video element with the id "video-example".



Subtitles
var test2 = new Bubbles.video('video-srt');
test2.subtitles( false,
	{
		"English" :	{
			language	:	"English",
			file		:	"subs/english.srt"
		},
		"Greek" :	{
			language	:	"Greek",
			file		:	"subs/greek.srt"
		}
	}
);

Things are much more self-explanatory here, we initialize a vieo and save a refference to it at "test2" (var), and then we call to it .subtitles(), and describe where it should fetch the files, and language The rest of the data is being mined from the .srt file itself.

if(!!DOCUMENTATION){

Under construction

Function Name Arguments Description
Bubbles.video id = id of the video element (mandatory)
container_class = class to be added to its container (can be false)
bubbleObject = list of all of the bubble objects
Used as, new Bubbles.video('video-example'); and returns a bubbles js video object which is then later used for the rest functions
Bubbles.videoJS id = id of the video element (mandatory)
container_class = class to be added to its container (can be false)
bubbleObject = list of all of the bubble objects
Used as, new Bubbles.videoJS('video-example'); and returns a bubbles js video object which is then later used for the rest functions - doesnot add its own container but rather uses VideoJS's existing one
object.add object = object caption to be added Used as, myVideObject.add( { ... });
object.remove string = name of object to be removed Accepts a string as the only parameter, and deletes the node assigned to that name
object.subtitles bool = if false then the JS SRT parser will be used, else if 1, then default server script will be used, else if a string/url is given that url will be used for initializing the subtitles
subtitlesObject = the object that containers the language, and filename/folder path for the srt file
Initializes the subtitles of the calling video
object.subsLangSelect string = id of the object where the templates will be placed
string = template code with a mandatory #### part. That part will be edited and replaced with the subtitle's name
The first argument is an object's id, where the language selection menu will be created. The second argument, is a string - "template" which MUST have a #### bit (as a marker). The script will generate each item wrapped into the template with the ### marker replaced by the language's name
object.subsSync num = (float) Accepts a float as the only parameter. If the float is positive the subtitles are delayed by that value. If it is a negative number the subtitles precede the video by the value of the number (in seconds)
object.subsToggle Toggles subtitles (hide/show)
object.subsShow bool = (bool) true/false for hiding or showing If bool === true, then the subtitles are displayed otherwise, are hidden
object.langChange newLang = (string) name of subtitle language Sets the specified language as active
object.jump sec = (float) number (in seconds) which dictates where the video will jump to
percent = (string/bool) can be either true,'%' or false or not specified at all
If the percent argument, is set to '%' or true, then the video will jump to the percent change dictated in the sec argument. For example for jump(50, '%') the video will jump to the middle of it. But for jump(50) the video will jump to 00:00:50
Effects / Transition
/**********************
* object 	- (node) caption node
* data		- (object), contains info such as className, position, dimensions, timing etc
* mode		- (bool), true when showing caption, false when hiding it
*
*
* The purpose of this is... if mode == true, somehow make the object visible
* and if mode == false, make the object invisible - external libraries such as Dojo and jQuery can be used
* extensively for creating new effects and transitions for example
*
* //fade anim in jQuery
* Bubbles.effects['jqFade'] = function( object, data, mode ) {
* 	if( mode ) $( object ).fadeIn(600);
* 	else		 $( object ).fadeOut(200);
* };
*
* Also the data object can be used for keeping track of the desired state.
* Contents of the data object:

		type		: "content",
		effect		: ["slide", "fade"]
		className	: "bubbles2",
		content	: " Hello World. And I am a sliding Box ",
		dimensions	: [ '110px', '17%' ],
		position 	: [ '100px', '200px' ],
		config	 	: [ 5, 8, 11, 15 ],

		callback	: function(){ "stuff" }, //called when the caption appears
		callbackEnd	: function(){ "stuff" } //called when it "dissapears"

**********************/
Bubbles.effects['default'] = function( object, data, mode ) {
	if( mode )
		object.style.display = "block";
	else
		object.style.display = "none";
}
Fun with Callbacks and Google Analytics

Another thing you are able to do is bind a callback function to a caption
For example

var captionsDemo = new Bubbles.video('video-example',
{
	"hiddenLink" :	{
		type		: "link",
		effect		: "default",
		className	: "default",
		content		: "javascript: alert('YOU CLICKED AN INVISIBLE LINK');",
		dimensions	: [ '30%', '20%' ], //width - height
		position	: [ '70%', '66%' ], //top   - left  |  percent - %, pixels "px"
		config		: [ 2 ],
		callback	: function() { _gaq.push(['_trackPageview', 'stuff' ]); }
	},
	"test04" :	{
		type		: "content",
		effect		: "fade",
		className	: "bubbles2",
		content		: " THE BACKGROUND IS NOW BLACK ",
		dimensions	: [ '110px', '20%' ],
		position	: [ '190px', '50px' ],
		config		: [ 4, 9, 40, 50 ],
		callback	: function() { 
			document.getElementsByTagName('body')[0].style.backgroundColor="#000000"; 
		},
		callbackEnd	: function() { 
			document.getElementsByTagName('body')[0].style.backgroundColor="#F0EFF5"; 
		}
	}
});

You can create "invisible" captions and bind to their callback property calls to google analytics or to anything else you like, so you can understand which bits of your video your visitors like - or to which point they got bored ;)

Also you can use the callbacks to perform other cool stuff, and not only tracking. For example in this page near the beginning of the first video (0:00:05) - the background will change to darker colors. You can for example do changes to the page depending on what is happening in the video - and perform other cool things to immerse the viewer more : ) It's all up to you and your imagination!

setTimeout(theFUTURE, now);

Development will be continued on the BubblesJS projects, the documentation is still being worked on and soon this project will appear on github.
Currently I am trying to add a flash fallback - so that this project works in old browsers as well
Please do not hesitate to contact me at pkalogiros[ AT ]live.com