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
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.
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".
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.
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 |
/**********************
* 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";
}
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!
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