144 lines
4.4 KiB
JavaScript
144 lines
4.4 KiB
JavaScript
// PLUGIN: Subtitle
|
|
|
|
(function ( Popcorn ) {
|
|
|
|
var i = 0,
|
|
createDefaultContainer = function( context, id ) {
|
|
|
|
var ctxContainer = context.container = document.createElement( "div" ),
|
|
style = ctxContainer.style,
|
|
media = context.media;
|
|
|
|
var updatePosition = function() {
|
|
var position = context.position();
|
|
// the video element must have height and width defined
|
|
style.fontSize = "18px";
|
|
style.width = media.offsetWidth + "px";
|
|
style.top = position.top + media.offsetHeight - ctxContainer.offsetHeight - 40 + "px";
|
|
style.left = position.left + "px";
|
|
|
|
setTimeout( updatePosition, 10 );
|
|
};
|
|
|
|
ctxContainer.id = id || Popcorn.guid();
|
|
style.position = "absolute";
|
|
style.color = "white";
|
|
style.textShadow = "black 2px 2px 6px";
|
|
style.fontWeight = "bold";
|
|
style.textAlign = "center";
|
|
|
|
updatePosition();
|
|
|
|
context.media.parentNode.appendChild( ctxContainer );
|
|
|
|
return ctxContainer;
|
|
};
|
|
|
|
/**
|
|
* Subtitle popcorn plug-in
|
|
* Displays a subtitle over the video, or in the target div
|
|
* Options parameter will need a start, and end.
|
|
* Optional parameters are target and text.
|
|
* Start is the time that you want this plug-in to execute
|
|
* End is the time that you want this plug-in to stop executing
|
|
* Target is the id of the document element that the content is
|
|
* appended to, this target element must exist on the DOM
|
|
* Text is the text of the subtitle you want to display.
|
|
*
|
|
* @param {Object} options
|
|
*
|
|
* Example:
|
|
var p = Popcorn('#video')
|
|
.subtitle({
|
|
start: 5, // seconds, mandatory
|
|
end: 15, // seconds, mandatory
|
|
text: 'Hellow world', // optional
|
|
target: 'subtitlediv', // optional
|
|
} )
|
|
*
|
|
*/
|
|
|
|
Popcorn.plugin( "subtitle" , {
|
|
|
|
manifest: {
|
|
about: {
|
|
name: "Popcorn Subtitle Plugin",
|
|
version: "0.1",
|
|
author: "Scott Downe",
|
|
website: "http://scottdowne.wordpress.com/"
|
|
},
|
|
options: {
|
|
start: {
|
|
elem: "input",
|
|
type: "text",
|
|
label: "Start"
|
|
},
|
|
end: {
|
|
elem: "input",
|
|
type: "text",
|
|
label: "End"
|
|
},
|
|
target: "subtitle-container",
|
|
text: {
|
|
elem: "input",
|
|
type: "text",
|
|
label: "Text"
|
|
}
|
|
}
|
|
},
|
|
|
|
_setup: function( options ) {
|
|
var newdiv = document.createElement( "div" );
|
|
|
|
newdiv.id = "subtitle-" + i++;
|
|
newdiv.style.display = "none";
|
|
|
|
// Creates a div for all subtitles to use
|
|
( !this.container && ( !options.target || options.target === "subtitle-container" ) ) &&
|
|
createDefaultContainer( this );
|
|
|
|
// if a target is specified, use that
|
|
if ( options.target && options.target !== "subtitle-container" ) {
|
|
// In case the target doesn't exist in the DOM
|
|
options.container = document.getElementById( options.target ) || createDefaultContainer( this, options.target );
|
|
} else {
|
|
// use shared default container
|
|
options.container = this.container;
|
|
}
|
|
|
|
document.getElementById( options.container.id ) && document.getElementById( options.container.id ).appendChild( newdiv );
|
|
options.innerContainer = newdiv;
|
|
|
|
options.showSubtitle = function() {
|
|
options.innerContainer.innerHTML = options.text || "";
|
|
};
|
|
},
|
|
/**
|
|
* @member subtitle
|
|
* The start function will be executed when the currentTime
|
|
* of the video reaches the start time provided by the
|
|
* options variable
|
|
*/
|
|
start: function( event, options ){
|
|
options.innerContainer.style.display = "inline";
|
|
options.showSubtitle( options, options.text );
|
|
},
|
|
/**
|
|
* @member subtitle
|
|
* The end function will be executed when the currentTime
|
|
* of the video reaches the end time provided by the
|
|
* options variable
|
|
*/
|
|
end: function( event, options ) {
|
|
options.innerContainer.style.display = "none";
|
|
options.innerContainer.innerHTML = "";
|
|
},
|
|
|
|
_teardown: function ( options ) {
|
|
options.container.removeChild( options.innerContainer );
|
|
}
|
|
|
|
});
|
|
|
|
})( Popcorn );
|