web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-25 11:13:52 +02:00
Code Releases Activity

Cleaned up code from text track additions.

Browse Source
This commit is contained in:
Steve Heffernan 2012-03-16 12:45:51 -07:00
parent 2aa5a2ee09
commit 7aa70fe7be
3 changed files with 81 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
design/video-js.css
View File

@ -48,7 +48,7 @@ body.vjs-full-window {
margin: 0 auto; padding: 0; cursor: pointer;
/* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
position: relative; width: 100%; max-height: 100%;
position: relative; width: 100%; max-height: 100%;
}
/* Text Track Styles */
@ -67,7 +67,7 @@ body.vjs-full-window {
.vjs-fade-in {
visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
opacity: 1 !important;
-webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
-moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
-ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
@ -167,8 +167,6 @@ so you can upgrade to newer versions easier. You can remove all these styles by
background: -o-linear-gradient(top, #333, #666);
background: -ms-linear-gradient(top, #333, #666);
background: linear-gradient(top, #333, #666);
border: 1px solid #000;
}
.vjs-default-skin .vjs-volume-level {
position: absolute; top: 0; left: 0; height: 0.6em;
@ -440,10 +438,10 @@ div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; to
/* Menu Buttons (Captions/Subtitles/etc.)
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-menu-button {
.vjs-default-skin .vjs-menu-button {
float: right; margin: 0.2em 0.5em 0 0; padding: 0; width: 3em; height: 2em; cursor: pointer !important;
border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
background: #4d4d4d;
background: -moz-linear-gradient(top, #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
@ -458,8 +456,8 @@ div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; to
.vjs-default-skin .vjs-menu-button:focus { border: 1px solid #fff; }
/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button ul {
display: none; /* Start hidden. Hover will show. */
.vjs-default-skin .vjs-menu-button ul {
display: none; /* Start hidden. Hover will show. */
opacity: 0.8;
padding: 0; margin: 0;
position: absolute; width: 10em; bottom: 2em; max-height: 15em;
@ -479,7 +477,7 @@ div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; to
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus { background-color: #ccc; color: #111; }
.vjs-default-skin .vjs-menu-button ul li:focus { outline: 0; }
.vjs-default-skin .vjs-menu-button ul li.vjs-selected { text-decoration: underline; background: url('video-js.png') -125px -50px no-repeat; }
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
text-align: center; text-transform: uppercase; font-size: 1em; line-height: 2em; padding: 0; margin: 0 0 0.3em 0;
color: #fff; font-weight: bold;

65
src/controls.js vendored
View File

@ -53,7 +53,7 @@ _V_.ControlBar = _V_.Component.extend({
this._super();
this.player.triggerEvent("controlshidden");
},
lockShowing: function(){
this.el.style.opacity = "1";
}
@ -221,7 +221,7 @@ _V_.BigPlayButton = _V_.Button.extend({
onClick: function(){
// Go back to the beginning if big play button is showing at the end.
// Have to check for current time otherwise it might throw a 'not ready' error.
if(this.player.currentTime()) {
if(this.player.currentTime()) {
this.player.currentTime(0);
}
this.player.play();
@ -252,9 +252,9 @@ _V_.LoadingSpinner = _V_.Component.extend({
var classNameSpinner, innerHtmlSpinner;
if ( typeof this.player.el.style.WebkitBorderRadius == "string"
|| typeof this.player.el.style.MozBorderRadius == "string"
|| typeof this.player.el.style.KhtmlBorderRadius == "string"
if ( typeof this.player.el.style.WebkitBorderRadius == "string"
|| typeof this.player.el.style.MozBorderRadius == "string"
|| typeof this.player.el.style.KhtmlBorderRadius == "string"
|| typeof this.player.el.style.borderRadius == "string")
{
classNameSpinner = "vjs-loading-spinner";
@ -788,4 +788,59 @@ _V_.Poster = _V_.Button.extend({
onClick: function(){
this.player.play();
}
});
/* Menu
================================================================================ */
// The base for text track and settings menu buttons.
_V_.Menu = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
},
addItem: function(component){
this.addComponent(component);
component.addEvent("click", this.proxy(function(){
this.unlockShowing();
}));
},
createElement: function(){
return this._super("ul", {
className: "vjs-menu"
});
}
});
_V_.MenuItem = _V_.Button.extend({
init: function(player, options){
this._super(player, options);
if (options.selected) {
this.addClass("vjs-selected");
}
},
createElement: function(type, attrs){
return this._super("li", _V_.merge({
className: "vjs-menu-item",
innerHTML: this.options.label
}, attrs));
},
onClick: function(){
this.selected(true);
},
selected: function(selected){
if (selected) {
this.addClass("vjs-selected");
} else {
this.removeClass("vjs-selected")
}
}
});

80
src/tracks.js
View File

@ -132,11 +132,11 @@ _V_.Track = _V_.Component.extend({
// Show: Mode Showing (2)
// Indicates that the text track is active. If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily.
// The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
// In addition, for text tracks whose kind is subtitles or captions, the cues are being displayed over the video as appropriate;
// for text tracks whose kind is descriptions, the user agent is making the cues available to the user in a non-visual fashion;
// The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
// In addition, for text tracks whose kind is subtitles or captions, the cues are being displayed over the video as appropriate;
// for text tracks whose kind is descriptions, the user agent is making the cues available to the user in a non-visual fashion;
// and for text tracks whose kind is chapters, the user agent is making available to the user a mechanism by which the user can navigate to any point in the media resource by selecting a cue.
// The showing by default state is used in conjunction with the default attribute on track elements to indicate that the text track was enabled due to that attribute.
// The showing by default state is used in conjunction with the default attribute on track elements to indicate that the text track was enabled due to that attribute.
// This allows the user agent to override the state if a later track is discovered that is more appropriate per the user's preferences.
show: function(){
this.activate();
@ -146,10 +146,10 @@ _V_.Track = _V_.Component.extend({
// Show element.
this._super();
},
// Hide: Mode Hidden (1)
// Indicates that the text track is active, but that the user agent is not actively displaying the cues.
// If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily.
// Indicates that the text track is active, but that the user agent is not actively displaying the cues.
// If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily.
// The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
hide: function(){
// When hidden, cues are still triggered. Disable to stop triggering.
@ -209,16 +209,16 @@ _V_.Track = _V_.Component.extend({
// A readiness state
// One of the following:
//
//
// Not loaded
// Indicates that the text track is known to exist (e.g. it has been declared with a track element), but its cues have not been obtained.
//
//
// Loading
// Indicates that the text track is loading and there have been no fatal errors encountered so far. Further cues might still be added to the track.
//
//
// Loaded
// Indicates that the text track has been loaded with no fatal errors. No new cues will be added to the track except if the text track corresponds to a MutableTextTrack object.
//
//
// Failed to load
// Indicates that the text track was enabled, but when the user agent attempted to obtain it, this failed in some way (e.g. URL could not be resolved, network error, unknown text track format). Some or all of the cues are likely missing and will not be obtained.
load: function(){
@ -464,60 +464,8 @@ _V_.TextTrackDisplay = _V_.Component.extend({
});
/* Menu
/* Text Track Menu Items
================================================================================ */
_V_.Menu = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
},
addItem: function(component){
this.addComponent(component);
component.addEvent("click", this.proxy(function(){
this.unlockShowing();
}));
},
createElement: function(){
return this._super("ul", {
className: "vjs-menu"
});
}
});
_V_.MenuItem = _V_.Button.extend({
init: function(player, options){
this._super(player, options);
if (options.selected) {
this.addClass("vjs-selected");
}
},
createElement: function(type, attrs){
return this._super("li", _V_.merge({
className: "vjs-menu-item",
innerHTML: this.options.label
}, attrs));
},
onClick: function(){
this.selected(true);
},
selected: function(selected){
if (selected) {
this.addClass("vjs-selected");
} else {
this.removeClass("vjs-selected")
}
}
});
_V_.TextTrackMenuItem = _V_.MenuItem.extend({
init: function(player, options){
@ -648,7 +596,7 @@ _V_.TextTrackButton = _V_.Button.extend({
this.menu.unlockShowing();
}));
},
// Can't turn off list display that we turned on with focus, because list would go away.
// Can't turn off list display that we turned on with focus, because list would go away.
onBlur: function(){},
onClick: function(){
@ -779,7 +727,7 @@ _V_.ChaptersTrackMenuItem = _V_.MenuItem.extend({
update: function(time){
var cue = this.cue,
currentTime = this.player.currentTime();
// _V_.log(currentTime, cue.startTime);
if (cue.startTime <= currentTime && currentTime < cue.endTime) {
this.selected(true);