Skip to content
Browse files

Adding labels to play/pause, full-screen, etc.

  • Loading branch information...
1 parent 389b929 commit 0202a33e5552397173d707c314e36bcb4bbcda2d @jeffsmith jeffsmith committed Feb 17, 2011
Showing with 9 additions and 4 deletions.
  1. +3 −2 video-js.css
  2. +6 −2 video.js
View
5 video-js.css
@@ -143,7 +143,7 @@ so you can upgrade to newer versions easier. */
-------------------------------------------------------------------------------- */
.vjs-play-control { cursor: pointer !important; }
/* Play Icon */
-.vjs-play-control span { display: block; font-size: 1em; line-height: 0; }
+.vjs-play-control span { display: block; font-size: 1em; line-height: 0; text-indent: -9999em; }
.vjs-paused .vjs-play-control span {
width: 0; height: 0; margin: 0.8em 0 0 0.8em;
/* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
@@ -211,7 +211,7 @@ so you can upgrade to newer versions easier. */
/* Subtitles control
-------------------------------------------------------------------------------- */
-.vjs-controls .vjs-subtitles-control { font-size: 1em; line-height: 1em; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
+.vjs-controls .vjs-subtitles-control { cursor: pointer !important; font-size: 1em; line-height: 1em; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
.vjs-controls .vjs-subtitles-control abbr { line-height: 1.2em; border:none; /* Centering vertically */ }
.vjs-controls .vjs-subtitles-control span { display:block; border:0.25em solid #fff; position: relative; width: 1.6em; margin: 0.5em 0.25em; text-align:center; }
.vjs-controls .vjs-subtitles-control span span { border:0.2em solid #fff; position: relative; margin:-0.2em -0.2em;
@@ -223,6 +223,7 @@ border-radius: 0.5em; /* Opera 10.5, IE 9 */
/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-fullscreen-control { cursor: pointer !important; }
+.vjs-fullscreen-control span:first-child { float: left; text-indent: -9999em; }
.vjs-fullscreen-control div {
padding: 0; text-align: left; vertical-align: top; cursor: pointer !important;
margin: 0.5em 0 0 0.5em; /* Placement within the fullscreen control item */
View
8 video.js
@@ -715,7 +715,7 @@ VideoJS.player.extend({
// Create the fullscreen control
this.fullscreenControl = _V_.createElement("div", {
className: "vjs-fullscreen-control",
- innerHTML: "<div><span></span><span></span><span></span><span></span></div>"
+ innerHTML: "<span>Enter Full Screen</span><div><span></span><span></span><span></span><span></span></div>"
});
this.fullscreenControl.setAttribute('role','button');
this.fullscreenControl.setAttribute('aria-controls',this.video.id);
@@ -751,7 +751,7 @@ VideoJS.player.extend({
*/
this.bigPlayButton = _V_.createElement("div", {
className: "vjs-big-play-button",
- innerHTML: "<span></span>"
+ innerHTML: "<span>Play</span>"
});
this.bigPlayButton.setAttribute('role','button');
this.bigPlayButton.setAttribute('aria-label','PLAY');
@@ -1001,6 +1001,7 @@ VideoJS.player.extend({
} else {
this.enterFullWindow();
}
+ this.fullscreenControl.innerHTML = "<span>Exit Full Screen</span><div><span></span><span></span><span></span><span></span></div>"
this.fullscreenControl.setAttribute('aria-label','EXIT FULL SCREEN');
},
@@ -1010,6 +1011,7 @@ VideoJS.player.extend({
} else {
this.exitFullWindow();
}
+ this.fullscreenControl.innerHTML = "<span>Enter Full Screen</span><div><span></span><span></span><span></span><span></span></div>"
this.fullscreenControl.setAttribute('aria-label','ENTER FULL SCREEN');
},
@@ -1348,13 +1350,15 @@ VideoJS.player.newBehavior("playToggle", function(element){
this.each(this.elements.playToggles, function(toggle){
_V_.removeClass(toggle, "vjs-paused");
_V_.addClass(toggle, "vjs-playing");
+ toggle.innerHTML = '<span>Pause</span>';
toggle.setAttribute('aria-label','PAUSE');
});
},
playTogglesOnPause: function(event){
this.each(this.elements.playToggles, function(toggle){
_V_.removeClass(toggle, "vjs-playing");
_V_.addClass(toggle, "vjs-paused");
+ toggle.innerHTML = '<span>Play</span>';
toggle.setAttribute('aria-label','PLAY');
});
}

0 comments on commit 0202a33

Please sign in to comment.
Something went wrong with that request. Please try again.