web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-07-15 01:34:23 +02:00
Code Releases Activity

Added loading spinner code from ZenJosh.

Browse Source
This commit is contained in:
Steve Heffernan
2011-12-21 17:59:36 -08:00
parent 6945be3d6e
commit 82142e2f54
8 changed files with 544 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
design/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

369
design/tube.css Normal file
View File

@ -0,0 +1,369 @@
/*
VideoJS YouTube Skin (http://videojs.com)
Version 3.0
REQUIRED STYLES (be careful overriding)
================================================================================ */
/* When loading the player, the video tag is replaced with a DIV,
that will hold the video tag or object tag for other playback methods.
The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video.
** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
Otherwise you risk messing up control positioning and full window mode. **
*/
.video-js {
background-color: #000; position: relative; padding: 0;
/* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
font-size: 10px;
}
/* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
.video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Fullscreen Styles */
body.vjs-full-window {
padding: 0; margin: 0;
height: 100%; overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
}
.video-js.vjs-fullscreen {
position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important;
_position: absolute; /* IE6 Full-window (underscore hack) */
}
.video-js:-webkit-full-screen {
width: 100% !important; height: 100% !important;
}
.video-js:-moz-full-screen {
width: 100% !important; height: 100% !important;
}
/* Subtiles Style */
.video-js .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; }
/* The default control bar. Created by bar.js */
.tubecss .vjs-controls {
position: absolute;
bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
left: 0; right: 0; /* 100% width of div */
opacity: 0.85; display: block; /* Start hidden */
margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */
height: 2.6em; /* Including any margin you want above or below control items */
color: #fff; border-top: 1px solid #404040;
/* CSS Gradient */
/* Can use the Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/ */
background: -moz-linear-gradient(top, rgba(51,51,51,0.8) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,0.8)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(51,51,51,0.8) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(51,51,51,0.8) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(51,51,51,0.8) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(51,51,51,0.8) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc333333', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
/* Fade-in using CSS Transitions */
/* -webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;*/
}
/* General styles for individual controls. */
.tubecss .vjs-control {
position: relative; float: left;
text-align: center; margin: 0; padding: 0;
height: 2.6em; width: 2.6em;
}
.tubecss .vjs-control:focus {
outline: 0;
}
/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
.tubecss .vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Play/Pause
-------------------------------------------------------------------------------- */
.tubecss .vjs-play-control { width: 5em; cursor: pointer !important; border-left: 1px solid #333; border-right: 1px solid #222; }
/* Play Icon */
.tubecss.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('tubesprite.png'); margin: 0.5em auto 0; }
.tubecss.vjs-paused .vjs-play-control div:hover {background: url('tubesprite.png') 0 -75px;}
.tubecss.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('tubesprite.png') -25px 0; margin: 0.5em auto 0; }
.tubecss.vjs-playing .vjs-play-control div:hover {background: url('tubesprite.png') -25px -75px;}
/* Rewind
-------------------------------------------------------------------------------- */
.tubecss .vjs-rewind-control { width: 5em; cursor: pointer !important; }
.tubecss .vjs-rewind-control div { width: 19px; height: 16px; background: url('tubesprite.png'); margin: 0.5em auto 0; }
/* Volume/Mute
-------------------------------------------------------------------------------- */
.tubecss .vjs-mute-control { width: 3.8em; cursor: pointer !important; float: left; border-left: 1px solid #333;}
.tubecss .vjs-mute-control div { width: 22px; height: 16px; background: url('tubesprite.png') -75px -25px; margin: 0.5em auto 0; }
.tubecss .vjs-mute-control.vjs-vol-0 div { background: url('tubesprite.png') 0 -25px; }
.tubecss .vjs-mute-control.vjs-vol-1 div { background: url('tubesprite.png') -25px -25px; }
.tubecss .vjs-mute-control.vjs-vol-2 div { background: url('tubesprite.png') -50px -25px; }
.tubecss .vjs-mute-control div:hover {background: url('tubesprite.png') -75px -100px; }
.tubecss .vjs-mute-control.vjs-vol-0 div:hover { background: url('tubesprite.png') 0 -100px; }
.tubecss .vjs-mute-control.vjs-vol-1 div:hover { background: url('tubesprite.png') -25px -100px; }
.tubecss .vjs-mute-control.vjs-vol-2 div:hover { background: url('tubesprite.png') -50px -100px; }
.tubecss .vjs-volume-control { position: absolute; top: -0.1em; left: 9em; width: 6em; padding-right: 8px; border-right: 1px solid #222;}
.tubecss .vjs-volume-bar {
position: relative; border-bottom: 1px solid #333; width: 6em; height: 0.6em; margin: 1em auto 0; cursor: pointer !important;
-moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
background: #111; /* Old browsers */
}
.tubecss .vjs-volume-level {
position: absolute; top: 0; left: 0; height: 0.6em;
-moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
background: #c61003; /* Old browsers */
background: -moz-linear-gradient(top, #c61003 0%, #840400 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c61003), color-stop(100%,#840400)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c61003 0%,#840400 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c61003 0%,#840400 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c61003 0%,#840400 100%); /* IE10+ */
background: linear-gradient(top, #c61003 0%,#840400 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c61003', endColorstr='#840400',GradientType=0 ); /* IE6-9 */
}
.tubecss .vjs-volume-handle {
position: absolute; top: -0.3em; width: 0.5em; height: 1.2em; background: #696969; left: 0;
border: none;
border-top: 1px solid #888;
-moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
}
/* Progress
-------------------------------------------------------------------------------- */
.tubecss div.vjs-progress-control {
position: absolute;
left: 0em; right: 0em; /* Leave room for time displays. */
height: 1em; width: auto;
top: -1.3em; /* Set above the rest of the controls. And leave room for 2px of borders (progress bottom and controls top). */
border-bottom: 1px solid #1F1F1F;
border-top: 1px solid #222;
/* CSS Gradient */
background: #111;
-moz-opacity: 0.80;
opacity: 0.80;
/* 1px top shadow */
/* -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
}
/* Box containing play and load progresses. Also acts as seek scrubber. */
.tubecss .vjs-progress-holder {
position: relative; cursor: pointer !important; /*overflow: hidden;*/
padding: 0; margin: 0; /* Placement within the progress control item */
height: 1.0em;
-moz-border-radius: 0em; -webkit-border-radius: 0em; border-radius: 0em;
/* CSS Gradient */
background: #000
-moz-opacity: 0.90;
opacity: 0.90;
}
.tubecss .vjs-progress-holder .vjs-play-progress,
.tubecss .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
position: absolute; display: block; height: 1.0em; margin: 0; padding: 0;
left: 0; top: 0; /*Needed for IE6*/
-moz-border-radius: 0em; -webkit-border-radius: 0em; border-radius: 0em;
/*width: 0;*/
}
.tubecss .vjs-play-progress {
background: #ff0505; /* Old browsers */
background: -moz-linear-gradient(top, #ff0505 0%, #9b0000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0505), color-stop(100%,#9b0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff0505 0%,#9b0000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff0505 0%,#9b0000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff0505 0%,#9b0000 100%); /* IE10+ */
background: linear-gradient(top, #ff0505 0%,#9b0000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0505', endColorstr='#9b0000',GradientType=0 ); /* IE6-9 */
}
.tubecss .vjs-load-progress {
background: #999;
}
.tubecss div.vjs-seek-handle {
position: absolute;
width: 16px; height: 16px; /* Match img pixles */
margin-top: -0.3em;
left: 0; top: 0; /*Needed for IE6*/
background: url('tubesprite.png') 0 -50px;
/* CSS Curved Corners. Needed to make shadows curved. */
-moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
/* CSS Shadows */
-webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
}
.tubecss div.vjs-seek-handle:hover {
background: url('tubesprite.png') -188px -50px;
}
/* Time Display
-------------------------------------------------------------------------------- */
.tubecss .vjs-time-controls {
position: absolute;
right: 0;
height: 100%; width: 4em;
top: 0.0em;
border-bottom: none;
border-top: none;
background: transparent;
font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
/* 1px top shadow */
/* -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
}
.tubecss .vjs-current-time {line-height: 2.4em; left: 15.9em; border-left: 1px solid #333; }
.tubecss .vjs-duration {line-height: 2.4em; left: 20.2em; display: inline; color: #999; width: 39.5em; text-align: left; padding-left: 2px; border-right: 1px solid #222;}
.tubecss .vjs-remaining-time { right: 0; display: none; }
.vjs-time-divider {line-height: 1.6em; display: inline; position: absolute; left: 19.5em; top: 0.5em; color: #999;}
/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-secondary-controls { float: right; }
.tubecss .vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; border-left: 1px solid #333; border-right: 1px solid #222;}
.tubecss .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('tubesprite.png') -50px 0; margin: 0.5em auto 0; }
.tubecss .vjs-fullscreen-control div:hover {background: url('tubesprite.png') -50px -75px; }
.tubecss.vjs-fullscreen .vjs-fullscreen-control div { background: url('tubesprite.png') -75px 0; }
.tubecss.vjs-fullscreen .vjs-fullscreen-control div:hover { background: url('tubesprite.png') -75px -75px; }
/* Big Play Button (at start)
---------------------------------------------------------*/
.tubecss .vjs-big-play-button {
display: block; /* Start hidden */ z-index: 2;
position: absolute; top: 50%; left: 50%; width: 8.0em; height: 8.0em; margin: -43px 0 0 -43px; text-align: center; vertical-align: center; cursor: pointer !important;
border: 0.3em solid #fff; opacity: 0.95;
-webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
background: #454545;
background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
/* CSS Shadows */
-webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
}
.tubecss div.vjs-big-play-button:hover {
-webkit-box-shadow: 0 0 80px #fff; -moz-box-shadow: 0 0 80px #fff; box-shadow: 0 0 80px #fff;
}
.tubecss div.vjs-big-play-button span {
position: absolute; top: 50%; left: 50%;
display: block; width: 35px; height: 42px;
margin: -20px 0 0 -15px; /* Using negative margin to center image. */
background: url('tubesprite.png') -100px 0;
}
/* Loading Spinner
---------------------------------------------------------*/
.vjs-default-skin div.vjs-loading-spinner-fallback {
display: none;
position: absolute; top: 50%; left: 50%; width: 30px; height: 30px;
margin: -15px 0 0 -15px; /* Using negative margin to center image.*/
background: url('loading.gif');
}
/* Spinner Styles
---------------------------------------------------------*/
/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
.vjs-loading-spinner {
display: hidden;
position: absolute; top: 50%; left: 50%; width: 55px; height: 55px;
margin: -28px 0 0 -28px;
-webkit-animation-name: rotatethis;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation-name: rotatethis;
-moz-animation-duration:1s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
}
@-webkit-keyframes rotatethis {
0% {-webkit-transform:scale(0.6) rotate(0deg);}
12.5% {-webkit-transform:scale(0.6) rotate(0deg);}
12.51% {-webkit-transform:scale(0.6) rotate(45deg);}
25% {-webkit-transform:scale(0.6) rotate(45deg);}
25.01% {-webkit-transform:scale(0.6) rotate(90deg);}
37.5% {-webkit-transform:scale(0.6) rotate(90deg);}
37.51% {-webkit-transform:scale(0.6) rotate(135deg);}
50% {-webkit-transform:scale(0.6) rotate(135deg);}
50.01% {-webkit-transform:scale(0.6) rotate(180deg);}
62.5% {-webkit-transform:scale(0.6) rotate(180deg);}
62.51% {-webkit-transform:scale(0.6) rotate(225deg);}
75% {-webkit-transform:scale(0.6) rotate(225deg);}
75.01% {-webkit-transform:scale(0.6) rotate(270deg);}
87.5% {-webkit-transform:scale(0.6) rotate(270deg);}
87.51% {-webkit-transform:scale(0.6) rotate(315deg);}
100% {-webkit-transform:scale(0.6) rotate(315deg);}
}
@-moz-keyframes rotatethis {
0% {-moz-transform:scale(0.6) rotate(0deg);}
12.5% {-moz-transform:scale(0.6) rotate(0deg);}
12.51% {-moz-transform:scale(0.6) rotate(45deg);}
25% {-moz-transform:scale(0.6) rotate(45deg);}
25.01% {-moz-transform:scale(0.6) rotate(90deg);}
37.5% {-moz-transform:scale(0.6) rotate(90deg);}
37.51% {-moz-transform:scale(0.6) rotate(135deg);}
50% {-moz-transform:scale(0.6) rotate(135deg);}
50.01% {-moz-transform:scale(0.6) rotate(180deg);}
62.5% {-moz-transform:scale(0.6) rotate(180deg);}
62.51% {-moz-transform:scale(0.6) rotate(225deg);}
75% {-moz-transform:scale(0.6) rotate(225deg);}
75.01% {-moz-transform:scale(0.6) rotate(270deg);}
87.5% {-moz-transform:scale(0.6) rotate(270deg);}
87.51% {-moz-transform:scale(0.6) rotate(315deg);}
100% {-moz-transform:scale(0.6) rotate(315deg);}
}
/* Each circle */
div.vjs-loading-spinner .ball1 { opacity: 0.12; position:absolute; left: 20px; top: 0px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball2 { opacity: 0.25; position:absolute; left: 34px; top: 6px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball3 { opacity: 0.37; position:absolute; left: 40px; top: 20px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball4 { opacity: 0.50; position:absolute; left: 34px; top: 34px; width: 13px; height: 13px; background: #fff;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 15px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball5 { opacity: 0.62; position:absolute; left: 20px; top: 40px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball6 { opacity: 0.75; position:absolute; left: 6px; top: 34px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; top: 20px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

BIN
design/tubesprite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

111
design/video-js.css
View File

@ -1,4 +1,4 @@
/* /*
VideoJS Default Styles (http://videojs.com) VideoJS Default Styles (http://videojs.com)
Version 3.0 Version 3.0
@ -11,8 +11,8 @@ REQUIRED STYLES (be careful overriding)
** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element. ** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
Otherwise you risk messing up control positioning and full window mode. ** Otherwise you risk messing up control positioning and full window mode. **
*/ */
.video-js { .video-js {
background-color: #000; position: relative; padding: 0; background-color: #000; position: relative; padding: 0;
/* Start with 10px for base font size so other dimensions can be em based and easily calculable. */ /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
font-size: 10px; font-size: 10px;
} }
@ -21,7 +21,7 @@ REQUIRED STYLES (be careful overriding)
.video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Fullscreen Styles */ /* Fullscreen Styles */
body.vjs-full-window { body.vjs-full-window {
padding: 0; margin: 0; padding: 0; margin: 0;
height: 100%; overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */ height: 100%; overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
} }
@ -36,7 +36,7 @@ body.vjs-full-window {
/* Subtiles Style */ /* Subtiles Style */
.video-js .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; } .video-js .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; }
/* DEFAULT SKIN (override in another file) /* DEFAULT SKIN (override in another file to create new skins)
================================================================================ ================================================================================
Instead of editing this file, I recommend creating your own skin CSS file to be included after this file, Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */ so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */
@ -79,7 +79,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
} }
.vjs-default-skin .vjs-control:focus { .vjs-default-skin .vjs-control:focus {
/* outline: 0;*/ outline: 0;
} }
/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */ /* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
@ -108,8 +108,8 @@ so you can upgrade to newer versions easier. You can remove all these styles by
.vjs-default-skin .vjs-volume-control { width: 5em; float: right; } .vjs-default-skin .vjs-volume-control { width: 5em; float: right; }
.vjs-default-skin .vjs-volume-bar { .vjs-default-skin .vjs-volume-bar {
position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; cursor: pointer !important; position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; cursor: pointer !important;
-moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
@ -121,8 +121,8 @@ so you can upgrade to newer versions easier. You can remove all these styles by
background: -ms-linear-gradient(top, #333, #666); background: -ms-linear-gradient(top, #333, #666);
background: linear-gradient(top, #333, #666); background: linear-gradient(top, #333, #666);
} }
.vjs-default-skin .vjs-volume-level { .vjs-default-skin .vjs-volume-level {
position: absolute; top: 0; left: 0; height: 0.6em; position: absolute; top: 0; left: 0; height: 0.6em;
-moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
@ -134,7 +134,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
background: -ms-linear-gradient(top, #fff, #ccc); background: -ms-linear-gradient(top, #fff, #ccc);
background: linear-gradient(top, #fff, #ccc); background: linear-gradient(top, #fff, #ccc);
} }
.vjs-default-skin .vjs-volume-handle { .vjs-default-skin .vjs-volume-handle {
position: absolute; top: -0.2em; width: 0.8em; height: 0.8em; background: #ccc; left: 0; position: absolute; top: -0.2em; width: 0.8em; height: 0.8em; background: #ccc; left: 0;
border: 1px solid #fff; border: 1px solid #fff;
-moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em; -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
@ -190,7 +190,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
} }
.vjs-default-skin .vjs-play-progress { .vjs-default-skin .vjs-play-progress {
/* CSS Gradient. */ /* CSS Gradient. */
background: #fff; /* Old browsers */ background: #fff; /* Old browsers */
background: -moz-linear-gradient(top, #fff 0%, #d6d6d6 50%, #fff 100%); background: -moz-linear-gradient(top, #fff 0%, #d6d6d6 50%, #fff 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#fff), color-stop(50%,#d6d6d6), color-stop(100%,#fff)); background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#fff), color-stop(50%,#d6d6d6), color-stop(100%,#fff));
@ -198,7 +198,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
background: -o-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%); background: -o-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
background: -ms-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%); background: -ms-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
background: linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%); background: linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
background: #efefef; background: #efefef;
background: -moz-linear-gradient(top, #efefef 0%, #f5f5f5 50%, #dbdbdb 50%, #f1f1f1 100%); background: -moz-linear-gradient(top, #efefef 0%, #f5f5f5 50%, #dbdbdb 50%, #f1f1f1 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1)); background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1));
@ -222,7 +222,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
} }
.vjs-default-skin div.vjs-seek-handle { .vjs-default-skin div.vjs-seek-handle {
position: absolute; position: absolute;
width: 16px; height: 16px; /* Match img pixles */ width: 16px; height: 16px; /* Match img pixles */
margin-top: -0.3em; margin-top: -0.3em;
left: 0; top: 0; /*Needed for IE6*/ left: 0; top: 0; /*Needed for IE6*/
@ -245,7 +245,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
background-color: #333; background-color: #333;
font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif; font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
background: #333; background: #333;
background: -moz-linear-gradient(top, #222, #333); background: -moz-linear-gradient(top, #222, #333);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333)); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
@ -308,4 +308,83 @@ so you can upgrade to newer versions easier. You can remove all these styles by
display: block; width: 35px; height: 42px; display: block; width: 35px; height: 42px;
margin: -20px 0 0 -15px; /* Using negative margin to center image. */ margin: -20px 0 0 -15px; /* Using negative margin to center image. */
background: url('video-js.png') -100px 0; background: url('video-js.png') -100px 0;
} }
/* Loading Spinner
---------------------------------------------------------*/
/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
.vjs-loading-spinner {
display: none;
position: absolute; top: 50%; left: 50%; width: 55px; height: 55px;
margin: -28px 0 0 -28px;
-webkit-animation-name: rotatethis;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation-name: rotatethis;
-moz-animation-duration:1s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
}
@-webkit-keyframes rotatethis {
0% {-webkit-transform:scale(0.6) rotate(0deg); }
12.5% {-webkit-transform:scale(0.6) rotate(0deg); }
12.51% {-webkit-transform:scale(0.6) rotate(45deg); }
25% {-webkit-transform:scale(0.6) rotate(45deg); }
25.01% {-webkit-transform:scale(0.6) rotate(90deg);}
37.5% {-webkit-transform:scale(0.6) rotate(90deg);}
37.51% {-webkit-transform:scale(0.6) rotate(135deg);}
50% {-webkit-transform:scale(0.6) rotate(135deg);}
50.01% {-webkit-transform:scale(0.6) rotate(180deg);}
62.5% {-webkit-transform:scale(0.6) rotate(180deg);}
62.51% {-webkit-transform:scale(0.6) rotate(225deg);}
75% {-webkit-transform:scale(0.6) rotate(225deg);}
75.01% {-webkit-transform:scale(0.6) rotate(270deg);}
87.5% {-webkit-transform:scale(0.6) rotate(270deg);}
87.51% {-webkit-transform:scale(0.6) rotate(315deg);}
100% {-webkit-transform:scale(0.6) rotate(315deg);}
}
@-moz-keyframes rotatethis {
0% {-moz-transform:scale(0.6) rotate(0deg);}
12.5% {-moz-transform:scale(0.6) rotate(0deg);}
12.51% {-moz-transform:scale(0.6) rotate(45deg);}
25% {-moz-transform:scale(0.6) rotate(45deg);}
25.01% {-moz-transform:scale(0.6) rotate(90deg);}
37.5% {-moz-transform:scale(0.6) rotate(90deg);}
37.51% {-moz-transform:scale(0.6) rotate(135deg);}
50% {-moz-transform:scale(0.6) rotate(135deg);}
50.01% {-moz-transform:scale(0.6) rotate(180deg);}
62.5% {-moz-transform:scale(0.6) rotate(180deg);}
62.51% {-moz-transform:scale(0.6) rotate(225deg);}
75% {-moz-transform:scale(0.6) rotate(225deg);}
75.01% {-moz-transform:scale(0.6) rotate(270deg);}
87.5% {-moz-transform:scale(0.6) rotate(270deg);}
87.51% {-moz-transform:scale(0.6) rotate(315deg);}
100% {-moz-transform:scale(0.6) rotate(315deg);}
}
/* Each circle */
div.vjs-loading-spinner .ball1 { opacity: 0.12; position:absolute; left: 20px; top: 0px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball2 { opacity: 0.25; position:absolute; left: 34px; top: 6px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball3 { opacity: 0.37; position:absolute; left: 40px; top: 20px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball4 { opacity: 0.50; position:absolute; left: 34px; top: 34px; width: 13px; height: 13px; background: #fff;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 15px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball5 { opacity: 0.62; position:absolute; left: 20px; top: 40px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball6 { opacity: 0.75; position:absolute; left: 6px; top: 34px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; top: 20px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

46
src/controls.js vendored
View File

@ -171,6 +171,48 @@ _V_.BigPlayButton = _V_.Button.extend({
} }
}); });
/* Loading Spinner
================================================================================ */
_V_.LoadingSpinner = _V_.Component.extend({
init: function(player, options){
this._super(player, options);
// player.addEvent("play", _V_.proxy(this, this.hide));
// player.addEvent("ended", _V_.proxy(this, this.show));
player.addEvent("canplay", _V_.proxy(this, this.hide));
player.addEvent("canplaythrough", _V_.proxy(this, this.hide));
player.addEvent("playing", _V_.proxy(this, this.hide));
player.addEvent("seeking", _V_.proxy(this, this.show));
player.addEvent("error", _V_.proxy(this, this.show));
player.addEvent("stalled", _V_.proxy(this, this.show));
player.addEvent("waiting", _V_.proxy(this, this.show));
},
createElement: function(){
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"
|| typeof this.player.el.style.borderRadius == "string")
{
classNameSpinner = "vjs-loading-spinner";
innerHtmlSpinner = "<div class='ball1'></div><div class='ball2'></div><div class='ball3'></div><div class='ball4'></div><div class='ball5'></div><div class='ball6'></div><div class='ball7'></div><div class='ball8'></div>";
} else {
classNameSpinner = "vjs-loading-spinner-fallback";
innerHtmlSpinner = "";
}
return this._super("div", {
className: classNameSpinner,
innerHTML: innerHtmlSpinner
});
}
});
/* Control Bar /* Control Bar
================================================================================ */ ================================================================================ */
_V_.ControlBar = _V_.Component.extend({ _V_.ControlBar = _V_.Component.extend({
@ -332,7 +374,7 @@ _V_.Slider = _V_.Component.extend({
createElement: function(type, attrs) { createElement: function(type, attrs) {
attrs = _V_.merge({ attrs = _V_.merge({
role: "slider", role: "slider",
"aria-valuenow": 0, "aria-valuenow": 0,
"aria-valuemin": 0, "aria-valuemin": 0,
"aria-valuemax": 100, "aria-valuemax": 100,
@ -356,6 +398,8 @@ _V_.Slider = _V_.Component.extend({
_V_.unblockTextSelection(); _V_.unblockTextSelection();
_V_.removeEvent(document, "mousemove", this.onMouseMove, false); _V_.removeEvent(document, "mousemove", this.onMouseMove, false);
_V_.removeEvent(document, "mouseup", this.onMouseUp, false); _V_.removeEvent(document, "mouseup", this.onMouseUp, false);
this.update();
}, },
update: function(){ update: function(){

1
src/core.js
View File

@ -68,6 +68,7 @@ VideoJS.options = {
// Included control sets // Included control sets
components: [ components: [
"loadingSpinner",
"bigPlayButton", "bigPlayButton",
{ name: "controlBar", options: { { name: "controlBar", options: {
components: [ components: [

12
src/player.js
View File

@ -316,9 +316,9 @@ _V_.Player = _V_.Component.extend({
this.currentTime(0); this.currentTime(0);
this.play(); this.play();
} else { } else {
// this.pause(); this.pause();
// this.currentTime(0); this.currentTime(0);
// this.pause(); this.pause();
} }
}, },
@ -452,11 +452,13 @@ _V_.Player.prototype.extend({
this.videoIsFullScreen = true; this.videoIsFullScreen = true;
if (typeof this.el.webkitRequestFullScreen == 'function') { if (typeof this.el.webkitRequestFullScreen == 'function') {
this.el.webkitRequestFullScreen(); this.el.webkitRequestFullScreen();
} else if (this.el.mozRequestFullScreen == 'function') { // } else if (typeof this.el.mozRequestFullScreen == 'function') {
this.el.mozRequestFullScreen(); // _V_.log("here")
// this.el.mozRequestFullScreen();
} else if (this.supportsFullScreen()) { } else if (this.supportsFullScreen()) {
this.apiCall("enterFullScreen"); this.apiCall("enterFullScreen");
} else { } else {
_V_.log("2")
this.enterFullWindow(); this.enterFullWindow();
} }
this.triggerEvent("enterFullScreen"); this.triggerEvent("enterFullScreen");

49
src/tech.js
View File

@ -269,6 +269,8 @@ _V_.flash = _V_.PlaybackTech.extend({
// Add to box. // Add to box.
_V_.insertFirst(placeHolder, player.el); _V_.insertFirst(placeHolder, player.el);
_V_.log(attributes)
swfobject.embedSWF(options.swf, placeHolder.id, "480", "270", "9.0.124", "", flashVars, params, attributes); swfobject.embedSWF(options.swf, placeHolder.id, "480", "270", "9.0.124", "", flashVars, params, attributes);
}, },
@ -360,30 +362,33 @@ _V_.flash.supports = {
_V_.flash.onSWFReady = function(currSwf){ _V_.flash.onSWFReady = function(currSwf){
// _V_.log(currSwf, "currSwf") _V_.log(currSwf, "currSwf")
// Flash seems to be catching errors, so raising them manally var el = _V_.el(currSwf);
try {
// Delay for real swf ready. // Get player from box
// On firefox reloads, el might already have a player
var player = el.player || el.parentNode.player,
tech = player.techs["flash"];
// Reference player on tech element
el.player = player;
// Update reference to playback technology element
tech.el = el;
_V_.flash.checkReady(tech);
};
// The SWF isn't alwasy ready when it says it is. Sometimes the API functions still need to be added to the object.
// If it's not ready, we set a timeout to check again shortly.
_V_.flash.checkReady = function(tech){
if (tech.el.vjs_getProperty) {
tech.triggerReady();
} else {
setTimeout(function(){ setTimeout(function(){
var el = _V_.el(currSwf); _V_.flash.checkReady(tech);
}, 50);
// Get player from box
var player = el.parentNode.player,
tech = player.techs["flash"];
// Reference player on tech element
el.player = player;
// Update reference to playback technology element
tech.el = el;
tech.triggerReady();
},0);
} catch(err) {
_V_.log(err);
} }
}; };