*/
+.video-js .vjs-tech {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
+.video-js:-moz-full-screen { position: absolute; }
+
+/* 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;
+}
+
+/* Poster Styles */
+.vjs-poster {
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ background-size: contain;
+ cursor: pointer;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ width: 100%;
+}
+.vjs-poster img {
+ display: block;
+ margin: 0 auto;
+ max-height: 100%;
+ padding: 0;
+ width: 100%;
+}
+
+/* Text Track Styles */
+/* Overall track holder for both captions and subtitles */
+.video-js .vjs-text-track-display {
+ text-align: center;
+ position: absolute;
+ bottom: 4em;
+ left: 1em; /* Leave padding on left and right */
+ right: 1em;
+ font-family: Arial, sans-serif;
+}
+/* Individual tracks */
+.video-js .vjs-text-track {
+ display: none;
+ font-size: 1.4em;
+ text-align: center;
+ margin-bottom: 0.1em;
+ /* Transparent black background, or fallback to all black (oldIE) */
+ background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
+}
+.video-js .vjs-subtitles { color: #fff; } /* Subtitles are white */
+.video-js .vjs-captions { color: #fc6; } /* Captions are yellow */
+.vjs-tt-cue { display: block; }
+
+/* Fading sytles, used to fade control bar. */
+.vjs-fade-in {
+ display: block !important;
+ visibility: visible; /* Needed to make sure things hide in older browsers too. */
+ opacity: 1;
+
+ -webkit-transition: visibility 0.1s, opacity 0.1s;
+ -moz-transition: visibility 0.1s, opacity 0.1s;
+ -ms-transition: visibility 0.1s, opacity 0.1s;
+ -o-transition: visibility 0.1s, opacity 0.1s;
+ transition: visibility 0.1s, opacity 0.1s;
+}
+.vjs-fade-out {
+ display: block !important;
+ visibility: hidden;
+ opacity: 0;
+
+ -webkit-transition: visibility 1.5s, opacity 1.5s;
+ -moz-transition: visibility 1.5s, opacity 1.5s;
+ -ms-transition: visibility 1.5s, opacity 1.5s;
+ -o-transition: visibility 1.5s, opacity 1.5s;
+ transition: visibility 1.5s, opacity 1.5s;
+
+ /* Wait a moment before fading out the control bar */
+ -webkit-transition-delay: 2s;
+ -moz-transition-delay: 2s;
+ -ms-transition-delay: 2s;
+ -o-transition-delay: 2s;
+ transition-delay: 2s;
+}
+/* Hide disabled or unsupported controls */
+.vjs-default-skin .vjs-hidden { display: none; }
+
+.vjs-lock-showing {
+ display: block !important;
+ opacity: 1;
+ visibility: visible;
+}
+
+/* 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,
+so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */
+
+/* Base UI Component Classes
+-------------------------------------------------------------------------------- */
+@font-face{
+ font-family: 'VideoJS';
+ src: url('font/vjs.eot');
+ src: url('font/vjs.eot') format('embedded-opentype'),
+ url('font/vjs.woff') format('woff'),
+ url('font/vjs.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.vjs-default-skin {
+ color: #ccc;
+}
+
+/* Slider - used for Volume bar and Seek bar */
+.vjs-default-skin .vjs-slider {
+ outline: 0; /* Replace browser focus hightlight with handle highlight */
+ position: relative;
+ cursor: pointer;
+ padding: 0;
+
+ background: rgb(50, 50, 50); /* IE8- Fallback */
+ background: rgba(100, 100, 100, 0.5);
+}
+
+.vjs-default-skin .vjs-slider:focus {
+ background: rgb(70, 70, 70); /* IE8- Fallback */
+ background: rgba(100, 100, 100, 0.70);
+
+ -webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 1);
+ -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 1);
+ box-shadow: 0 0 2em rgba(255, 255, 255, 1);
+}
+
+.vjs-default-skin .vjs-slider-handle {
+ position: absolute;
+ /* Needed for IE6 */
+ left: 0;
+ top: 0;
+}
+
+.vjs-default-skin .vjs-slider-handle:before {
+ /*content: "\f111";*/ /* Circle icon = f111 */
+ content: "\e009"; /* Square icon */
+ font-family: VideoJS;
+ font-size: 1em;
+ line-height: 1;
+ text-align: center;
+ text-shadow: 0em 0em 1em #fff;
+
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ /* Rotate the square icon to make a diamond */
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+}
+
+/* Control Bar
+-------------------------------------------------------------------------------- */
+/* The default control bar. Created by controls.js */
+.vjs-default-skin .vjs-control-bar {
+ display: none; /* Start hidden */
+ position: absolute;
+ /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
+ bottom: 0;
+ /* 100% width of player div */
+ left: 0;
+ right: 0;
+ /* Controls are absolutely position, so no padding necessary */
+ padding: 0;
+ margin: 0;
+ /* Height includes any margin you want above or below control items */
+ height: 3.0em;
+ background-color: rgb(0, 0, 0);
+ /* Slight blue so it can be seen more easily on black. */
+ background-color: rgba(7, 40, 50, 0.7);
+ /* Default font settings */
+ font-style: normal;
+ font-weight: normal;
+ font-family: Arial, sans-serif;
+}
+
+/* General styles for individual controls. */
+.vjs-default-skin .vjs-control {
+ outline: none;
+ position: relative;
+ float: left;
+ text-align: center;
+ margin: 0;
+ padding: 0;
+ height: 3.0em;
+ width: 4em;
+}
+
+/* FontAwsome button icons */
+.vjs-default-skin .vjs-control:before {
+ font-family: VideoJS;
+ font-size: 1.5em;
+ line-height: 2;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+}
+
+/* Replacement for focus outline */
+.vjs-default-skin .vjs-control:focus:before,
+.vjs-default-skin .vjs-control:hover:before {
+ text-shadow: 0em 0em 1em rgba(255, 255, 255, 1);
+}
+
+.vjs-default-skin .vjs-control:focus { /* outline: 0; */ /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ }
+
+/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
+.vjs-default-skin .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
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-play-control {
+ width: 5em;
+ cursor: pointer;
+}
+.vjs-default-skin .vjs-play-control:before {
+ content: "\e001"; /* Play Icon */
+}
+.vjs-default-skin.vjs-playing .vjs-play-control:before {
+ content: "\e002"; /* Pause Icon */
+}
+
+/* Rewind
+-------------------------------------------------------------------------------- */
+/*.vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
+.vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; }
+*/
+
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-mute-control,
+.vjs-default-skin .vjs-volume-menu-button {
+ cursor: pointer;
+ float: right;
+}
+.vjs-default-skin .vjs-mute-control:before,
+.vjs-default-skin .vjs-volume-menu-button:before {
+ content: "\e006"; /* Full volume */
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
+ content: "\e003"; /* No volume */
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
+ content: "\e004"; /* Half volume */
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
+ content: "\e005"; /* Full volume */
+}
+
+.vjs-default-skin .vjs-volume-control {
+ width: 5em;
+ float: right;
+}
+.vjs-default-skin .vjs-volume-bar {
+ width: 5em;
+ height: 0.6em;
+ margin: 1.1em auto 0;
+}
+
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
+ height: 2.9em;
+}
+
+.vjs-default-skin .vjs-volume-level {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 0.5em;
+
+ background: #66A8CC
+ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC)
+ -50% 0 repeat;
+}
+.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
+ width: 0.5em;
+ height: 0.5em;
+}
+
+.vjs-default-skin .vjs-volume-handle:before {
+ font-size: 0.9em;
+ top: -0.2em;
+ left: -0.2em;
+
+ width: 1em;
+ height: 1em;
+}
+
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
+ width: 6em;
+ left: -4em;
+}
+
+/*.vjs-default-skin .vjs-menu-button .vjs-volume-control {
+ height: 1.5em;
+}*/
+
+/* Progress
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-progress-control {
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: auto;
+ font-size: 0.3em;
+ height: 1em;
+ /* Set above the rest of the controls. */
+ top: -1em;
+
+ /* Shrink the bar slower than it grows. */
+ -webkit-transition: top 0.4s, height 0.4s, font-size 0.4s, -webkit-transform 0.4s;
+ -moz-transition: top 0.4s, height 0.4s, font-size 0.4s, -moz-transform 0.4s;
+ -o-transition: top 0.4s, height 0.4s, font-size 0.4s, -o-transform 0.4s;
+ transition: top 0.4s, height 0.4s, font-size 0.4s, transform 0.4s;
+
+}
+
+/* On hover, make the progress bar grow to something that's more clickable.
+ This simply changes the overall font for the progress bar, and this
+ updates both the em-based widths and heights, as wells as the icon font */
+.vjs-default-skin:hover .vjs-progress-control {
+ font-size: .9em;
+
+ /* Even though we're not changing the top/height, we need to include them in
+ the transition so they're handled correctly. */
+ -webkit-transition: top 0.2s, height 0.2s, font-size 0.2s, -webkit-transform 0.2s;
+ -moz-transition: top 0.2s, height 0.2s, font-size 0.2s, -moz-transform 0.2s;
+ -o-transition: top 0.2s, height 0.2s, font-size 0.2s, -o-transform 0.2s;
+ transition: top 0.2s, height 0.2s, font-size 0.2s, transform 0.2s;
+}
+
+/* Box containing play and load progresses. Also acts as seek scrubber. */
+.vjs-default-skin .vjs-progress-holder {
+ /* Placement within the progress control item */
+ height: 100%;
+}
+
+/* Progress Bars */
+.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
+.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
+ position: absolute;
+ display: block;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ /* Needed for IE6 */
+ left: 0;
+ top: 0;
+}
+
+.vjs-default-skin .vjs-play-progress {
+ /*
+ Using a data URI to create the white diagonal lines with a transparent
+ background. Surprising works in IE8.
+ Created using http://www.patternify.com
+ Changing the first color value will change the bar color.
+ Also using a paralax effect to make the lines move backwards.
+ The -50% left position makes that happen.
+ */
+ background: #66A8CC
+ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC)
+ -50% 0 repeat;
+}
+.vjs-default-skin .vjs-load-progress {
+ background: rgb(100, 100, 100); /* IE8- Fallback */
+ background: rgba(255, 255, 255, 0.4);
+}
+
+.vjs-default-skin .vjs-seek-handle {
+ width: 1.5em;
+ height: 100%;
+}
+
+.vjs-default-skin .vjs-seek-handle:before {
+ padding-top: 0.1em; /* Minor adjustment */
+}
+
+/* Time Display
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-time-controls {
+ font-size: 1em;
+ /* Align vertically by making the line height the same as the control bar */
+ line-height: 3em;
+}
+.vjs-default-skin .vjs-current-time { float: left; }
+.vjs-default-skin .vjs-duration { float: left; }
+/* Remaining time is in the HTML, but not included in default design */
+.vjs-default-skin .vjs-remaining-time { display: none; float: left; }
+.vjs-time-divider { float: left; line-height: 3em; }
+
+/* Fullscreen
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-fullscreen-control {
+ width: 3.8em;
+ cursor: pointer;
+ float: right;
+}
+.vjs-default-skin .vjs-fullscreen-control:before {
+ content: "\e000"; /* Enter full screen */
+}
+.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
+ content: "\e00b"; /* Exit full screen */
+}
+
+/* Big Play Button (at start)
+---------------------------------------------------------*/
+.vjs-default-skin .vjs-big-play-button {
+ display: block;
+ z-index: 2;
+ position: absolute;
+ top: 2em;
+ left: 2em;
+ width: 12.0em;
+ height: 8.0em;
+ margin: 0;
+ text-align: center;
+ vertical-align: middle;
+ cursor: pointer;
+ opacity: 1;
+
+ /* Need a slightly gray bg so it can be seen on black backgrounds */
+ background-color: rgb(40, 40, 40);
+ background-color: rgba(7, 40, 50, 0.7);
+
+ border: 0.3em solid rgb(50, 50, 50);
+ border-color: rgba(255, 255, 255, 0.25);
+
+ -webkit-border-radius: 25px;
+ -moz-border-radius: 25px;
+ border-radius: 25px;
+
+ -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
+ -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
+ box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
+
+ -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, -webkit-transform 0.4s;
+ -moz-transition: border 0.4s, -moz-box-shadow 0.4s, -moz-transform 0.4s;
+ -o-transition: border 0.4s, -o-box-shadow 0.4s, -o-transform 0.4s;
+ transition: border 0.4s, box-shadow 0.4s, transform 0.4s;
+}
+
+.vjs-default-skin:hover .vjs-big-play-button,
+.vjs-default-skin .vjs-big-play-button:focus {
+ outline: 0;
+ border-color: rgb(255, 255, 255);
+ border-color: rgba(255, 255, 255, 1);
+ /* IE8 needs a non-glow hover state */
+ background-color: rgb(80, 80, 80);
+ background-color: rgba(50, 50, 50, 0.75);
+
+ -webkit-box-shadow: 0 0 3em #fff;
+ -moz-box-shadow: 0 0 3em #fff;
+ box-shadow: 0 0 3em #fff;
+
+ -webkit-transition: border 0s, -webkit-box-shadow 0s, -webkit-transform 0s;
+ -moz-transition: border 0s, -moz-box-shadow 0s, -moz-transform 0s;
+ -o-transition: border 0s, -o-box-shadow 0s, -o-transform 0s;
+ transition: border 0s, box-shadow 0s, transform 0s;
+}
+
+.vjs-default-skin .vjs-big-play-button:before {
+ content: "\e001"; /* Play icon */
+ font-family: VideoJS;
+ font-size: 3em;
+ line-height: 2.66;
+ text-shadow: 0.05em 0.05em 0.1em #000;
+ text-align: center; /* Needed for IE8 */
+
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+/* Loading Spinner
+---------------------------------------------------------*/
+.vjs-loading-spinner {
+ display: none;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+
+ font-size: 5em;
+ line-height: 1;
+
+ width: 1em;
+ height: 1em;
+
+ margin-left: -0.5em;
+ margin-top: -0.5em;
+
+ opacity: 0.75;
+
+ -webkit-animation: spin 1.5s infinite linear;
+ -moz-animation: spin 1.5s infinite linear;
+ -o-animation: spin 1.5s infinite linear;
+ animation: spin 1.5s infinite linear;
+}
+
+.vjs-default-skin .vjs-loading-spinner:before {
+ content: "\e00a"; /* Loading spinner icon */
+ font-family: VideoJS;
+
+ position: absolute;
+ width: 1em;
+ height: 1em;
+ text-align: center;
+ text-shadow: 0em 0em 0.1em #000;
+}
+
+/* Add a gradient to the spinner by overlaying another copy.
+ Text gradient plus a text shadow doesn't work
+ and `background-clip: text` only works in Webkit. */
+.vjs-default-skin .vjs-loading-spinner:after {
+ content: "\e00a"; /* Loading spinner icon */
+ font-family: VideoJS;
+
+ position: absolute;
+ width: 1em;
+ height: 1em;
+ text-align: center;
+
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+@-moz-keyframes spin {
+ 0% { -moz-transform: rotate(0deg); }
+ 100% { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spin {
+ 0% { -webkit-transform: rotate(0deg); }
+ 100% { -webkit-transform: rotate(359deg); }
+}
+@-o-keyframes spin {
+ 0% { -o-transform: rotate(0deg); }
+ 100% { -o-transform: rotate(359deg); }
+}
+@-ms-keyframes spin {
+ 0% { -ms-transform: rotate(0deg); }
+ 100% { -ms-transform: rotate(359deg); }
+}
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(359deg); }
+}
+
+/* Menu Buttons (Captions/Subtitles/etc.)
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-menu-button {
+ float: right;
+ cursor: pointer;
+}
+
+.vjs-default-skin .vjs-menu {
+ display: none;
+ position: absolute;
+ bottom: 0;
+ left: 0em; /* (Width of vjs-menu - width of button) / 2 */
+ width: 0em;
+ height: 0em;
+ margin-bottom: 3em;
+
+ border-left: 2em solid transparent;
+ border-right: 2em solid transparent;
+
+ border-top: 1.55em solid rgb(0, 0, 0); /* Same top as ul bottom */
+ border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */
+}
+
+/* Button Pop-up Menu */
+.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
+ display: block;
+ padding: 0; margin: 0;
+ position: absolute;
+ width: 10em;
+ bottom: 1.5em; /* Same bottom as vjs-menu border-top */
+ max-height: 15em;
+ overflow: auto;
+
+ left: -5em; /* Width of menu - width of button / 2 */
+
+ background-color: rgb(0, 0, 0);
+ background-color: rgba(7, 40, 50, 0.7);
+
+ -webkit-box-shadow: -20px -20px 0px rgba(255, 255, 255, 0.5);
+ -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 0.5);
+ box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
+}
+
+/*.vjs-default-skin .vjs-menu-button:focus ul,*/ /* This is not needed because keyboard accessibility for the caption button is not handled with the focus any more. */
+.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
+ display: block;
+}
+.vjs-default-skin .vjs-menu-button ul li {
+ list-style: none;
+ margin: 0;
+ padding: 0.3em 0 0.3em 0;
+ line-height: 1.4em;
+ font-size: 1.2em;
+ font-weight: normal;
+ text-align: center;
+ text-transform: lowercase;
+}
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
+ background-color: #000;
+}
+.vjs-default-skin .vjs-menu-button ul li:focus,
+.vjs-default-skin .vjs-menu-button ul li:hover,
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
+ background-color: rgb(255, 255, 255);
+ background-color: rgba(255, 255, 255, 0.75);
+ color: #111;
+ outline: 0;
+
+ -webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
+ -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
+ box-shadow: 0 0 1em rgba(255, 255, 255, 1);
+}
+.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;
+ font-weight: bold;
+ cursor: default;
+}
+
+/* Subtitles Button */
+.vjs-default-skin .vjs-subtitles-button:before { content: "\e00c"; }
+
+/* There's unfortunately no CC button in FontAwesome, so we need
+ to manually create one. Please +1 the fontawesome request.
+ https://github.com/FortAwesome/Font-Awesome/issues/968 */
+.vjs-default-skin .vjs-captions-button {
+ font-size: 1em; /* Font icons are 1.5em */
+}
+.vjs-default-skin .vjs-captions-button:before {
+ content: "\e008";
+ font-family: VideoJS;
+ font-size: 1.5em;
+ line-height: 2;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ text-shadow: none;
+}
+
+
+/* Replacement for focus outline */
+.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
+.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
+ -webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
+ -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
+ box-shadow: 0 0 1em rgba(255, 255, 255, 1);
+}
diff --git a/dashboard-ui/thirdparty/video-js-4.0/video-js.swf b/dashboard-ui/thirdparty/video-js-4.0/video-js.swf
new file mode 100644
index 0000000000..61a6e347f1
Binary files /dev/null and b/dashboard-ui/thirdparty/video-js-4.0/video-js.swf differ
diff --git a/dashboard-ui/thirdparty/video-js-4.0/video-js.tube.min.css b/dashboard-ui/thirdparty/video-js-4.0/video-js.tube.min.css
new file mode 100644
index 0000000000..9b7508b5bf
--- /dev/null
+++ b/dashboard-ui/thirdparty/video-js-4.0/video-js.tube.min.css
@@ -0,0 +1 @@
+.tubecss .vjs-controls{position:absolute;bottom:0;left:0;right:0;opacity:.85;display:block;margin:0;padding:0;height:2.6em;color:#fff;border-top:1px solid #404040;background:-moz-linear-gradient(top,rgba(51,51,51,0.8) 0,rgba(0,0,0,1) 100%);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)));background:-webkit-linear-gradient(top,rgba(51,51,51,0.8) 0,rgba(0,0,0,1) 100%);background:-o-linear-gradient(top,rgba(51,51,51,0.8) 0,rgba(0,0,0,1) 100%);background:-ms-linear-gradient(top,rgba(51,51,51,0.8) 0,rgba(0,0,0,1) 100%);background:linear-gradient(top,rgba(51,51,51,0.8) 0,rgba(0,0,0,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc333333',endColorstr='#000000',GradientType=0)}.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}.tubecss .vjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.tubecss .vjs-play-control{width:5em;cursor:pointer!important;border-left:1px solid #333;border-right:1px solid #222}.tubecss.vjs-paused .vjs-play-control div{width:15px;height:17px;background:url('tubesprite.png');margin:.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:.5em auto 0}.tubecss.vjs-playing .vjs-play-control div:hover{background:url('tubesprite.png') -25px -75px}.tubecss .vjs-rewind-control{width:5em;cursor:pointer!important}.tubecss .vjs-rewind-control div{width:19px;height:16px;background:url('tubesprite.png');margin:.5em auto 0}.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:.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:.6em;margin:1em auto 0;cursor:pointer!important;-moz-border-radius:.3em;-webkit-border-radius:.3em;border-radius:.3em;background:#111}.tubecss .vjs-volume-level{position:absolute;top:0;left:0;height:.6em;-moz-border-radius:.3em;-webkit-border-radius:.3em;border-radius:.3em;background:#c61003;background:-moz-linear-gradient(top,#c61003 0,#840400 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#c61003),color-stop(100%,#840400));background:-webkit-linear-gradient(top,#c61003 0,#840400 100%);background:-o-linear-gradient(top,#c61003 0,#840400 100%);background:-ms-linear-gradient(top,#c61003 0,#840400 100%);background:linear-gradient(top,#c61003 0,#840400 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c61003',endColorstr='#840400',GradientType=0)}.tubecss .vjs-volume-handle{position:absolute;top:-0.3em;width:.5em;height:1.2em;background:#696969;left:0;border:0;border-top:1px solid #888;-moz-border-radius:.3em;-webkit-border-radius:.3em;border-radius:.3em}.tubecss div.vjs-progress-control{position:absolute;left:0;right:0;height:1em;width:auto;top:-1.3em;border-bottom:1px solid #1f1f1f;border-top:1px solid #222;background:#111;-moz-opacity:.80;opacity:.80}.tubecss .vjs-progress-holder{position:relative;cursor:pointer!important;padding:0;margin:0;height:1.0em;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;background:#000 -moz-opacity:.90;opacity:.90}.tubecss .vjs-progress-holder .vjs-play-progress,.tubecss .vjs-progress-holder .vjs-load-progress{position:absolute;display:block;height:1.0em;margin:0;padding:0;left:0;top:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0}.tubecss .vjs-play-progress{background:#ff0505;background:-moz-linear-gradient(top,#ff0505 0,#9b0000 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ff0505),color-stop(100%,#9b0000));background:-webkit-linear-gradient(top,#ff0505 0,#9b0000 100%);background:-o-linear-gradient(top,#ff0505 0,#9b0000 100%);background:-ms-linear-gradient(top,#ff0505 0,#9b0000 100%);background:linear-gradient(top,#ff0505 0,#9b0000 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0505',endColorstr='#9b0000',GradientType=0)}.tubecss .vjs-load-progress{background:#999}.tubecss div.vjs-seek-handle{position:absolute;width:16px;height:16px;margin-top:-0.3em;left:0;top:0;background:url('tubesprite.png') 0 -50px;-moz-border-radius:.8em;-webkit-border-radius:.8em;border-radius:.8em;-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}.tubecss .vjs-time-controls{position:absolute;right:0;height:100%;width:4em;top:.0em;border-bottom:0;border-top:0;background:transparent;font-size:1em;line-height:1.0em;font-weight:normal;font-family:Helvetica,Arial,sans-serif}.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}.tubecss .vjs-time-divider{line-height:1.6em;display:inline;position:absolute;left:19.5em;top:.5em;color:#999}.tubecss .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:.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}.tubecss .vjs-big-play-button{display:block;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:.3em solid #fff;opacity:.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%);-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;background:url('tubesprite.png') -100px 0}.tubecss .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;background:url('loading.gif')}.tubecss .vjs-menu-button{float:right;margin:.2em .5em 0 0;padding:0;width:3em;height:2em;cursor:pointer!important;border:1px solid #111;-moz-border-radius:.3em;-webkit-border-radius:.3em;border-radius:.3em;background:#4d4d4d;background:-moz-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#4d4d4d),color-stop(50%,#3f3f3f),color-stop(50%,#333),color-stop(100%,#252525));background:-webkit-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);background:-o-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);background:-ms-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);background:linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%)}.tubecss .vjs-menu-button div{background:url('video-js.png') 0 -75px no-repeat;width:16px;height:16px;margin:.2em auto 0;padding:0}.tubecss .vjs-menu-button ul{display:none;opacity:.8;padding:0;margin:0;position:absolute;width:10em;bottom:2em;max-height:15em;left:-3.5em;background-color:#111;border:2px solid #333;-moz-border-radius:.7em;-webkit-border-radius:1em;border-radius:.5em;-webkit-box-shadow:0 2px 4px 0 #000;-moz-box-shadow:0 2px 4px 0 #000;box-shadow:0 2px 4px 0 #000;overflow:auto}.tubecss .vjs-menu-button:focus ul,.tubecss .vjs-menu-button:hover ul{display:block;list-style:none}.tubecss .vjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0 .3em 20px;line-height:1.4em;font-size:1.2em;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;text-align:left}.tubecss .vjs-menu-button ul li.vjs-selected{text-decoration:underline;background:url('video-js.png') -125px -50px no-repeat}.tubecss .vjs-menu-button ul li:focus,.tubecss .vjs-menu-button ul li:hover,.tubecss .vjs-menu-button ul li.vjs-selected:focus,.tubecss .vjs-menu-button ul li.vjs-selected:hover{background-color:#ccc;color:#111;outline:0}.tubecss .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 .3em 0;color:#fff;font-weight:bold;cursor:default;background:#4d4d4d;background:-moz-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#4d4d4d),color-stop(50%,#3f3f3f),color-stop(50%,#333),color-stop(100%,#252525));background:-webkit-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);background:-o-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);background:-ms-linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%);background:linear-gradient(top,#4d4d4d 0,#3f3f3f 50%,#333 50%,#252525 100%)}.tubecss .vjs-captions-button div{background-position:-25px -75px}.tubecss .vjs-chapters-button div{background-position:-100px -75px}.tubecss .vjs-chapters-button ul{width:20em;left:-8.5em}
\ No newline at end of file
diff --git a/dashboard-ui/thirdparty/video-js-4.0/video.dev.js b/dashboard-ui/thirdparty/video-js-4.0/video.dev.js
new file mode 100644
index 0000000000..06ffaec23c
--- /dev/null
+++ b/dashboard-ui/thirdparty/video-js-4.0/video.dev.js
@@ -0,0 +1,6079 @@
+/**
+ * @fileoverview Main function src.
+ */
+
+// HTML5 Shiv. Must be in to support older browsers.
+document.createElement('video');document.createElement('audio');
+
+/**
+ * Doubles as the main function for users to create a player instance and also
+ * the main library object.
+ *
+ * @param {String|Element} id Video element or video element ID
+ * @param {Object=} options Optional options object for config/settings
+ * @param {Function=} ready Optional ready callback
+ * @return {vjs.Player} A player instance
+ */
+var vjs = function(id, options, ready){
+ var tag; // Element of ID
+
+ // Allow for element or ID to be passed in
+ // String ID
+ if (typeof id === 'string') {
+
+ // Adjust for jQuery ID syntax
+ if (id.indexOf('#') === 0) {
+ id = id.slice(1);
+ }
+
+ // If a player instance has already been created for this ID return it.
+ if (vjs.players[id]) {
+ return vjs.players[id];
+
+ // Otherwise get element for ID
+ } else {
+ tag = vjs.el(id);
+ }
+
+ // ID is a media element
+ } else {
+ tag = id;
+ }
+
+ // Check for a useable element
+ if (!tag || !tag.nodeName) { // re: nodeName, could be a box div also
+ throw new TypeError('The element or ID supplied is not valid. (videojs)'); // Returns
+ }
+
+ // Element may have a player attr referring to an already created player instance.
+ // If not, set up a new player and return the instance.
+ return tag['player'] || new vjs.Player(tag, options, ready);
+};
+
+// Extended name, also available externally, window.videojs
+var videojs = vjs;
+window.videojs = window.vjs = vjs;
+
+// CDN Version. Used to target right flash swf.
+vjs.CDN_VERSION = 'GENERATED_CDN_VSN';
+vjs.ACCESS_PROTOCOL = ('https:' == document.location.protocol ? 'https://' : 'http://');
+
+/**
+ * Global Player instance options, surfaced from vjs.Player.prototype.options_
+ * vjs.options = vjs.Player.prototype.options_
+ * All options should use string keys so they avoid
+ * renaming by closure compiler
+ * @type {Object}
+ */
+vjs.options = {
+ // Default order of fallback technology
+ 'techOrder': ['html5','flash'],
+ // techOrder: ['flash','html5'],
+
+ 'html5': {},
+ 'flash': { 'swf': vjs.ACCESS_PROTOCOL + 'vjs.zencdn.net/c/video-js.swf' },
+
+ // Default of web browser is 300x150. Should rely on source width/height.
+ 'width': 300,
+ 'height': 150,
+ // defaultVolume: 0.85,
+ 'defaultVolume': 0.00, // The freakin seaguls are driving me crazy!
+
+ // Included control sets
+ 'children': {
+ 'mediaLoader': {},
+ 'posterImage': {},
+ 'textTrackDisplay': {},
+ 'loadingSpinner': {},
+ 'bigPlayButton': {},
+ 'controlBar': {}
+ }
+};
+
+/**
+ * Global player list
+ * @type {Object}
+ */
+vjs.players = {};
+
+
+// Set CDN Version of swf
+if (vjs.CDN_VERSION != 'GENERATED_CDN_VSN') {
+ videojs.options['flash']['swf'] = vjs.ACCESS_PROTOCOL + 'vjs.zencdn.net/'+vjs.CDN_VERSION+'/video-js.swf';
+}
+/**
+ * Core Object/Class for objects that use inheritance + contstructors
+ * @constructor
+ */
+vjs.CoreObject = vjs['CoreObject'] = function(){};
+// Manually exporting vjs['CoreObject'] here for Closure Compiler
+// because of the use of the extend/create class methods
+// If we didn't do this, those functions would get flattend to something like
+// `a = ...` and `this.prototype` would refer to the global object instead of
+// CoreObject
+
+/**
+ * Create a new object that inherits from this Object
+ * @param {Object} props Functions and properties to be applied to the
+ * new object's prototype
+ * @return {vjs.CoreObject} Returns an object that inherits from CoreObject
+ * @this {*}
+ */
+vjs.CoreObject.extend = function(props){
+ var init, subObj;
+
+ props = props || {};
+ // Set up the constructor using the supplied init method
+ // or using the init of the parent object
+ // Make sure to check the unobfuscated version for external libs
+ init = props['init'] || props.init || this.prototype['init'] || this.prototype.init || function(){};
+ // In Resig's simple class inheritance (previously used) the constructor
+ // is a function that calls `this.init.apply(arguments)`
+ // However that would prevent us from using `ParentObject.call(this);`
+ // in a Child constuctor because the `this` in `this.init`
+ // would still refer to the Child and cause an inifinite loop.
+ // We would instead have to do
+ // `ParentObject.prototype.init.apply(this, argumnents);`
+ // Bleh. We're not creating a _super() function, so it's good to keep
+ // the parent constructor reference simple.
+ subObj = function(){
+ init.apply(this, arguments);
+ };
+
+ // Inherit from this object's prototype
+ subObj.prototype = vjs.obj.create(this.prototype);
+ // Reset the constructor property for subObj otherwise
+ // instances of subObj would have the constructor of the parent Object
+ subObj.prototype.constructor = subObj;
+
+ // Make the class extendable
+ subObj.extend = vjs.CoreObject.extend;
+ // Make a function for creating instances
+ subObj.create = vjs.CoreObject.create;
+
+ // Extend subObj's prototype with functions and other properties from props
+ for (var name in props) {
+ if (props.hasOwnProperty(name)) {
+ subObj.prototype[name] = props[name];
+ }
+ }
+
+ return subObj;
+};
+
+/**
+ * Create a new instace of this Object class
+ * @return {vjs.CoreObject} Returns an instance of a CoreObject subclass
+ * @this {*}
+ */
+vjs.CoreObject.create = function(){
+ // Create a new object that inherits from this object's prototype
+ var inst = vjs.obj.create(this.prototype);
+
+ // Apply this constructor function to the new object
+ this.apply(inst, arguments);
+
+ // Return the new object
+ return inst;
+};
+/**
+ * @fileoverview Event System (John Resig - Secrets of a JS Ninja http://jsninja.com/)
+ * (Original book version wasn't completely usable, so fixed some things and made Closure Compiler compatible)
+ * This should work very similarly to jQuery's events, however it's based off the book version which isn't as
+ * robust as jquery's, so there's probably some differences.
+ */
+
+/**
+ * Add an event listener to element
+ * It stores the handler function in a separate cache object
+ * and adds a generic handler to the element's event,
+ * along with a unique id (guid) to the element.
+ * @param {Element|Object} elem Element or object to bind listeners to
+ * @param {String} type Type of event to bind to.
+ * @param {Function} fn Event listener.
+ */
+vjs.on = function(elem, type, fn){
+ var data = vjs.getData(elem);
+
+ // We need a place to store all our handler data
+ if (!data.handlers) data.handlers = {};
+
+ if (!data.handlers[type]) data.handlers[type] = [];
+
+ if (!fn.guid) fn.guid = vjs.guid++;
+
+ data.handlers[type].push(fn);
+
+ if (!data.dispatcher) {
+ data.disabled = false;
+
+ data.dispatcher = function (event){
+
+ if (data.disabled) return;
+ event = vjs.fixEvent(event);
+
+ var handlers = data.handlers[event.type];
+
+ if (handlers) {
+ // Copy handlers so if handlers are added/removed during the process it doesn't throw everything off.
+ var handlersCopy = handlers.slice(0);
+
+ for (var m = 0, n = handlersCopy.length; m < n; m++) {
+ if (event.isImmediatePropagationStopped()) {
+ break;
+ } else {
+ handlersCopy[m].call(elem, event);
+ }
+ }
+ }
+ };
+ }
+
+ if (data.handlers[type].length == 1) {
+ if (document.addEventListener) {
+ elem.addEventListener(type, data.dispatcher, false);
+ } else if (document.attachEvent) {
+ elem.attachEvent('on' + type, data.dispatcher);
+ }
+ }
+};
+
+/**
+ * Removes event listeners from an element
+ * @param {Element|Object} elem Object to remove listeners from
+ * @param {String=} type Type of listener to remove. Don't include to remove all events from element.
+ * @param {Function} fn Specific listener to remove. Don't incldue to remove listeners for an event type.
+ */
+vjs.off = function(elem, type, fn) {
+ // Don't want to add a cache object through getData if not needed
+ if (!vjs.hasData(elem)) return;
+
+ var data = vjs.getData(elem);
+
+ // If no events exist, nothing to unbind
+ if (!data.handlers) { return; }
+
+ // Utility function
+ var removeType = function(t){
+ data.handlers[t] = [];
+ vjs.cleanUpEvents(elem,t);
+ };
+
+ // Are we removing all bound events?
+ if (!type) {
+ for (var t in data.handlers) removeType(t);
+ return;
+ }
+
+ var handlers = data.handlers[type];
+
+ // If no handlers exist, nothing to unbind
+ if (!handlers) return;
+
+ // If no listener was provided, remove all listeners for type
+ if (!fn) {
+ removeType(type);
+ return;
+ }
+
+ // We're only removing a single handler
+ if (fn.guid) {
+ for (var n = 0; n < handlers.length; n++) {
+ if (handlers[n].guid === fn.guid) {
+ handlers.splice(n--, 1);
+ }
+ }
+ }
+
+ vjs.cleanUpEvents(elem, type);
+};
+
+/**
+ * Clean up the listener cache and dispatchers
+ * @param {Element|Object} elem Element to clean up
+ * @param {String} type Type of event to clean up
+ */
+vjs.cleanUpEvents = function(elem, type) {
+ var data = vjs.getData(elem);
+
+ // Remove the events of a particular type if there are none left
+ if (data.handlers[type].length === 0) {
+ delete data.handlers[type];
+ // data.handlers[type] = null;
+ // Setting to null was causing an error with data.handlers
+
+ // Remove the meta-handler from the element
+ if (document.removeEventListener) {
+ elem.removeEventListener(type, data.dispatcher, false);
+ } else if (document.detachEvent) {
+ elem.detachEvent('on' + type, data.dispatcher);
+ }
+ }
+
+ // Remove the events object if there are no types left
+ if (vjs.isEmpty(data.handlers)) {
+ delete data.handlers;
+ delete data.dispatcher;
+ delete data.disabled;
+
+ // data.handlers = null;
+ // data.dispatcher = null;
+ // data.disabled = null;
+ }
+
+ // Finally remove the expando if there is no data left
+ if (vjs.isEmpty(data)) {
+ vjs.removeData(elem);
+ }
+};
+
+/**
+ * Fix a native event to have standard property values
+ * @param {Object} event Event object to fix
+ * @return {Object}
+ */
+vjs.fixEvent = function(event) {
+
+ function returnTrue() { return true; }
+ function returnFalse() { return false; }
+
+ // Test if fixing up is needed
+ // Used to check if !event.stopPropagation instead of isPropagationStopped
+ // But native events return true for stopPropagation, but don't have
+ // other expected methods like isPropagationStopped. Seems to be a problem
+ // with the Javascript Ninja code. So we're just overriding all events now.
+ if (!event || !event.isPropagationStopped) {
+ var old = event || window.event;
+
+ event = {};
+ // Clone the old object so that we can modify the values event = {};
+ // IE8 Doesn't like when you mess with native event properties
+ // Firefox returns false for event.hasOwnProperty('type') and other props
+ // which makes copying more difficult.
+ // TODO: Probably best to create a whitelist of event props
+ for (var key in old) {
+ event[key] = old[key];
+ }
+
+ // The event occurred on this element
+ if (!event.target) {
+ event.target = event.srcElement || document;
+ }
+
+ // Handle which other element the event is related to
+ event.relatedTarget = event.fromElement === event.target ?
+ event.toElement :
+ event.fromElement;
+
+ // Stop the default browser action
+ event.preventDefault = function () {
+ if (old.preventDefault) {
+ old.preventDefault();
+ }
+ event.returnValue = false;
+ event.isDefaultPrevented = returnTrue;
+ };
+
+ event.isDefaultPrevented = returnFalse;
+
+ // Stop the event from bubbling
+ event.stopPropagation = function () {
+ if (old.stopPropagation) {
+ old.stopPropagation();
+ }
+ event.cancelBubble = true;
+ event.isPropagationStopped = returnTrue;
+ };
+
+ event.isPropagationStopped = returnFalse;
+
+ // Stop the event from bubbling and executing other handlers
+ event.stopImmediatePropagation = function () {
+ if (old.stopImmediatePropagation) {
+ old.stopImmediatePropagation();
+ }
+ event.isImmediatePropagationStopped = returnTrue;
+ event.stopPropagation();
+ };
+
+ event.isImmediatePropagationStopped = returnFalse;
+
+ // Handle mouse position
+ if (event.clientX != null) {
+ var doc = document.documentElement, body = document.body;
+
+ event.pageX = event.clientX +
+ (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
+ (doc && doc.clientLeft || body && body.clientLeft || 0);
+ event.pageY = event.clientY +
+ (doc && doc.scrollTop || body && body.scrollTop || 0) -
+ (doc && doc.clientTop || body && body.clientTop || 0);
+ }
+
+ // Handle key presses
+ event.which = event.charCode || event.keyCode;
+
+ // Fix button for mouse clicks:
+ // 0 == left; 1 == middle; 2 == right
+ if (event.button != null) {
+ event.button = (event.button & 1 ? 0 :
+ (event.button & 4 ? 1 :
+ (event.button & 2 ? 2 : 0)));
+ }
+ }
+
+ // Returns fixed-up instance
+ return event;
+};
+
+/**
+ * Trigger an event for an element
+ * @param {Element|Object} elem Element to trigger an event on
+ * @param {String} event Type of event to trigger
+ */
+vjs.trigger = function(elem, event) {
+ // Fetches element data and a reference to the parent (for bubbling).
+ // Don't want to add a data object to cache for every parent,
+ // so checking hasData first.
+ var elemData = (vjs.hasData(elem)) ? vjs.getData(elem) : {};
+ var parent = elem.parentNode || elem.ownerDocument;
+ // type = event.type || event,
+ // handler;
+
+ // If an event name was passed as a string, creates an event out of it
+ if (typeof event === 'string') {
+ event = { type:event, target:elem };
+ }
+ // Normalizes the event properties.
+ event = vjs.fixEvent(event);
+
+ // If the passed element has a dispatcher, executes the established handlers.
+ if (elemData.dispatcher) {
+ elemData.dispatcher.call(elem, event);
+ }
+
+ // Unless explicitly stopped, recursively calls this function to bubble the event up the DOM.
+ if (parent && !event.isPropagationStopped()) {
+ vjs.trigger(parent, event);
+
+ // If at the top of the DOM, triggers the default action unless disabled.
+ } else if (!parent && !event.isDefaultPrevented()) {
+ var targetData = vjs.getData(event.target);
+
+ // Checks if the target has a default action for this event.
+ if (event.target[event.type]) {
+ // Temporarily disables event dispatching on the target as we have already executed the handler.
+ targetData.disabled = true;
+ // Executes the default action.
+ if (typeof event.target[event.type] === 'function') {
+ event.target[event.type]();
+ }
+ // Re-enables event dispatching.
+ targetData.disabled = false;
+ }
+ }
+
+ // Inform the triggerer if the default was prevented by returning false
+ return !event.isDefaultPrevented();
+ /* Original version of js ninja events wasn't complete.
+ * We've since updated to the latest version, but keeping this around
+ * for now just in case.
+ */
+ // // Added in attion to book. Book code was broke.
+ // event = typeof event === 'object' ?
+ // event[vjs.expando] ?
+ // event :
+ // new vjs.Event(type, event) :
+ // new vjs.Event(type);
+
+ // event.type = type;
+ // if (handler) {
+ // handler.call(elem, event);
+ // }
+
+ // // Clean up the event in case it is being reused
+ // event.result = undefined;
+ // event.target = elem;
+};
+
+/**
+ * Trigger a listener only once for an event
+ * @param {Element|Object} elem Element or object to
+ * @param {[type]} type [description]
+ * @param {Function} fn [description]
+ * @return {[type]}
+ */
+vjs.one = function(elem, type, fn) {
+ vjs.on(elem, type, function(){
+ vjs.off(elem, type, arguments.callee);
+ fn.apply(this, arguments);
+ });
+};
+var hasOwnProp = Object.prototype.hasOwnProperty;
+
+/**
+ * Creates an element and applies properties.
+ * @param {String=} tagName Name of tag to be created.
+ * @param {Object=} properties Element properties to be applied.
+ * @return {Element}
+ */
+vjs.createEl = function(tagName, properties){
+ var el = document.createElement(tagName || 'div');
+
+ for (var propName in properties){
+ if (hasOwnProp.call(properties, propName)) {
+ //el[propName] = properties[propName];
+ // Not remembering why we were checking for dash
+ // but using setAttribute means you have to use getAttribute
+
+ // The check for dash checks for the aria-* attributes, like aria-label, aria-valuemin.
+ // The additional check for "role" is because the default method for adding attributes does not
+ // add the attribute "role". My guess is because it's not a valid attribute in some namespaces, although
+ // browsers handle the attribute just fine. The W3C allows for aria-* attributes to be used in pre-HTML5 docs.
+ // http://www.w3.org/TR/wai-aria-primer/#ariahtml. Using setAttribute gets around this problem.
+
+ if (propName.indexOf('aria-') !== -1 || propName=='role') {
+ el.setAttribute(propName, properties[propName]);
+ } else {
+ el[propName] = properties[propName];
+ }
+ }
+ }
+ return el;
+};
+
+/**
+ * Uppercase the first letter of a string
+ * @param {String} string String to be uppercased
+ * @return {String}
+ */
+vjs.capitalize = function(string){
+ return string.charAt(0).toUpperCase() + string.slice(1);
+};
+
+/**
+ * Object functions container
+ * @type {Object}
+ */
+vjs.obj = {};
+
+/**
+ * Object.create shim for prototypal inheritance.
+ * https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/create
+ * @param {Object} obj Object to use as prototype
+ */
+ vjs.obj.create = Object.create || function(obj){
+ //Create a new function called 'F' which is just an empty object.
+ function F() {}
+
+ //the prototype of the 'F' function should point to the
+ //parameter of the anonymous function.
+ F.prototype = obj;
+
+ //create a new constructor function based off of the 'F' function.
+ return new F();
+};
+
+/**
+ * Loop through each property in an object and call a function
+ * whose arguments are (key,value)
+ * @param {Object} obj Object of properties
+ * @param {Function} fn Function to be called on each property.
+ * @this {*}
+ */
+vjs.obj.each = function(obj, fn, context){
+ for (var key in obj) {
+ if (hasOwnProp.call(obj, key)) {
+ fn.call(context || this, key, obj[key]);
+ }
+ }
+};
+
+/**
+ * Merge two objects together and return the original.
+ * @param {Object} obj1
+ * @param {Object} obj2
+ * @return {Object}
+ */
+vjs.obj.merge = function(obj1, obj2){
+ if (!obj2) { return obj1; }
+ for (var key in obj2){
+ if (hasOwnProp.call(obj2, key)) {
+ obj1[key] = obj2[key];
+ }
+ }
+ return obj1;
+};
+
+/**
+ * Merge two objects, and merge any properties that are objects
+ * instead of just overwriting one. Uses to merge options hashes
+ * where deeper default settings are important.
+ * @param {Object} obj1 Object to override
+ * @param {Object} obj2 Overriding object
+ * @return {Object} New object. Obj1 and Obj2 will be untouched.
+ */
+vjs.obj.deepMerge = function(obj1, obj2){
+ var key, val1, val2, objDef;
+ objDef = '[object Object]';
+
+ // Make a copy of obj1 so we're not ovewriting original values.
+ // like prototype.options_ and all sub options objects
+ obj1 = vjs.obj.copy(obj1);
+
+ for (key in obj2){
+ if (hasOwnProp.call(obj2, key)) {
+ val1 = obj1[key];
+ val2 = obj2[key];
+
+ // Check if both properties are pure objects and do a deep merge if so
+ if (vjs.obj.isPlain(val1) && vjs.obj.isPlain(val2)) {
+ obj1[key] = vjs.obj.deepMerge(val1, val2);
+ } else {
+ obj1[key] = obj2[key];
+ }
+ }
+ }
+ return obj1;
+};
+
+/**
+ * Make a copy of the supplied object
+ * @param {Object} obj Object to copy
+ * @return {Object} Copy of object
+ */
+vjs.obj.copy = function(obj){
+ return vjs.obj.merge({}, obj);
+};
+
+/**
+ * Check if an object is plain, and not a dom node or any object sub-instance
+ * @param {Object} obj Object to check
+ * @return {Boolean} True if plain, false otherwise
+ */
+vjs.obj.isPlain = function(obj){
+ return !!obj
+ && typeof obj === 'object'
+ && obj.toString() === '[object Object]'
+ && obj.constructor === Object;
+};
+
+/**
+ * Bind (a.k.a proxy or Context). A simple method for changing the context of a function
+ It also stores a unique id on the function so it can be easily removed from events
+ * @param {*} context The object to bind as scope
+ * @param {Function} fn The function to be bound to a scope
+ * @param {Number=} uid An optional unique ID for the function to be set
+ * @return {Function}
+ */
+vjs.bind = function(context, fn, uid) {
+ // Make sure the function has a unique ID
+ if (!fn.guid) { fn.guid = vjs.guid++; }
+
+ // Create the new function that changes the context
+ var ret = function() {
+ return fn.apply(context, arguments);
+ };
+
+ // Allow for the ability to individualize this function
+ // Needed in the case where multiple objects might share the same prototype
+ // IF both items add an event listener with the same function, then you try to remove just one
+ // it will remove both because they both have the same guid.
+ // when using this, you need to use the bind method when you remove the listener as well.
+ // currently used in text tracks
+ ret.guid = (uid) ? uid + '_' + fn.guid : fn.guid;
+
+ return ret;
+};
+
+/**
+ * Element Data Store. Allows for binding data to an element without putting it directly on the element.
+ * Ex. Event listneres are stored here.
+ * (also from jsninja.com, slightly modified and updated for closure compiler)
+ * @type {Object}
+ */
+vjs.cache = {};
+
+/**
+ * Unique ID for an element or function
+ * @type {Number}
+ */
+vjs.guid = 1;
+
+/**
+ * Unique attribute name to store an element's guid in
+ * @type {String}
+ * @constant
+ */
+vjs.expando = 'vdata' + (new Date()).getTime();
+
+/**
+ * Returns the cache object where data for an element is stored
+ * @param {Element} el Element to store data for.
+ * @return {Object}
+ */
+vjs.getData = function(el){
+ var id = el[vjs.expando];
+ if (!id) {
+ id = el[vjs.expando] = vjs.guid++;
+ vjs.cache[id] = {};
+ }
+ return vjs.cache[id];
+};
+
+/**
+ * Returns the cache object where data for an element is stored
+ * @param {Element} el Element to store data for.
+ * @return {Object}
+ */
+vjs.hasData = function(el){
+ var id = el[vjs.expando];
+ return !(!id || vjs.isEmpty(vjs.cache[id]));
+};
+
+/**
+ * Delete data for the element from the cache and the guid attr from getElementById
+ * @param {Element} el Remove data for an element
+ */
+vjs.removeData = function(el){
+ var id = el[vjs.expando];
+ if (!id) { return; }
+ // Remove all stored data
+ // Changed to = null
+ // http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/
+ // vjs.cache[id] = null;
+ delete vjs.cache[id];
+
+ // Remove the expando property from the DOM node
+ try {
+ delete el[vjs.expando];
+ } catch(e) {
+ if (el.removeAttribute) {
+ el.removeAttribute(vjs.expando);
+ } else {
+ // IE doesn't appear to support removeAttribute on the document element
+ el[vjs.expando] = null;
+ }
+ }
+};
+
+vjs.isEmpty = function(obj) {
+ for (var prop in obj) {
+ // Inlude null properties as empty.
+ if (obj[prop] !== null) {
+ return false;
+ }
+ }
+ return true;
+};
+
+/**
+ * Add a CSS class name to an element
+ * @param {Element} element Element to add class name to
+ * @param {String} classToAdd Classname to add
+ */
+vjs.addClass = function(element, classToAdd){
+ if ((' '+element.className+' ').indexOf(' '+classToAdd+' ') == -1) {
+ element.className = element.className === '' ? classToAdd : element.className + ' ' + classToAdd;
+ }
+};
+
+/**
+ * Remove a CSS class name from an element
+ * @param {Element} element Element to remove from class name
+ * @param {String} classToAdd Classname to remove
+ */
+vjs.removeClass = function(element, classToRemove){
+ if (element.className.indexOf(classToRemove) == -1) { return; }
+ var classNames = element.className.split(' ');
+ // IE8 Does not support array.indexOf so using a for loop
+ for (var i = classNames.length - 1; i >= 0; i--) {
+ if (classNames[i] === classToRemove) {
+ classNames.splice(i,1);
+ }
+ }
+ // classNames.splice(classNames.indexOf(classToRemove),1);
+ element.className = classNames.join(' ');
+};
+
+/**
+ * Element for testing browser HTML5 video capabilities
+ * @type {Element}
+ * @constant
+ */
+vjs.TEST_VID = vjs.createEl('video');
+
+/**
+ * Useragent for browser testing.
+ * @type {String}
+ * @constant
+ */
+vjs.USER_AGENT = navigator.userAgent;
+
+/**
+ * Device is an iPhone
+ * @type {Boolean}
+ * @constant
+ */
+vjs.IS_IPHONE = !!vjs.USER_AGENT.match(/iPhone/i);
+vjs.IS_IPAD = !!vjs.USER_AGENT.match(/iPad/i);
+vjs.IS_IPOD = !!vjs.USER_AGENT.match(/iPod/i);
+vjs.IS_IOS = vjs.IS_IPHONE || vjs.IS_IPAD || vjs.IS_IPOD;
+
+vjs.IOS_VERSION = (function(){
+ var match = vjs.USER_AGENT.match(/OS (\d+)_/i);
+ if (match && match[1]) { return match[1]; }
+})();
+
+vjs.IS_ANDROID = !!vjs.USER_AGENT.match(/Android.*AppleWebKit/i);
+vjs.ANDROID_VERSION = (function() {
+ var match = vjs.USER_AGENT.match(/Android (\d+)\./i);
+ if (match && match[1]) {
+ return match[1];
+ }
+ return null;
+})();
+
+vjs.IS_FIREFOX = function(){ return !!vjs.USER_AGENT.match('Firefox'); };
+
+
+/**
+ * Get an element's attribute values, as defined on the HTML tag
+ * Attributs are not the same as properties. They're defined on the tag
+ * or with setAttribute (which shouldn't be used with HTML)
+ * This will return true or false for boolean attributes.
+ * @param {Element} tag Element from which to get tag attributes
+ * @return {Object}
+ */
+vjs.getAttributeValues = function(tag){
+ var obj = {};
+
+ // Known boolean attributes
+ // We can check for matching boolean properties, but older browsers
+ // won't know about HTML5 boolean attributes that we still read from.
+ // Bookending with commas to allow for an easy string search.
+ var knownBooleans = ','+'autoplay,controls,loop,muted,default'+',';
+
+ if (tag && tag.attributes && tag.attributes.length > 0) {
+ var attrs = tag.attributes;
+ var attrName, attrVal;
+
+ for (var i = attrs.length - 1; i >= 0; i--) {
+ attrName = attrs[i].name;
+ attrVal = attrs[i].value;
+
+ // Check for known booleans
+ // The matching element property will return a value for typeof
+ if (typeof tag[attrName] === 'boolean' || knownBooleans.indexOf(','+attrName+',') !== -1) {
+ // The value of an included boolean attribute is typically an empty string ('')
+ // which would equal false if we just check for a false value.
+ // We also don't want support bad code like autoplay='false'
+ attrVal = (attrVal !== null) ? true : false;
+ }
+
+ obj[attrName] = attrVal;
+ }
+ }
+
+ return obj;
+};
+
+/**
+ * Get the computed style value for an element
+ * From http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/
+ * @param {Element} el Element to get style value for
+ * @param {String} strCssRule Style name
+ * @return {String} Style value
+ */
+vjs.getComputedDimension = function(el, strCssRule){
+ var strValue = '';
+ if(document.defaultView && document.defaultView.getComputedStyle){
+ strValue = document.defaultView.getComputedStyle(el, '').getPropertyValue(strCssRule);
+
+ } else if(el.currentStyle){
+ // IE8 Width/Height support
+ strValue = el['client'+strCssRule.substr(0,1).toUpperCase() + strCssRule.substr(1)] + 'px';
+ }
+ return strValue;
+};
+
+/**
+ * Insert an element as the first child node of another
+ * @param {Element} child Element to insert
+ * @param {[type]} parent Element to insert child into
+ */
+vjs.insertFirst = function(child, parent){
+ if (parent.firstChild) {
+ parent.insertBefore(child, parent.firstChild);
+ } else {
+ parent.appendChild(child);
+ }
+};
+
+/**
+ * Object to hold browser support information
+ * @type {Object}
+ */
+vjs.support = {};
+
+/**
+ * Shorthand for document.getElementById()
+ * Also allows for CSS (jQuery) ID syntax. But nothing other than IDs.
+ * @param {String} id Element ID
+ * @return {Element} Element with supplied ID
+ */
+vjs.el = function(id){
+ if (id.indexOf('#') === 0) {
+ id = id.slice(1);
+ }
+
+ return document.getElementById(id);
+};
+
+/**
+ * Format seconds as a time string, H:MM:SS or M:SS
+ * Supplying a guide (in seconds) will force a number of leading zeros
+ * to cover the length of the guide
+ * @param {Number} seconds Number of seconds to be turned into a string
+ * @param {Number} guide Number (in seconds) to model the string after
+ * @return {String} Time formatted as H:MM:SS or M:SS
+ */
+vjs.formatTime = function(seconds, guide) {
+ guide = guide || seconds; // Default to using seconds as guide
+ var s = Math.floor(seconds % 60),
+ m = Math.floor(seconds / 60 % 60),
+ h = Math.floor(seconds / 3600),
+ gm = Math.floor(guide / 60 % 60),
+ gh = Math.floor(guide / 3600);
+
+ // Check if we need to show hours
+ h = (h > 0 || gh > 0) ? h + ':' : '';
+
+ // If hours are showing, we may need to add a leading zero.
+ // Always show at least one digit of minutes.
+ m = (((h || gm >= 10) && m < 10) ? '0' + m : m) + ':';
+
+ // Check if leading zero is need for seconds
+ s = (s < 10) ? '0' + s : s;
+
+ return h + m + s;
+};
+
+// Attempt to block the ability to select text while dragging controls
+vjs.blockTextSelection = function(){
+ document.body.focus();
+ document.onselectstart = function () { return false; };
+};
+// Turn off text selection blocking
+vjs.unblockTextSelection = function(){ document.onselectstart = function () { return true; }; };
+
+/**
+ * Trim whitespace from the ends of a string.
+ * @param {String} string String to trim
+ * @return {String} Trimmed string
+ */
+vjs.trim = function(string){
+ return string.toString().replace(/^\s+/, '').replace(/\s+$/, '');
+};
+
+/**
+ * Should round off a number to a decimal place
+ * @param {Number} num Number to round
+ * @param {Number} dec Number of decimal places to round to
+ * @return {Number} Rounded number
+ */
+vjs.round = function(num, dec) {
+ if (!dec) { dec = 0; }
+ return Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
+};
+
+/**
+ * Should create a fake TimeRange object
+ * Mimics an HTML5 time range instance, which has functions that
+ * return the start and end times for a range
+ * TimeRanges are returned by the buffered() method
+ * @param {Number} start Start time in seconds
+ * @param {Number} end End time in seconds
+ * @return {Object} Fake TimeRange object
+ */
+vjs.createTimeRange = function(start, end){
+ return {
+ length: 1,
+ start: function() { return start; },
+ end: function() { return end; }
+ };
+};
+
+/**
+ * Simple http request for retrieving external files (e.g. text tracks)
+ * @param {String} url URL of resource
+ * @param {Function=} onSuccess Success callback
+ * @param {Function=} onError Error callback
+ */
+vjs.get = function(url, onSuccess, onError){
+ var local = (url.indexOf('file:') === 0 || (window.location.href.indexOf('file:') === 0 && url.indexOf('http') === -1));
+
+ if (typeof XMLHttpRequest === 'undefined') {
+ window.XMLHttpRequest = function () {
+ try { return new window.ActiveXObject('Msxml2.XMLHTTP.6.0'); } catch (e) {}
+ try { return new window.ActiveXObject('Msxml2.XMLHTTP.3.0'); } catch (f) {}
+ try { return new window.ActiveXObject('Msxml2.XMLHTTP'); } catch (g) {}
+ throw new Error('This browser does not support XMLHttpRequest.');
+ };
+ }
+
+ var request = new XMLHttpRequest();
+
+ try {
+ request.open('GET', url);
+ } catch(e) {
+ onError(e);
+ }
+
+ request.onreadystatechange = function() {
+ if (request.readyState === 4) {
+ if (request.status === 200 || local && request.status === 0) {
+ onSuccess(request.responseText);
+ } else {
+ if (onError) {
+ onError();
+ }
+ }
+ }
+ };
+
+ try {
+ request.send();
+ } catch(e) {
+ if (onError) {
+ onError(e);
+ }
+ }
+};
+
+/* Local Storage
+================================================================================ */
+vjs.setLocalStorage = function(key, value){
+ try {
+ // IE was throwing errors referencing the var anywhere without this
+ var localStorage = window.localStorage || false;
+ if (!localStorage) { return; }
+ localStorage[key] = value;
+ } catch(e) {
+ if (e.code == 22 || e.code == 1014) { // Webkit == 22 / Firefox == 1014
+ vjs.log('LocalStorage Full (VideoJS)', e);
+ } else {
+ if (e.code == 18) {
+ vjs.log('LocalStorage not allowed (VideoJS)', e);
+ } else {
+ vjs.log('LocalStorage Error (VideoJS)', e);
+ }
+ }
+ }
+};
+
+/**
+ * Get abosolute version of relative URL. Used to tell flash correct URL.
+ * http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
+ * @param {String} url URL to make absolute
+ * @return {String} Absolute URL
+ */
+vjs.getAbsoluteURL = function(url){
+
+ // Check if absolute URL
+ if (!url.match(/^https?:\/\//)) {
+ // Convert to absolute URL. Flash hosted off-site needs an absolute URL.
+ url = vjs.createEl('div', {
+ innerHTML: 'x '
+ }).firstChild.href;
+ }
+
+ return url;
+};
+
+// usage: log('inside coolFunc',this,arguments);
+// http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
+vjs.log = function(){
+ vjs.log.history = vjs.log.history || []; // store logs to an array for reference
+ vjs.log.history.push(arguments);
+ if(window.console){
+ window.console.log(Array.prototype.slice.call(arguments));
+ }
+};
+
+// Offset Left
+// getBoundingClientRect technique from John Resig http://ejohn.org/blog/getboundingclientrect-is-awesome/
+vjs.findPosition = function(el) {
+ var box, docEl, body, clientLeft, scrollLeft, left, clientTop, scrollTop, top;
+
+ if (el.getBoundingClientRect && el.parentNode) {
+ box = el.getBoundingClientRect();
+ }
+
+ if (!box) {
+ return {
+ left: 0,
+ top: 0
+ };
+ }
+
+ docEl = document.documentElement;
+ body = document.body;
+
+ clientLeft = docEl.clientLeft || body.clientLeft || 0;
+ scrollLeft = window.pageXOffset || body.scrollLeft;
+ left = box.left + scrollLeft - clientLeft;
+
+ clientTop = docEl.clientTop || body.clientTop || 0;
+ scrollTop = window.pageYOffset || body.scrollTop;
+ top = box.top + scrollTop - clientTop;
+
+ return {
+ left: left,
+ top: top
+ };
+};
+/**
+ * @fileoverview Player Component - Base class for all UI objects
+ *
+ */
+
+/**
+ * Base UI Component class
+ * @param {Object} player Main Player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.Component = vjs.CoreObject.extend({
+ /** @constructor */
+ init: function(player, options, ready){
+ this.player_ = player;
+
+ // Make a copy of prototype.options_ to protect against overriding global defaults
+ this.options_ = vjs.obj.copy(this.options_);
+
+ // Updated options with supplied options
+ options = this.options(options);
+
+ // Get ID from options, element, or create using player ID and unique ID
+ this.id_ = options['id'] || ((options['el'] && options['el']['id']) ? options['el']['id'] : player.id() + '_component_' + vjs.guid++ );
+
+ this.name_ = options['name'] || null;
+
+ // Create element if one wasn't provided in options
+ this.el_ = options['el'] || this.createEl();
+
+ this.children_ = [];
+ this.childIndex_ = {};
+ this.childNameIndex_ = {};
+
+ // Add any child components in options
+ this.initChildren();
+
+ this.ready(ready);
+ // Don't want to trigger ready here or it will before init is actually
+ // finished for all children that run this constructor
+ }
+});
+
+/**
+ * Dispose of the component and all child components.
+ */
+vjs.Component.prototype.dispose = function(){
+ // Dispose all children.
+ if (this.children_) {
+ for (var i = this.children_.length - 1; i >= 0; i--) {
+ if (this.children_[i].dispose) {
+ this.children_[i].dispose();
+ }
+ }
+ }
+
+ // Delete child references
+ this.children_ = null;
+ this.childIndex_ = null;
+ this.childNameIndex_ = null;
+
+ // Remove all event listeners.
+ this.off();
+
+ // Remove element from DOM
+ if (this.el_.parentNode) {
+ this.el_.parentNode.removeChild(this.el_);
+ }
+
+ vjs.removeData(this.el_);
+ this.el_ = null;
+};
+
+/**
+ * Reference to main player instance.
+ * @type {vjs.Player}
+ * @private
+ */
+vjs.Component.prototype.player_;
+
+/**
+ * Return the component's player.
+ * @return {vjs.Player}
+ */
+vjs.Component.prototype.player = function(){
+ return this.player_;
+};
+
+/**
+ * Component options object.
+ * @type {Object}
+ * @private
+ */
+vjs.Component.prototype.options_;
+
+/**
+ * Deep merge of options objects
+ * Whenever a property is an object on both options objects
+ * the two properties will be merged using vjs.obj.deepMerge.
+ *
+ * This is used for merging options for child components. We
+ * want it to be easy to override individual options on a child
+ * component without having to rewrite all the other default options.
+ *
+ * Parent.prototype.options_ = {
+ * children: {
+ * 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
+ * 'childTwo': {},
+ * 'childThree': {}
+ * }
+ * }
+ * newOptions = {
+ * children: {
+ * 'childOne': { 'foo': 'baz', 'abc': '123' }
+ * 'childTwo': null,
+ * 'childFour': {}
+ * }
+ * }
+ *
+ * this.options(newOptions);
+ *
+ * RESULT
+ *
+ * {
+ * children: {
+ * 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
+ * 'childTwo': null, // Disabled. Won't be initialized.
+ * 'childThree': {},
+ * 'childFour': {}
+ * }
+ * }
+ *
+ * @param {Object} obj Object whose values will be overwritten
+ * @return {Object} NEW merged object. Does not return obj1.
+ */
+vjs.Component.prototype.options = function(obj){
+ if (obj === undefined) return this.options_;
+
+ return this.options_ = vjs.obj.deepMerge(this.options_, obj);
+};
+
+/**
+ * The DOM element for the component.
+ * @type {Element}
+ * @private
+ */
+vjs.Component.prototype.el_;
+
+/**
+ * Create the component's DOM element.
+ * @param {String=} tagName Element's node type. e.g. 'div'
+ * @param {Object=} attributes An object of element attributes that should be set on the element.
+ * @return {Element}
+ */
+vjs.Component.prototype.createEl = function(tagName, attributes){
+ return vjs.createEl(tagName, attributes);
+};
+
+/**
+ * Return the component's DOM element.
+ * @return {Element}
+ */
+vjs.Component.prototype.el = function(){
+ return this.el_;
+};
+
+/**
+ * An optional element where, if defined, children will be inserted
+ * instead of directly in el_
+ * @type {Element}
+ * @private
+ */
+vjs.Component.prototype.contentEl_;
+
+/**
+ * Return the component's DOM element for embedding content.
+ * will either be el_ or a new element defined in createEl
+ * @return {Element}
+ */
+vjs.Component.prototype.contentEl = function(){
+ return this.contentEl_ || this.el_;
+};
+
+/**
+ * The ID for the component.
+ * @type {String}
+ * @private
+ */
+vjs.Component.prototype.id_;
+
+/**
+ * Return the component's ID.
+ * @return {String}
+ */
+vjs.Component.prototype.id = function(){
+ return this.id_;
+};
+
+/**
+ * The name for the component. Often used to reference the component.
+ * @type {String}
+ * @private
+ */
+vjs.Component.prototype.name_;
+
+/**
+ * Return the component's ID.
+ * @return {String}
+ */
+vjs.Component.prototype.name = function(){
+ return this.name_;
+};
+
+/**
+ * Array of child components
+ * @type {Array}
+ * @private
+ */
+vjs.Component.prototype.children_;
+
+/**
+ * Returns array of all child components.
+ * @return {Array}
+ */
+vjs.Component.prototype.children = function(){
+ return this.children_;
+};
+
+/**
+ * Object of child components by ID
+ * @type {Object}
+ * @private
+ */
+vjs.Component.prototype.childIndex_;
+
+/**
+ * Returns a child component with the provided ID.
+ * @return {Array}
+ */
+vjs.Component.prototype.getChildById = function(id){
+ return this.childIndex_[id];
+};
+
+/**
+ * Object of child components by Name
+ * @type {Object}
+ * @private
+ */
+vjs.Component.prototype.childNameIndex_;
+
+/**
+ * Returns a child component with the provided ID.
+ * @return {Array}
+ */
+vjs.Component.prototype.getChild = function(name){
+ return this.childNameIndex_[name];
+};
+
+/**
+ * Adds a child component inside this component.
+ * @param {String|vjs.Component} child The class name or instance of a child to add.
+ * @param {Object=} options Optional options, including options to be passed to
+ * children of the child.
+ * @return {vjs.Component} The child component, because it might be created in this process.
+ * @suppress {accessControls|checkRegExp|checkTypes|checkVars|const|constantProperty|deprecated|duplicate|es5Strict|fileoverviewTags|globalThis|invalidCasts|missingProperties|nonStandardJsDocs|strictModuleDepCheck|undefinedNames|undefinedVars|unknownDefines|uselessCode|visibility}
+ */
+vjs.Component.prototype.addChild = function(child, options){
+ var component, componentClass, componentName, componentId;
+
+ // If string, create new component with options
+ if (typeof child === 'string') {
+
+ componentName = child;
+
+ // Make sure options is at least an empty object to protect against errors
+ options = options || {};
+
+ // Assume name of set is a lowercased name of the UI Class (PlayButton, etc.)
+ componentClass = options['componentClass'] || vjs.capitalize(componentName);
+
+ // Set name through options
+ options['name'] = componentName;
+
+ // Create a new object & element for this controls set
+ // If there's no .player_, this is a player
+ // Closure Compiler throws an 'incomplete alias' warning if we use the vjs variable directly.
+ // Every class should be exported, so this should never be a problem here.
+ component = new window['videojs'][componentClass](this.player_ || this, options);
+
+ // child is a component instance
+ } else {
+ component = child;
+ }
+
+ this.children_.push(component);
+
+ if (typeof component.id === 'function') {
+ this.childIndex_[component.id()] = component;
+ }
+
+ // If a name wasn't used to create the component, check if we can use the
+ // name function of the component
+ componentName = componentName || (component.name && component.name());
+
+ if (componentName) {
+ this.childNameIndex_[componentName] = component;
+ }
+
+ // Add the UI object's element to the container div (box)
+ // Having an element is not required
+ if (typeof component['el'] === 'function' && component['el']()) {
+ this.contentEl().appendChild(component['el']());
+ }
+
+ // Return so it can stored on parent object if desired.
+ return component;
+};
+
+vjs.Component.prototype.removeChild = function(component){
+ if (typeof component === 'string') {
+ component = this.getChild(component);
+ }
+
+ if (!component || !this.children_) return;
+
+ var childFound = false;
+ for (var i = this.children_.length - 1; i >= 0; i--) {
+ if (this.children_[i] === component) {
+ childFound = true;
+ this.children_.splice(i,1);
+ break;
+ }
+ }
+
+ if (!childFound) return;
+
+ this.childIndex_[component.id] = null;
+ this.childNameIndex_[component.name] = null;
+
+ var compEl = component.el();
+ if (compEl && compEl.parentNode === this.contentEl()) {
+ this.contentEl().removeChild(component.el());
+ }
+};
+
+/**
+ * Initialize default child components from options
+ */
+vjs.Component.prototype.initChildren = function(){
+ var options = this.options_;
+
+ if (options && options['children']) {
+ var self = this;
+
+ // Loop through components and add them to the player
+ vjs.obj.each(options['children'], function(name, opts){
+ // Allow for disabling default components
+ // e.g. vjs.options['children']['posterImage'] = false
+ if (opts === false) return;
+
+ // Allow waiting to add components until a specific event is called
+ var tempAdd = function(){
+ // Set property name on player. Could cause conflicts with other prop names, but it's worth making refs easy.
+ self[name] = self.addChild(name, opts);
+ };
+
+ if (opts['loadEvent']) {
+ // this.one(opts.loadEvent, tempAdd)
+ } else {
+ tempAdd();
+ }
+ });
+ }
+};
+
+vjs.Component.prototype.buildCSSClass = function(){
+ // Child classes can include a function that does:
+ // return 'CLASS NAME' + this._super();
+ return '';
+};
+
+/* Events
+============================================================================= */
+
+/**
+ * Add an event listener to this component's element. Context will be the component.
+ * @param {String} type Event type e.g. 'click'
+ * @param {Function} fn Event listener
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.on = function(type, fn){
+ vjs.on(this.el_, type, vjs.bind(this, fn));
+ return this;
+};
+
+/**
+ * Remove an event listener from the component's element
+ * @param {String=} type Optional event type. Without type it will remove all listeners.
+ * @param {Function=} fn Optional event listener. Without fn it will remove all listeners for a type.
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.off = function(type, fn){
+ vjs.off(this.el_, type, fn);
+ return this;
+};
+
+/**
+ * Add an event listener to be triggered only once and then removed
+ * @param {String} type Event type
+ * @param {Function} fn Event listener
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.one = function(type, fn) {
+ vjs.one(this.el_, type, vjs.bind(this, fn));
+ return this;
+};
+
+/**
+ * Trigger an event on an element
+ * @param {String} type Event type to trigger
+ * @param {Event|Object} event Event object to be passed to the listener
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.trigger = function(type, event){
+ vjs.trigger(this.el_, type, event);
+ return this;
+};
+
+/* Ready
+================================================================================ */
+/**
+ * Is the component loaded.
+ * @type {Boolean}
+ * @private
+ */
+vjs.Component.prototype.isReady_;
+
+/**
+ * Trigger ready as soon as initialization is finished.
+ * Allows for delaying ready. Override on a sub class prototype.
+ * If you set this.isReadyOnInitFinish_ it will affect all components.
+ * Specially used when waiting for the Flash player to asynchrnously load.
+ * @type {Boolean}
+ * @private
+ */
+vjs.Component.prototype.isReadyOnInitFinish_ = true;
+
+/**
+ * List of ready listeners
+ * @type {Array}
+ * @private
+ */
+vjs.Component.prototype.readyQueue_;
+
+/**
+ * Bind a listener to the component's ready state.
+ * Different from event listeners in that if the ready event has already happend
+ * it will trigger the function immediately.
+ * @param {Function} fn Ready listener
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.ready = function(fn){
+ if (fn) {
+ if (this.isReady_) {
+ fn.call(this);
+ } else {
+ if (this.readyQueue_ === undefined) {
+ this.readyQueue_ = [];
+ }
+ this.readyQueue_.push(fn);
+ }
+ }
+ return this;
+};
+
+/**
+ * Trigger the ready listeners
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.triggerReady = function(){
+ this.isReady_ = true;
+
+ var readyQueue = this.readyQueue_;
+
+ if (readyQueue && readyQueue.length > 0) {
+
+ for (var i = 0, j = readyQueue.length; i < j; i++) {
+ readyQueue[i].call(this);
+ }
+
+ // Reset Ready Queue
+ this.readyQueue_ = [];
+
+ // Allow for using event listeners also, in case you want to do something everytime a source is ready.
+ this.trigger('ready');
+ }
+};
+
+/* Display
+============================================================================= */
+
+/**
+ * Add a CSS class name to the component's element
+ * @param {String} classToAdd Classname to add
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.addClass = function(classToAdd){
+ vjs.addClass(this.el_, classToAdd);
+ return this;
+};
+
+/**
+ * Remove a CSS class name from the component's element
+ * @param {String} classToRemove Classname to remove
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.removeClass = function(classToRemove){
+ vjs.removeClass(this.el_, classToRemove);
+ return this;
+};
+
+/**
+ * Show the component element if hidden
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.show = function(){
+ this.el_.style.display = 'block';
+ return this;
+};
+
+/**
+ * Hide the component element if hidden
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.hide = function(){
+ this.el_.style.display = 'none';
+ return this;
+};
+
+/**
+ * Fade a component in using CSS
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.fadeIn = function(){
+ this.removeClass('vjs-fade-out');
+ this.addClass('vjs-fade-in');
+ return this;
+};
+
+/**
+ * Fade a component out using CSS
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.fadeOut = function(){
+ this.removeClass('vjs-fade-in');
+ this.addClass('vjs-fade-out');
+ return this;
+};
+
+/**
+ * Lock an item in its visible state. To be used with fadeIn/fadeOut.
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.lockShowing = function(){
+ this.addClass('vjs-lock-showing');
+ return this;
+};
+
+/**
+ * Unlock an item to be hidden. To be used with fadeIn/fadeOut.
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.unlockShowing = function(){
+ this.removeClass('vjs-lock-showing');
+ return this;
+};
+
+/**
+ * Disable component by making it unshowable
+ */
+vjs.Component.prototype.disable = function(){
+ this.hide();
+ this.show = function(){};
+ this.fadeIn = function(){};
+};
+
+// TODO: Get enable working
+// vjs.Component.prototype.enable = function(){
+// this.fadeIn = vjs.Component.prototype.fadeIn;
+// this.show = vjs.Component.prototype.show;
+// };
+
+/**
+ * If a value is provided it will change the width of the player to that value
+ * otherwise the width is returned
+ * http://dev.w3.org/html5/spec/dimension-attributes.html#attr-dim-height
+ * Video tag width/height only work in pixels. No percents.
+ * But allowing limited percents use. e.g. width() will return number+%, not computed width
+ * @param {Number|String=} num Optional width number
+ * @param {[type]} skipListeners Skip the 'resize' event trigger
+ * @return {vjs.Component|Number|String} Returns 'this' if dimension was set.
+ * Otherwise it returns the dimension.
+ */
+vjs.Component.prototype.width = function(num, skipListeners){
+ return this.dimension('width', num, skipListeners);
+};
+
+/**
+ * Get or set the height of the player
+ * @param {Number|String=} num Optional new player height
+ * @param {Boolean=} skipListeners Optional skip resize event trigger
+ * @return {vjs.Component|Number|String} The player, or the dimension
+ */
+vjs.Component.prototype.height = function(num, skipListeners){
+ return this.dimension('height', num, skipListeners);
+};
+
+/**
+ * Set both width and height at the same time.
+ * @param {Number|String} width
+ * @param {Number|String} height
+ * @return {vjs.Component} The player.
+ */
+vjs.Component.prototype.dimensions = function(width, height){
+ // Skip resize listeners on width for optimization
+ return this.width(width, true).height(height);
+};
+
+/**
+ * Get or set width or height.
+ * All for an integer, integer + 'px' or integer + '%';
+ * Known issue: hidden elements. Hidden elements officially have a width of 0.
+ * So we're defaulting to the style.width value and falling back to computedStyle
+ * which has the hidden element issue.
+ * Info, but probably not an efficient fix:
+ * http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/
+ * @param {String=} widthOrHeight 'width' or 'height'
+ * @param {Number|String=} num New dimension
+ * @param {Boolean=} skipListeners Skip resize event trigger
+ * @return {vjs.Component|Number|String} Return the player if setting a dimension.
+ * Otherwise it returns the dimension.
+ */
+vjs.Component.prototype.dimension = function(widthOrHeight, num, skipListeners){
+ if (num !== undefined) {
+
+ // Check if using css width/height (% or px) and adjust
+ if ((''+num).indexOf('%') !== -1 || (''+num).indexOf('px') !== -1) {
+ this.el_.style[widthOrHeight] = num;
+ } else if (num === 'auto') {
+ this.el_.style[widthOrHeight] = '';
+ } else {
+ this.el_.style[widthOrHeight] = num+'px';
+ }
+
+ // skipListeners allows us to avoid triggering the resize event when setting both width and height
+ if (!skipListeners) { this.trigger('resize'); }
+
+ // Return component
+ return this;
+ }
+
+ // Not setting a value, so getting it
+ // Make sure element exists
+ if (!this.el_) return 0;
+
+ // Get dimension value from style
+ var val = this.el_.style[widthOrHeight];
+ var pxIndex = val.indexOf('px');
+ if (pxIndex !== -1) {
+ // Return the pixel value with no 'px'
+ return parseInt(val.slice(0,pxIndex), 10);
+
+ // No px so using % or no style was set, so falling back to offsetWidth/height
+ // If component has display:none, offset will return 0
+ // TODO: handle display:none and no dimension style using px
+ } else {
+
+ return parseInt(this.el_['offset'+vjs.capitalize(widthOrHeight)], 10);
+
+ // ComputedStyle version.
+ // Only difference is if the element is hidden it will return
+ // the percent value (e.g. '100%'')
+ // instead of zero like offsetWidth returns.
+ // var val = vjs.getComputedStyleValue(this.el_, widthOrHeight);
+ // var pxIndex = val.indexOf('px');
+
+ // if (pxIndex !== -1) {
+ // return val.slice(0, pxIndex);
+ // } else {
+ // return val;
+ // }
+ }
+};
+/* Button - Base class for all buttons
+================================================================================ */
+/**
+ * Base class for all buttons
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.Button = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ var touchstart = false;
+ this.on('touchstart', function() {
+ touchstart = true;
+ });
+ this.on('touchmove', function() {
+ touchstart = false;
+ });
+ var self = this;
+ this.on('touchend', function(event) {
+ if (touchstart) {
+ self.onClick(event);
+ }
+ event.preventDefault();
+ event.stopPropagation();
+ });
+
+ this.on('click', this.onClick);
+ this.on('focus', this.onFocus);
+ this.on('blur', this.onBlur);
+ }
+});
+
+vjs.Button.prototype.createEl = function(type, props){
+ // Add standard Aria and Tabindex info
+ props = vjs.obj.merge({
+ className: this.buildCSSClass(),
+ innerHTML: '' + (this.buttonText || 'Need Text') + '
',
+ role: 'button',
+ 'aria-live': 'polite', // let the screen reader user know that the text of the button may change
+ tabIndex: 0
+ }, props);
+
+ return vjs.Component.prototype.createEl.call(this, type, props);
+};
+
+vjs.Button.prototype.buildCSSClass = function(){
+ // TODO: Change vjs-control to vjs-button?
+ return 'vjs-control ' + vjs.Component.prototype.buildCSSClass.call(this);
+};
+
+ // Click - Override with specific functionality for button
+vjs.Button.prototype.onClick = function(){};
+
+ // Focus - Add keyboard functionality to element
+vjs.Button.prototype.onFocus = function(){
+ vjs.on(document, 'keyup', vjs.bind(this, this.onKeyPress));
+};
+
+ // KeyPress (document level) - Trigger click when keys are pressed
+vjs.Button.prototype.onKeyPress = function(event){
+ // Check for space bar (32) or enter (13) keys
+ if (event.which == 32 || event.which == 13) {
+ event.preventDefault();
+ this.onClick();
+ }
+};
+
+// Blur - Remove keyboard triggers
+vjs.Button.prototype.onBlur = function(){
+ vjs.off(document, 'keyup', vjs.bind(this, this.onKeyPress));
+};
+/* Slider
+================================================================================ */
+/**
+ * Parent for seek bar and volume slider
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.Slider = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ // Set property names to bar and handle to match with the child Slider class is looking for
+ this.bar = this.getChild(this.options_['barName']);
+ this.handle = this.getChild(this.options_['handleName']);
+
+ player.on(this.playerEvent, vjs.bind(this, this.update));
+
+ this.on('mousedown', this.onMouseDown);
+ this.on('touchstart', this.onMouseDown);
+ this.on('focus', this.onFocus);
+ this.on('blur', this.onBlur);
+ this.on('click', this.onClick);
+
+ this.player_.on('controlsvisible', vjs.bind(this, this.update));
+
+ // This is actually to fix the volume handle position. http://twitter.com/#!/gerritvanaaken/status/159046254519787520
+ // this.player_.one('timeupdate', vjs.bind(this, this.update));
+
+ player.ready(vjs.bind(this, this.update));
+
+ this.boundEvents = {};
+ }
+});
+
+vjs.Slider.prototype.createEl = function(type, props) {
+ props = props || {};
+ // Add the slider element class to all sub classes
+ props.className = props.className + ' vjs-slider';
+ props = vjs.obj.merge({
+ role: 'slider',
+ 'aria-valuenow': 0,
+ 'aria-valuemin': 0,
+ 'aria-valuemax': 100,
+ tabIndex: 0
+ }, props);
+
+ return vjs.Component.prototype.createEl.call(this, type, props);
+};
+
+vjs.Slider.prototype.onMouseDown = function(event){
+ event.preventDefault();
+ vjs.blockTextSelection();
+
+ this.boundEvents.move = vjs.bind(this, this.onMouseMove);
+ this.boundEvents.end = vjs.bind(this, this.onMouseUp);
+
+ vjs.on(document, 'mousemove', this.boundEvents.move);
+ vjs.on(document, 'mouseup', this.boundEvents.end);
+ vjs.on(document, 'touchmove', this.boundEvents.move);
+ vjs.on(document, 'touchend', this.boundEvents.end);
+
+ this.onMouseMove(event);
+};
+
+vjs.Slider.prototype.onMouseUp = function() {
+ vjs.unblockTextSelection();
+ vjs.off(document, 'mousemove', this.boundEvents.move, false);
+ vjs.off(document, 'mouseup', this.boundEvents.end, false);
+ vjs.off(document, 'touchmove', this.boundEvents.move, false);
+ vjs.off(document, 'touchend', this.boundEvents.end, false);
+
+ this.update();
+};
+
+vjs.Slider.prototype.update = function(){
+ // In VolumeBar init we have a setTimeout for update that pops and update to the end of the
+ // execution stack. The player is destroyed before then update will cause an error
+ if (!this.el_) return;
+
+ // If scrubbing, we could use a cached value to make the handle keep up with the user's mouse.
+ // On HTML5 browsers scrubbing is really smooth, but some flash players are slow, so we might want to utilize this later.
+ // var progress = (this.player_.scrubbing) ? this.player_.getCache().currentTime / this.player_.duration() : this.player_.currentTime() / this.player_.duration();
+
+ var barProgress,
+ progress = this.getPercent(),
+ handle = this.handle,
+ bar = this.bar;
+
+ // Protect against no duration and other division issues
+ if (isNaN(progress)) { progress = 0; }
+
+ barProgress = progress;
+
+ // If there is a handle, we need to account for the handle in our calculation for progress bar
+ // so that it doesn't fall short of or extend past the handle.
+ if (handle) {
+
+ var box = this.el_,
+ boxWidth = box.offsetWidth,
+
+ handleWidth = handle.el().offsetWidth,
+
+ // The width of the handle in percent of the containing box
+ // In IE, widths may not be ready yet causing NaN
+ handlePercent = (handleWidth) ? handleWidth / boxWidth : 0,
+
+ // Get the adjusted size of the box, considering that the handle's center never touches the left or right side.
+ // There is a margin of half the handle's width on both sides.
+ boxAdjustedPercent = 1 - handlePercent,
+
+ // Adjust the progress that we'll use to set widths to the new adjusted box width
+ adjustedProgress = progress * boxAdjustedPercent;
+
+ // The bar does reach the left side, so we need to account for this in the bar's width
+ barProgress = adjustedProgress + (handlePercent / 2);
+
+ // Move the handle from the left based on the adjected progress
+ handle.el().style.left = vjs.round(adjustedProgress * 100, 2) + '%';
+ }
+
+ // Set the new bar width
+ bar.el().style.width = vjs.round(barProgress * 100, 2) + '%';
+};
+
+vjs.Slider.prototype.calculateDistance = function(event){
+ var el, box, boxX, boxY, boxW, boxH, handle, pageX, pageY;
+
+ el = this.el_;
+ box = vjs.findPosition(el);
+ boxW = boxH = el.offsetWidth;
+ handle = this.handle;
+
+ if (this.options_.vertical) {
+ boxY = box.top;
+
+ if (event.changedTouches) {
+ pageY = event.changedTouches[0].pageY;
+ } else {
+ pageY = event.pageY;
+ }
+
+ if (handle) {
+ var handleH = handle.el().offsetHeight;
+ // Adjusted X and Width, so handle doesn't go outside the bar
+ boxY = boxY + (handleH / 2);
+ boxH = boxH - handleH;
+ }
+
+ // Percent that the click is through the adjusted area
+ return Math.max(0, Math.min(1, ((boxY - pageY) + boxH) / boxH));
+
+ } else {
+ boxX = box.left;
+
+ if (event.changedTouches) {
+ pageX = event.changedTouches[0].pageX;
+ } else {
+ pageX = event.pageX;
+ }
+
+ if (handle) {
+ var handleW = handle.el().offsetWidth;
+
+ // Adjusted X and Width, so handle doesn't go outside the bar
+ boxX = boxX + (handleW / 2);
+ boxW = boxW - handleW;
+ }
+
+ // Percent that the click is through the adjusted area
+ return Math.max(0, Math.min(1, (pageX - boxX) / boxW));
+ }
+};
+
+vjs.Slider.prototype.onFocus = function(){
+ vjs.on(document, 'keyup', vjs.bind(this, this.onKeyPress));
+};
+
+vjs.Slider.prototype.onKeyPress = function(event){
+ if (event.which == 37) { // Left Arrow
+ event.preventDefault();
+ this.stepBack();
+ } else if (event.which == 39) { // Right Arrow
+ event.preventDefault();
+ this.stepForward();
+ }
+};
+
+vjs.Slider.prototype.onBlur = function(){
+ vjs.off(document, 'keyup', vjs.bind(this, this.onKeyPress));
+};
+
+/**
+ * Listener for click events on slider, used to prevent clicks
+ * from bubbling up to parent elements like button menus.
+ * @param {Object} event Event object
+ */
+vjs.Slider.prototype.onClick = function(event){
+ event.stopImmediatePropagation();
+ event.preventDefault();
+};
+
+/**
+ * SeekBar Behavior includes play progress bar, and seek handle
+ * Needed so it can determine seek position based on handle position/size
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.SliderHandle = vjs.Component.extend();
+
+/**
+ * Default value of the slider
+ * @type {Number}
+ */
+vjs.SliderHandle.prototype.defaultValue = 0;
+
+/** @inheritDoc */
+vjs.SliderHandle.prototype.createEl = function(type, props) {
+ props = props || {};
+ // Add the slider element class to all sub classes
+ props.className = props.className + ' vjs-slider-handle';
+ props = vjs.obj.merge({
+ innerHTML: ''+this.defaultValue+' '
+ }, props);
+
+ return vjs.Component.prototype.createEl.call(this, 'div', props);
+};
+/* Menu
+================================================================================ */
+/**
+ * The base for text track and settings menu buttons.
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.Menu = vjs.Component.extend();
+
+/**
+ * Add a menu item to the menu
+ * @param {Object|String} component Component or component type to add
+ */
+vjs.Menu.prototype.addItem = function(component){
+ this.addChild(component);
+ component.on('click', vjs.bind(this, function(){
+ this.unlockShowing();
+ }));
+};
+
+/** @inheritDoc */
+vjs.Menu.prototype.createEl = function(){
+ var contentElType = this.options().contentElType || 'ul';
+ this.contentEl_ = vjs.createEl(contentElType, {
+ className: 'vjs-menu-content'
+ });
+ var el = vjs.Component.prototype.createEl.call(this, 'div', {
+ append: this.contentEl_,
+ className: 'vjs-menu'
+ });
+ el.appendChild(this.contentEl_);
+
+ // Prevent clicks from bubbling up. Needed for Menu Buttons,
+ // where a click on the parent is significant
+ vjs.on(el, 'click', function(event){
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ });
+
+ return el;
+};
+
+/**
+ * Menu item
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.MenuItem = vjs.Button.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Button.call(this, player, options);
+ this.selected(options['selected']);
+ }
+});
+
+/** @inheritDoc */
+vjs.MenuItem.prototype.createEl = function(type, props){
+ return vjs.Button.prototype.createEl.call(this, 'li', vjs.obj.merge({
+ className: 'vjs-menu-item',
+ innerHTML: this.options_['label']
+ }, props));
+};
+
+/** @inheritDoc */
+vjs.MenuItem.prototype.onClick = function(){
+ this.selected(true);
+};
+
+/**
+ * Set this menu item as selected or not
+ * @param {Boolean} selected
+ */
+vjs.MenuItem.prototype.selected = function(selected){
+ if (selected) {
+ this.addClass('vjs-selected');
+ this.el_.setAttribute('aria-selected',true);
+ } else {
+ this.removeClass('vjs-selected');
+ this.el_.setAttribute('aria-selected',false);
+ }
+};
+
+
+/**
+ * A button class with a popup menu
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.MenuButton = vjs.Button.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Button.call(this, player, options);
+
+ this.menu = this.createMenu();
+
+ // Add list to element
+ this.addChild(this.menu);
+
+ // Automatically hide empty menu buttons
+ if (this.items && this.items.length === 0) {
+ this.hide();
+ }
+
+ this.on('keyup', this.onKeyPress);
+ this.el_.setAttribute('aria-haspopup', true);
+ this.el_.setAttribute('role', 'button');
+ }
+});
+
+/**
+ * Track the state of the menu button
+ * @type {Boolean}
+ */
+vjs.MenuButton.prototype.buttonPressed_ = false;
+
+vjs.MenuButton.prototype.createMenu = function(){
+ var menu = new vjs.Menu(this.player_);
+
+ // Add a title list item to the top
+ if (this.options().title) {
+ menu.el().appendChild(vjs.createEl('li', {
+ className: 'vjs-menu-title',
+ innerHTML: vjs.capitalize(this.kind_),
+ tabindex: -1
+ }));
+ }
+
+ this.items = this.createItems();
+
+ if (this.items) {
+ // Add menu items to the menu
+ for (var i = 0; i < this.items.length; i++) {
+ menu.addItem(this.items[i]);
+ }
+ }
+
+ return menu;
+};
+
+/**
+ * Create the list of menu items. Specific to each subclass.
+ */
+vjs.MenuButton.prototype.createItems = function(){};
+
+/** @inheritDoc */
+vjs.MenuButton.prototype.buildCSSClass = function(){
+ return this.className + ' vjs-menu-button ' + vjs.Button.prototype.buildCSSClass.call(this);
+};
+
+// Focus - Add keyboard functionality to element
+// This function is not needed anymore. Instead, the keyboard functionality is handled by
+// treating the button as triggering a submenu. When the button is pressed, the submenu
+// appears. Pressing the button again makes the submenu disappear.
+vjs.MenuButton.prototype.onFocus = function(){};
+// Can't turn off list display that we turned on with focus, because list would go away.
+vjs.MenuButton.prototype.onBlur = function(){};
+
+vjs.MenuButton.prototype.onClick = function(){
+ // When you click the button it adds focus, which will show the menu indefinitely.
+ // So we'll remove focus when the mouse leaves the button.
+ // Focus is needed for tab navigation.
+ this.one('mouseout', vjs.bind(this, function(){
+ this.menu.unlockShowing();
+ this.el_.blur();
+ }));
+ if (this.buttonPressed_){
+ this.unpressButton();
+ } else {
+ this.pressButton();
+ }
+};
+
+vjs.MenuButton.prototype.onKeyPress = function(event){
+ event.preventDefault();
+
+ // Check for space bar (32) or enter (13) keys
+ if (event.which == 32 || event.which == 13) {
+ if (this.buttonPressed_){
+ this.unpressButton();
+ } else {
+ this.pressButton();
+ }
+ // Check for escape (27) key
+ } else if (event.which == 27){
+ if (this.buttonPressed_){
+ this.unpressButton();
+ }
+ }
+};
+
+vjs.MenuButton.prototype.pressButton = function(){
+ this.buttonPressed_ = true;
+ this.menu.lockShowing();
+ this.el_.setAttribute('aria-pressed', true);
+ if (this.items && this.items.length > 0) {
+ this.items[0].el().focus(); // set the focus to the title of the submenu
+ }
+};
+
+vjs.MenuButton.prototype.unpressButton = function(){
+ this.buttonPressed_ = false;
+ this.menu.unlockShowing();
+ this.el_.setAttribute('aria-pressed', false);
+};
+
+/**
+ * Main player class. A player instance is returned by _V_(id);
+ * @param {Element} tag The original video tag used for configuring options
+ * @param {Object=} options Player options
+ * @param {Function=} ready Ready callback function
+ * @constructor
+ */
+vjs.Player = vjs.Component.extend({
+ /** @constructor */
+ init: function(tag, options, ready){
+ this.tag = tag; // Store the original tag used to set options
+
+ // Set Options
+ // The options argument overrides options set in the video tag
+ // which overrides globally set options.
+ // This latter part coincides with the load order
+ // (tag must exist before Player)
+ options = vjs.obj.merge(this.getTagSettings(tag), options);
+
+ // Cache for video property values.
+ this.cache_ = {};
+
+ // Set poster
+ this.poster_ = options['poster'];
+ // Set controls
+ this.controls_ = options['controls'];
+ // Use native controls for iOS and Android by default
+ // until controls are more stable on those devices.
+ if (options['customControlsOnMobile'] !== true && (vjs.IS_IOS || vjs.IS_ANDROID)) {
+ tag.controls = options['controls'];
+ this.controls_ = false;
+ } else {
+ // Original tag settings stored in options
+ // now remove immediately so native controls don't flash.
+ tag.controls = false;
+ }
+
+ // Run base component initializing with new options.
+ // Builds the element through createEl()
+ // Inits and embeds any child components in opts
+ vjs.Component.call(this, this, options, ready);
+
+ // Firstplay event implimentation. Not sold on the event yet.
+ // Could probably just check currentTime==0?
+ this.one('play', function(e){
+ var fpEvent = { type: 'firstplay', target: this.el_ };
+ // Using vjs.trigger so we can check if default was prevented
+ var keepGoing = vjs.trigger(this.el_, fpEvent);
+
+ if (!keepGoing) {
+ e.preventDefault();
+ e.stopPropagation();
+ e.stopImmediatePropagation();
+ }
+ });
+
+ this.on('ended', this.onEnded);
+ this.on('play', this.onPlay);
+ this.on('firstplay', this.onFirstPlay);
+ this.on('pause', this.onPause);
+ this.on('progress', this.onProgress);
+ this.on('durationchange', this.onDurationChange);
+ this.on('error', this.onError);
+ this.on('fullscreenchange', this.onFullscreenChange);
+
+ // Make player easily findable by ID
+ vjs.players[this.id_] = this;
+
+ if (options['plugins']) {
+ vjs.obj.each(options['plugins'], function(key, val){
+ this[key](val);
+ }, this);
+ }
+ }
+});
+
+/**
+ * Player instance options, surfaced using vjs.options
+ * vjs.options = vjs.Player.prototype.options_
+ * Make changes in vjs.options, not here.
+ * All options should use string keys so they avoid
+ * renaming by closure compiler
+ * @type {Object}
+ * @private
+ */
+vjs.Player.prototype.options_ = vjs.options;
+
+vjs.Player.prototype.dispose = function(){
+ // this.isReady_ = false;
+
+ // Kill reference to this player
+ vjs.players[this.id_] = null;
+ if (this.tag && this.tag['player']) { this.tag['player'] = null; }
+ if (this.el_ && this.el_['player']) { this.el_['player'] = null; }
+
+ // Ensure that tracking progress and time progress will stop and plater deleted
+ this.stopTrackingProgress();
+ this.stopTrackingCurrentTime();
+
+ if (this.tech) { this.tech.dispose(); }
+
+ // Component dispose
+ vjs.Component.prototype.dispose.call(this);
+};
+
+vjs.Player.prototype.getTagSettings = function(tag){
+ var options = {
+ 'sources': [],
+ 'tracks': []
+ };
+
+ vjs.obj.merge(options, vjs.getAttributeValues(tag));
+
+ // Get tag children settings
+ if (tag.hasChildNodes()) {
+ var child, childName,
+ children = tag.childNodes,
+ i = 0,
+ j = children.length;
+
+ for (; i < j; i++) {
+ child = children[i];
+ // Change case needed: http://ejohn.org/blog/nodename-case-sensitivity/
+ childName = child.nodeName.toLowerCase();
+
+ if (childName === 'source') {
+ options['sources'].push(vjs.getAttributeValues(child));
+
+ } else if (childName === 'track') {
+ options['tracks'].push(vjs.getAttributeValues(child));
+
+ }
+ }
+ }
+
+ return options;
+};
+
+vjs.Player.prototype.createEl = function(){
+ var el = this.el_ = vjs.Component.prototype.createEl.call(this, 'div');
+ var tag = this.tag;
+
+ // Remove width/height attrs from tag so CSS can make it 100% width/height
+ tag.removeAttribute('width');
+ tag.removeAttribute('height');
+ // Empty video tag sources and tracks so the built-in player doesn't use them also.
+ // This may not be fast enough to stop HTML5 browsers from reading the tags
+ // so we'll need to turn off any default tracks if we're manually doing
+ // captions and subtitles. videoElement.textTracks
+ if (tag.hasChildNodes()) {
+ var nrOfChildNodes = tag.childNodes.length;
+ for (var i=0,j=tag.childNodes;i 0) {
+ techOptions['startTime'] = this.cache_.currentTime;
+ }
+
+ this.cache_.src = source.src;
+ }
+
+ // Initialize tech instance
+ this.tech = new window['videojs'][techName](this, techOptions);
+
+ this.tech.ready(techReady);
+};
+
+vjs.Player.prototype.unloadTech = function(){
+ this.isReady_ = false;
+ this.tech.dispose();
+
+ // Turn off any manual progress or timeupdate tracking
+ if (this.manualProgress) { this.manualProgressOff(); }
+
+ if (this.manualTimeUpdates) { this.manualTimeUpdatesOff(); }
+
+ this.tech = false;
+};
+
+// There's many issues around changing the size of a Flash (or other plugin) object.
+// First is a plugin reload issue in Firefox that has been around for 11 years: https://bugzilla.mozilla.org/show_bug.cgi?id=90268
+// Then with the new fullscreen API, Mozilla and webkit browsers will reload the flash object after going to fullscreen.
+// To get around this, we're unloading the tech, caching source and currentTime values, and reloading the tech once the plugin is resized.
+// reloadTech: function(betweenFn){
+// vjs.log('unloadingTech')
+// this.unloadTech();
+// vjs.log('unloadedTech')
+// if (betweenFn) { betweenFn.call(); }
+// vjs.log('LoadingTech')
+// this.loadTech(this.techName, { src: this.cache_.src })
+// vjs.log('loadedTech')
+// },
+
+/* Fallbacks for unsupported event types
+================================================================================ */
+// Manually trigger progress events based on changes to the buffered amount
+// Many flash players and older HTML5 browsers don't send progress or progress-like events
+vjs.Player.prototype.manualProgressOn = function(){
+ this.manualProgress = true;
+
+ // Trigger progress watching when a source begins loading
+ this.trackProgress();
+
+ // Watch for a native progress event call on the tech element
+ // In HTML5, some older versions don't support the progress event
+ // So we're assuming they don't, and turning off manual progress if they do.
+ // As opposed to doing user agent detection
+ this.tech.one('progress', function(){
+
+ // Update known progress support for this playback technology
+ this.features.progressEvents = true;
+
+ // Turn off manual progress tracking
+ this.player_.manualProgressOff();
+ });
+};
+
+vjs.Player.prototype.manualProgressOff = function(){
+ this.manualProgress = false;
+ this.stopTrackingProgress();
+};
+
+vjs.Player.prototype.trackProgress = function(){
+
+ this.progressInterval = setInterval(vjs.bind(this, function(){
+ // Don't trigger unless buffered amount is greater than last time
+ // log(this.cache_.bufferEnd, this.buffered().end(0), this.duration())
+ /* TODO: update for multiple buffered regions */
+ if (this.cache_.bufferEnd < this.buffered().end(0)) {
+ this.trigger('progress');
+ } else if (this.bufferedPercent() == 1) {
+ this.stopTrackingProgress();
+ this.trigger('progress'); // Last update
+ }
+ }), 500);
+};
+vjs.Player.prototype.stopTrackingProgress = function(){ clearInterval(this.progressInterval); };
+
+/* Time Tracking -------------------------------------------------------------- */
+vjs.Player.prototype.manualTimeUpdatesOn = function(){
+ this.manualTimeUpdates = true;
+
+ this.on('play', this.trackCurrentTime);
+ this.on('pause', this.stopTrackingCurrentTime);
+ // timeupdate is also called by .currentTime whenever current time is set
+
+ // Watch for native timeupdate event
+ this.tech.one('timeupdate', function(){
+ // Update known progress support for this playback technology
+ this.features.timeupdateEvents = true;
+ // Turn off manual progress tracking
+ this.player_.manualTimeUpdatesOff();
+ });
+};
+
+vjs.Player.prototype.manualTimeUpdatesOff = function(){
+ this.manualTimeUpdates = false;
+ this.stopTrackingCurrentTime();
+ this.off('play', this.trackCurrentTime);
+ this.off('pause', this.stopTrackingCurrentTime);
+};
+
+vjs.Player.prototype.trackCurrentTime = function(){
+ if (this.currentTimeInterval) { this.stopTrackingCurrentTime(); }
+ this.currentTimeInterval = setInterval(vjs.bind(this, function(){
+ this.trigger('timeupdate');
+ }), 250); // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
+};
+
+// Turn off play progress tracking (when paused or dragging)
+vjs.Player.prototype.stopTrackingCurrentTime = function(){ clearInterval(this.currentTimeInterval); };
+
+// /* Player event handlers (how the player reacts to certain events)
+// ================================================================================ */
+vjs.Player.prototype.onEnded = function(){
+ if (this.options_['loop']) {
+ this.currentTime(0);
+ this.play();
+ }
+};
+
+vjs.Player.prototype.onPlay = function(){
+ vjs.removeClass(this.el_, 'vjs-paused');
+ vjs.addClass(this.el_, 'vjs-playing');
+};
+
+vjs.Player.prototype.onFirstPlay = function(){
+ //If the first starttime attribute is specified
+ //then we will start at the given offset in seconds
+ if(this.options_['starttime']){
+ this.currentTime(this.options_['starttime']);
+ }
+};
+
+vjs.Player.prototype.onPause = function(){
+ vjs.removeClass(this.el_, 'vjs-playing');
+ vjs.addClass(this.el_, 'vjs-paused');
+};
+
+vjs.Player.prototype.onProgress = function(){
+ // Add custom event for when source is finished downloading.
+ if (this.bufferedPercent() == 1) {
+ this.trigger('loadedalldata');
+ }
+};
+
+// Update duration with durationchange event
+// Allows for cacheing value instead of asking player each time.
+vjs.Player.prototype.onDurationChange = function(){
+ this.duration(this.techGet('duration'));
+};
+
+vjs.Player.prototype.onError = function(e) {
+ vjs.log('Video Error', e);
+};
+
+vjs.Player.prototype.onFullscreenChange = function(e) {
+ if (this.isFullScreen) {
+ this.addClass('vjs-fullscreen');
+ } else {
+ this.removeClass('vjs-fullscreen');
+ }
+};
+
+// /* Player API
+// ================================================================================ */
+
+/**
+ * Object for cached values.
+ * @private
+ */
+vjs.Player.prototype.cache_;
+
+vjs.Player.prototype.getCache = function(){
+ return this.cache_;
+};
+
+// Pass values to the playback tech
+vjs.Player.prototype.techCall = function(method, arg){
+ // If it's not ready yet, call method when it is
+ if (this.tech && this.tech.isReady_) {
+ this.tech.ready(function(){
+ this[method](arg);
+ });
+
+ // Otherwise call method now
+ } else {
+ try {
+ this.tech[method](arg);
+ } catch(e) {
+ vjs.log(e);
+ throw e;
+ }
+ }
+};
+
+// Get calls can't wait for the tech, and sometimes don't need to.
+vjs.Player.prototype.techGet = function(method){
+
+ // Make sure there is a tech
+ // if (!this.tech) {
+ // return;
+ // }
+
+ if (this.tech.isReady_) {
+
+ // Flash likes to die and reload when you hide or reposition it.
+ // In these cases the object methods go away and we get errors.
+ // When that happens we'll catch the errors and inform tech that it's not ready any more.
+ try {
+ return this.tech[method]();
+ } catch(e) {
+ // When building additional tech libs, an expected method may not be defined yet
+ if (this.tech[method] === undefined) {
+ vjs.log('Video.js: ' + method + ' method not defined for '+this.techName+' playback technology.', e);
+ } else {
+ // When a method isn't available on the object it throws a TypeError
+ if (e.name == 'TypeError') {
+ vjs.log('Video.js: ' + method + ' unavailable on '+this.techName+' playback technology element.', e);
+ this.tech.isReady_ = false;
+ } else {
+ vjs.log(e);
+ }
+ }
+ throw e;
+ }
+ }
+
+ return;
+};
+
+/**
+ * Start media playback
+ * http://dev.w3.org/html5/spec/video.html#dom-media-play
+ * We're triggering the 'play' event here instead of relying on the
+ * media element to allow using event.preventDefault() to stop
+ * play from happening if desired. Usecase: preroll ads.
+ */
+vjs.Player.prototype.play = function(){
+ this.techCall('play');
+ return this;
+};
+
+// http://dev.w3.org/html5/spec/video.html#dom-media-pause
+vjs.Player.prototype.pause = function(){
+ this.techCall('pause');
+ return this;
+};
+
+// http://dev.w3.org/html5/spec/video.html#dom-media-paused
+// The initial state of paused should be true (in Safari it's actually false)
+vjs.Player.prototype.paused = function(){
+ return (this.techGet('paused') === false) ? false : true;
+};
+
+// http://dev.w3.org/html5/spec/video.html#dom-media-currenttime
+vjs.Player.prototype.currentTime = function(seconds){
+ if (seconds !== undefined) {
+
+ // Cache the last set value for smoother scrubbing.
+ this.cache_.lastSetCurrentTime = seconds;
+
+ this.techCall('setCurrentTime', seconds);
+
+ // Improve the accuracy of manual timeupdates
+ if (this.manualTimeUpdates) { this.trigger('timeupdate'); }
+
+ return this;
+ }
+
+ // Cache last currentTime and return
+ // Default to 0 seconds
+ return this.cache_.currentTime = (this.techGet('currentTime') || 0);
+};
+
+// http://dev.w3.org/html5/spec/video.html#dom-media-duration
+// Duration should return NaN if not available. ParseFloat will turn false-ish values to NaN.
+vjs.Player.prototype.duration = function(seconds){
+ if (seconds !== undefined) {
+
+ // Cache the last set value for optimiized scrubbing (esp. Flash)
+ this.cache_.duration = parseFloat(seconds);
+
+ return this;
+ }
+
+ return this.cache_.duration;
+};
+
+// Calculates how much time is left. Not in spec, but useful.
+vjs.Player.prototype.remainingTime = function(){
+ return this.duration() - this.currentTime();
+};
+
+// http://dev.w3.org/html5/spec/video.html#dom-media-buffered
+// Buffered returns a timerange object.
+// Kind of like an array of portions of the video that have been downloaded.
+// So far no browsers return more than one range (portion)
+vjs.Player.prototype.buffered = function(){
+ var buffered = this.techGet('buffered'),
+ start = 0,
+ // Default end to 0 and store in values
+ end = this.cache_.bufferEnd = this.cache_.bufferEnd || 0;
+
+ if (buffered && buffered.length > 0 && buffered.end(0) !== end) {
+ end = buffered.end(0);
+ // Storing values allows them be overridden by setBufferedFromProgress
+ this.cache_.bufferEnd = end;
+ }
+
+ return vjs.createTimeRange(start, end);
+};
+
+// Calculates amount of buffer is full. Not in spec but useful.
+vjs.Player.prototype.bufferedPercent = function(){
+ return (this.duration()) ? this.buffered().end(0) / this.duration() : 0;
+};
+
+// http://dev.w3.org/html5/spec/video.html#dom-media-volume
+vjs.Player.prototype.volume = function(percentAsDecimal){
+ var vol;
+
+ if (percentAsDecimal !== undefined) {
+ vol = Math.max(0, Math.min(1, parseFloat(percentAsDecimal))); // Force value to between 0 and 1
+ this.cache_.volume = vol;
+ this.techCall('setVolume', vol);
+ vjs.setLocalStorage('volume', vol);
+ return this;
+ }
+
+ // Default to 1 when returning current volume.
+ vol = parseFloat(this.techGet('volume'));
+ return (isNaN(vol)) ? 1 : vol;
+};
+
+// http://dev.w3.org/html5/spec/video.html#attr-media-muted
+vjs.Player.prototype.muted = function(muted){
+ if (muted !== undefined) {
+ this.techCall('setMuted', muted);
+ return this;
+ }
+ return this.techGet('muted') || false; // Default to false
+};
+
+// Check if current tech can support native fullscreen (e.g. with built in controls lik iOS, so not our flash swf)
+vjs.Player.prototype.supportsFullScreen = function(){ return this.techGet('supportsFullScreen') || false; };
+
+// Turn on fullscreen (or window) mode
+vjs.Player.prototype.requestFullScreen = function(){
+ var requestFullScreen = vjs.support.requestFullScreen;
+ this.isFullScreen = true;
+
+ if (requestFullScreen) {
+ // the browser supports going fullscreen at the element level so we can
+ // take the controls fullscreen as well as the video
+
+ // Trigger fullscreenchange event after change
+ vjs.on(document, requestFullScreen.eventName, vjs.bind(this, function(){
+ this.isFullScreen = document[requestFullScreen.isFullScreen];
+
+ // If cancelling fullscreen, remove event listener.
+ if (this.isFullScreen === false) {
+ vjs.off(document, requestFullScreen.eventName, arguments.callee);
+ }
+
+ }));
+
+ // Flash and other plugins get reloaded when you take their parent to fullscreen.
+ // To fix that we'll remove the tech, and reload it after the resize has finished.
+ if (this.tech.features.fullscreenResize === false && this.options_['flash']['iFrameMode'] !== true) {
+
+ this.pause();
+ this.unloadTech();
+
+ vjs.on(document, requestFullScreen.eventName, vjs.bind(this, function(){
+ vjs.off(document, requestFullScreen.eventName, arguments.callee);
+ this.loadTech(this.techName, { src: this.cache_.src });
+ }));
+
+ this.el_[requestFullScreen.requestFn]();
+
+ } else {
+ this.el_[requestFullScreen.requestFn]();
+ }
+
+ this.trigger('fullscreenchange');
+
+ } else if (this.tech.supportsFullScreen()) {
+ // we can't take the video.js controls fullscreen but we can go fullscreen
+ // with native controls
+
+ this.techCall('enterFullScreen');
+ } else {
+ // fullscreen isn't supported so we'll just stretch the video element to
+ // fill the viewport
+
+ this.enterFullWindow();
+ this.trigger('fullscreenchange');
+ }
+
+ return this;
+};
+
+vjs.Player.prototype.cancelFullScreen = function(){
+ var requestFullScreen = vjs.support.requestFullScreen;
+
+ this.isFullScreen = false;
+
+ // Check for browser element fullscreen support
+ if (requestFullScreen) {
+
+ // Flash and other plugins get reloaded when you take their parent to fullscreen.
+ // To fix that we'll remove the tech, and reload it after the resize has finished.
+ if (this.tech.features.fullscreenResize === false && this.options_['flash']['iFrameMode'] !== true) {
+
+ this.pause();
+ this.unloadTech();
+
+ vjs.on(document, requestFullScreen.eventName, vjs.bind(this, function(){
+ vjs.off(document, requestFullScreen.eventName, arguments.callee);
+ this.loadTech(this.techName, { src: this.cache_.src });
+ }));
+
+ document[requestFullScreen.cancelFn]();
+ } else {
+ document[requestFullScreen.cancelFn]();
+ }
+
+ this.trigger('fullscreenchange');
+
+ } else if (this.tech.supportsFullScreen()) {
+ this.techCall('exitFullScreen');
+ } else {
+ this.exitFullWindow();
+ this.trigger('fullscreenchange');
+ }
+
+ return this;
+};
+
+// When fullscreen isn't supported we can stretch the video container to as wide as the browser will let us.
+vjs.Player.prototype.enterFullWindow = function(){
+ this.isFullWindow = true;
+
+ // Storing original doc overflow value to return to when fullscreen is off
+ this.docOrigOverflow = document.documentElement.style.overflow;
+
+ // Add listener for esc key to exit fullscreen
+ vjs.on(document, 'keydown', vjs.bind(this, this.fullWindowOnEscKey));
+
+ // Hide any scroll bars
+ document.documentElement.style.overflow = 'hidden';
+
+ // Apply fullscreen styles
+ vjs.addClass(document.body, 'vjs-full-window');
+
+ this.trigger('enterFullWindow');
+};
+vjs.Player.prototype.fullWindowOnEscKey = function(event){
+ if (event.keyCode === 27) {
+ if (this.isFullScreen === true) {
+ this.cancelFullScreen();
+ } else {
+ this.exitFullWindow();
+ }
+ }
+};
+
+vjs.Player.prototype.exitFullWindow = function(){
+ this.isFullWindow = false;
+ vjs.off(document, 'keydown', this.fullWindowOnEscKey);
+
+ // Unhide scroll bars.
+ document.documentElement.style.overflow = this.docOrigOverflow;
+
+ // Remove fullscreen styles
+ vjs.removeClass(document.body, 'vjs-full-window');
+
+ // Resize the box, controller, and poster to original sizes
+ // this.positionAll();
+ this.trigger('exitFullWindow');
+};
+
+vjs.Player.prototype.selectSource = function(sources){
+
+ // Loop through each playback technology in the options order
+ for (var i=0,j=this.options_['techOrder'];iChrome or download the latest Adobe Flash Player .'
+ }));
+ }
+
+ // Case: Source object { src: '', type: '' ... }
+ } else if (source instanceof Object) {
+
+ if (window['videojs'][this.techName]['canPlaySource'](source)) {
+ this.src(source.src);
+ } else {
+ // Send through tech loop to check for a compatible technology.
+ this.src([source]);
+ }
+
+ // Case: URL String (http://myvideo...)
+ } else {
+ // Cache for getting last set source
+ this.cache_.src = source;
+
+ if (!this.isReady_) {
+ this.ready(function(){
+ this.src(source);
+ });
+ } else {
+ this.techCall('src', source);
+ if (this.options_['preload'] == 'auto') {
+ this.load();
+ }
+ if (this.options_['autoplay']) {
+ this.play();
+ }
+ }
+ }
+ return this;
+};
+
+// Begin loading the src data
+// http://dev.w3.org/html5/spec/video.html#dom-media-load
+vjs.Player.prototype.load = function(){
+ this.techCall('load');
+ return this;
+};
+
+// http://dev.w3.org/html5/spec/video.html#dom-media-currentsrc
+vjs.Player.prototype.currentSrc = function(){
+ return this.techGet('currentSrc') || this.cache_.src || '';
+};
+
+// Attributes/Options
+vjs.Player.prototype.preload = function(value){
+ if (value !== undefined) {
+ this.techCall('setPreload', value);
+ this.options_['preload'] = value;
+ return this;
+ }
+ return this.techGet('preload');
+};
+vjs.Player.prototype.autoplay = function(value){
+ if (value !== undefined) {
+ this.techCall('setAutoplay', value);
+ this.options_['autoplay'] = value;
+ return this;
+ }
+ return this.techGet('autoplay', value);
+};
+vjs.Player.prototype.loop = function(value){
+ if (value !== undefined) {
+ this.techCall('setLoop', value);
+ this.options_['loop'] = value;
+ return this;
+ }
+ return this.techGet('loop');
+};
+
+/**
+ * The url of the poster image source.
+ * @type {String}
+ * @private
+ */
+vjs.Player.prototype.poster_;
+
+/**
+ * Get or set the poster image source url.
+ * @param {String} src Poster image source URL
+ * @return {String} Poster image source URL or null
+ */
+vjs.Player.prototype.poster = function(src){
+ if (src !== undefined) {
+ this.poster_ = src;
+ }
+ return this.poster_;
+};
+
+/**
+ * Whether or not the controls are showing
+ * @type {Boolean}
+ * @private
+ */
+vjs.Player.prototype.controls_;
+
+/**
+ * Get or set whether or not the controls are showing.
+ * @param {Boolean} controls Set controls to showing or not
+ * @return {Boolean} Controls are showing
+ */
+vjs.Player.prototype.controls = function(controls){
+ if (controls !== undefined) {
+ // Don't trigger a change event unless it actually changed
+ if (this.controls_ !== controls) {
+ this.controls_ = !!controls; // force boolean
+ this.trigger('controlschange');
+ }
+ }
+ return this.controls_;
+};
+
+vjs.Player.prototype.error = function(){ return this.techGet('error'); };
+vjs.Player.prototype.ended = function(){ return this.techGet('ended'); };
+
+// Methods to add support for
+// networkState: function(){ return this.techCall('networkState'); },
+// readyState: function(){ return this.techCall('readyState'); },
+// seeking: function(){ return this.techCall('seeking'); },
+// initialTime: function(){ return this.techCall('initialTime'); },
+// startOffsetTime: function(){ return this.techCall('startOffsetTime'); },
+// played: function(){ return this.techCall('played'); },
+// seekable: function(){ return this.techCall('seekable'); },
+// videoTracks: function(){ return this.techCall('videoTracks'); },
+// audioTracks: function(){ return this.techCall('audioTracks'); },
+// videoWidth: function(){ return this.techCall('videoWidth'); },
+// videoHeight: function(){ return this.techCall('videoHeight'); },
+// defaultPlaybackRate: function(){ return this.techCall('defaultPlaybackRate'); },
+// playbackRate: function(){ return this.techCall('playbackRate'); },
+// mediaGroup: function(){ return this.techCall('mediaGroup'); },
+// controller: function(){ return this.techCall('controller'); },
+// defaultMuted: function(){ return this.techCall('defaultMuted'); }
+
+// TODO
+// currentSrcList: the array of sources including other formats and bitrates
+// playList: array of source lists in order of playback
+
+// RequestFullscreen API
+(function(){
+ var prefix, requestFS, div;
+
+ div = document.createElement('div');
+
+ requestFS = {};
+
+ // Current W3C Spec
+ // http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api
+ // Mozilla Draft: https://wiki.mozilla.org/Gecko:FullScreenAPI#fullscreenchange_event
+ if (div.cancelFullscreen !== undefined) {
+ requestFS.requestFn = 'requestFullscreen';
+ requestFS.cancelFn = 'exitFullscreen';
+ requestFS.eventName = 'fullscreenchange';
+ requestFS.isFullScreen = 'fullScreen';
+
+ // Webkit (Chrome/Safari) and Mozilla (Firefox) have working implementations
+ // that use prefixes and vary slightly from the new W3C spec. Specifically,
+ // using 'exit' instead of 'cancel', and lowercasing the 'S' in Fullscreen.
+ // Other browsers don't have any hints of which version they might follow yet,
+ // so not going to try to predict by looping through all prefixes.
+ } else {
+
+ if (document.mozCancelFullScreen) {
+ prefix = 'moz';
+ requestFS.isFullScreen = prefix + 'FullScreen';
+ } else {
+ prefix = 'webkit';
+ requestFS.isFullScreen = prefix + 'IsFullScreen';
+ }
+
+ if (div[prefix + 'RequestFullScreen']) {
+ requestFS.requestFn = prefix + 'RequestFullScreen';
+ requestFS.cancelFn = prefix + 'CancelFullScreen';
+ }
+ requestFS.eventName = prefix + 'fullscreenchange';
+ }
+
+ if (document[requestFS.cancelFn]) {
+ vjs.support.requestFullScreen = requestFS;
+ }
+
+})();
+/**
+ * Container of main controls
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.ControlBar = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ if (!player.controls()) {
+ this.disable();
+ }
+
+ player.one('play', vjs.bind(this, function(){
+ var touchstart,
+ fadeIn = vjs.bind(this, this.fadeIn),
+ fadeOut = vjs.bind(this, this.fadeOut);
+
+ this.fadeIn();
+
+ if ( !('ontouchstart' in window) ) {
+ this.player_.on('mouseover', fadeIn);
+ this.player_.on('mouseout', fadeOut);
+ this.player_.on('pause', vjs.bind(this, this.lockShowing));
+ this.player_.on('play', vjs.bind(this, this.unlockShowing));
+ }
+
+ touchstart = false;
+ this.player_.on('touchstart', function() {
+ touchstart = true;
+ });
+ this.player_.on('touchmove', function() {
+ touchstart = false;
+ });
+ this.player_.on('touchend', vjs.bind(this, function(event) {
+ var idx;
+ if (touchstart) {
+ idx = this.el().className.search('fade-in');
+ if (idx !== -1) {
+ this.fadeOut();
+ } else {
+ this.fadeIn();
+ }
+ }
+ touchstart = false;
+
+ if (!this.player_.paused()) {
+ event.preventDefault();
+ }
+ }));
+ }));
+ }
+});
+
+vjs.ControlBar.prototype.options_ = {
+ loadEvent: 'play',
+ children: {
+ 'playToggle': {},
+ 'currentTimeDisplay': {},
+ 'timeDivider': {},
+ 'durationDisplay': {},
+ 'remainingTimeDisplay': {},
+ 'progressControl': {},
+ 'fullscreenToggle': {},
+ 'volumeControl': {},
+ 'muteToggle': {}
+ // 'volumeMenuButton': {}
+ }
+};
+
+vjs.ControlBar.prototype.createEl = function(){
+ return vjs.createEl('div', {
+ className: 'vjs-control-bar'
+ });
+};
+
+vjs.ControlBar.prototype.fadeIn = function(){
+ vjs.Component.prototype.fadeIn.call(this);
+ this.player_.trigger('controlsvisible');
+};
+
+vjs.ControlBar.prototype.fadeOut = function(){
+ vjs.Component.prototype.fadeOut.call(this);
+ this.player_.trigger('controlshidden');
+};/**
+ * Button to toggle between play and pause
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.PlayToggle = vjs.Button.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Button.call(this, player, options);
+
+ player.on('play', vjs.bind(this, this.onPlay));
+ player.on('pause', vjs.bind(this, this.onPause));
+ }
+});
+
+vjs.PlayToggle.prototype.buttonText = 'Play';
+
+vjs.PlayToggle.prototype.buildCSSClass = function(){
+ return 'vjs-play-control ' + vjs.Button.prototype.buildCSSClass.call(this);
+};
+
+ // OnClick - Toggle between play and pause
+vjs.PlayToggle.prototype.onClick = function(){
+ if (this.player_.paused()) {
+ this.player_.play();
+ } else {
+ this.player_.pause();
+ }
+};
+
+ // OnPlay - Add the vjs-playing class to the element so it can change appearance
+vjs.PlayToggle.prototype.onPlay = function(){
+ vjs.removeClass(this.el_, 'vjs-paused');
+ vjs.addClass(this.el_, 'vjs-playing');
+ this.el_.children[0].children[0].innerHTML = 'Pause'; // change the button text to "Pause"
+};
+
+ // OnPause - Add the vjs-paused class to the element so it can change appearance
+vjs.PlayToggle.prototype.onPause = function(){
+ vjs.removeClass(this.el_, 'vjs-playing');
+ vjs.addClass(this.el_, 'vjs-paused');
+ this.el_.children[0].children[0].innerHTML = 'Play'; // change the button text to "Play"
+};/**
+ * Displays the current time
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.CurrentTimeDisplay = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ player.on('timeupdate', vjs.bind(this, this.updateContent));
+ }
+});
+
+vjs.CurrentTimeDisplay.prototype.createEl = function(){
+ var el = vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-current-time vjs-time-controls vjs-control'
+ });
+
+ this.content = vjs.createEl('div', {
+ className: 'vjs-current-time-display',
+ innerHTML: 'Current Time ' + '0:00', // label the current time for screen reader users
+ 'aria-live': 'off' // tell screen readers not to automatically read the time as it changes
+ });
+
+ el.appendChild(vjs.createEl('div').appendChild(this.content));
+ return el;
+};
+
+vjs.CurrentTimeDisplay.prototype.updateContent = function(){
+ // Allows for smooth scrubbing, when player can't keep up.
+ var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime();
+ this.content.innerHTML = 'Current Time ' + vjs.formatTime(time, this.player_.duration());
+};
+
+/**
+ * Displays the duration
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.DurationDisplay = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ player.on('timeupdate', vjs.bind(this, this.updateContent)); // this might need to be changes to 'durationchange' instead of 'timeupdate' eventually, however the durationchange event fires before this.player_.duration() is set, so the value cannot be written out using this method. Once the order of durationchange and this.player_.duration() being set is figured out, this can be updated.
+ }
+});
+
+vjs.DurationDisplay.prototype.createEl = function(){
+ var el = vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-duration vjs-time-controls vjs-control'
+ });
+
+ this.content = vjs.createEl('div', {
+ className: 'vjs-duration-display',
+ innerHTML: 'Duration Time ' + '0:00', // label the duration time for screen reader users
+ 'aria-live': 'off' // tell screen readers not to automatically read the time as it changes
+ });
+
+ el.appendChild(vjs.createEl('div').appendChild(this.content));
+ return el;
+};
+
+vjs.DurationDisplay.prototype.updateContent = function(){
+ if (this.player_.duration()) {
+ this.content.innerHTML = 'Duration Time ' + vjs.formatTime(this.player_.duration()); // label the duration time for screen reader users
+ }
+};
+
+/**
+ * Time Separator (Not used in main skin, but still available, and could be used as a 'spare element')
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.TimeDivider = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+ }
+});
+
+vjs.TimeDivider.prototype.createEl = function(){
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-time-divider',
+ innerHTML: '/
'
+ });
+};
+
+/**
+ * Displays the time left in the video
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.RemainingTimeDisplay = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ player.on('timeupdate', vjs.bind(this, this.updateContent));
+ }
+});
+
+vjs.RemainingTimeDisplay.prototype.createEl = function(){
+ var el = vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-remaining-time vjs-time-controls vjs-control'
+ });
+
+ this.content = vjs.createEl('div', {
+ className: 'vjs-remaining-time-display',
+ innerHTML: 'Remaining Time ' + '-0:00', // label the remaining time for screen reader users
+ 'aria-live': 'off' // tell screen readers not to automatically read the time as it changes
+ });
+
+ el.appendChild(vjs.createEl('div').appendChild(this.content));
+ return el;
+};
+
+vjs.RemainingTimeDisplay.prototype.updateContent = function(){
+ if (this.player_.duration()) {
+ if (this.player_.duration()) {
+ this.content.innerHTML = 'Remaining Time ' + '-'+ vjs.formatTime(this.player_.remainingTime());
+ }
+ }
+
+ // Allows for smooth scrubbing, when player can't keep up.
+ // var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime();
+ // this.content.innerHTML = vjs.formatTime(time, this.player_.duration());
+};/**
+ * Toggle fullscreen video
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.FullscreenToggle = vjs.Button.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Button.call(this, player, options);
+ }
+});
+
+vjs.FullscreenToggle.prototype.buttonText = 'Fullscreen';
+
+vjs.FullscreenToggle.prototype.buildCSSClass = function(){
+ return 'vjs-fullscreen-control ' + vjs.Button.prototype.buildCSSClass.call(this);
+};
+
+vjs.FullscreenToggle.prototype.onClick = function(){
+ if (!this.player_.isFullScreen) {
+ this.player_.requestFullScreen();
+ this.el_.children[0].children[0].innerHTML = 'Non-Fullscreen'; // change the button text to "Non-Fullscreen"
+ } else {
+ this.player_.cancelFullScreen();
+ this.el_.children[0].children[0].innerHTML = 'Fullscreen'; // change the button to "Fullscreen"
+ }
+};/**
+ * Seek, Load Progress, and Play Progress
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.ProgressControl = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+ }
+});
+
+vjs.ProgressControl.prototype.options_ = {
+ children: {
+ 'seekBar': {}
+ }
+};
+
+vjs.ProgressControl.prototype.createEl = function(){
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-progress-control vjs-control'
+ });
+};
+
+/**
+ * Seek Bar and holder for the progress bars
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.SeekBar = vjs.Slider.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Slider.call(this, player, options);
+ player.on('timeupdate', vjs.bind(this, this.updateARIAAttributes));
+ player.ready(vjs.bind(this, this.updateARIAAttributes));
+ }
+});
+
+vjs.SeekBar.prototype.options_ = {
+ children: {
+ 'loadProgressBar': {},
+ 'playProgressBar': {},
+ 'seekHandle': {}
+ },
+ 'barName': 'playProgressBar',
+ 'handleName': 'seekHandle'
+};
+
+vjs.SeekBar.prototype.playerEvent = 'timeupdate';
+
+vjs.SeekBar.prototype.createEl = function(){
+ return vjs.Slider.prototype.createEl.call(this, 'div', {
+ className: 'vjs-progress-holder',
+ 'aria-label': 'video progress bar'
+ });
+};
+
+vjs.SeekBar.prototype.updateARIAAttributes = function(){
+ // Allows for smooth scrubbing, when player can't keep up.
+ var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime();
+ this.el_.setAttribute('aria-valuenow',vjs.round(this.getPercent()*100, 2)); // machine readable value of progress bar (percentage complete)
+ this.el_.setAttribute('aria-valuetext',vjs.formatTime(time, this.player_.duration())); // human readable value of progress bar (time complete)
+};
+
+vjs.SeekBar.prototype.getPercent = function(){
+ return this.player_.currentTime() / this.player_.duration();
+};
+
+vjs.SeekBar.prototype.onMouseDown = function(event){
+ vjs.Slider.prototype.onMouseDown.call(this, event);
+
+ this.player_.scrubbing = true;
+
+ this.videoWasPlaying = !this.player_.paused();
+ this.player_.pause();
+};
+
+vjs.SeekBar.prototype.onMouseMove = function(event){
+ var newTime = this.calculateDistance(event) * this.player_.duration();
+
+ // Don't let video end while scrubbing.
+ if (newTime == this.player_.duration()) { newTime = newTime - 0.1; }
+
+ // Set new time (tell player to seek to new time)
+ this.player_.currentTime(newTime);
+};
+
+vjs.SeekBar.prototype.onMouseUp = function(event){
+ vjs.Slider.prototype.onMouseUp.call(this, event);
+
+ this.player_.scrubbing = false;
+ if (this.videoWasPlaying) {
+ this.player_.play();
+ }
+};
+
+vjs.SeekBar.prototype.stepForward = function(){
+ this.player_.currentTime(this.player_.currentTime() + 5); // more quickly fast forward for keyboard-only users
+};
+
+vjs.SeekBar.prototype.stepBack = function(){
+ this.player_.currentTime(this.player_.currentTime() - 5); // more quickly rewind for keyboard-only users
+};
+
+
+/**
+ * Shows load progres
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.LoadProgressBar = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+ player.on('progress', vjs.bind(this, this.update));
+ }
+});
+
+vjs.LoadProgressBar.prototype.createEl = function(){
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-load-progress',
+ innerHTML: 'Loaded: 0% '
+ });
+};
+
+vjs.LoadProgressBar.prototype.update = function(){
+ if (this.el_.style) { this.el_.style.width = vjs.round(this.player_.bufferedPercent() * 100, 2) + '%'; }
+};
+
+
+/**
+ * Shows play progress
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.PlayProgressBar = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+ }
+});
+
+vjs.PlayProgressBar.prototype.createEl = function(){
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-play-progress',
+ innerHTML: 'Progress: 0% '
+ });
+};
+
+/**
+ * SeekBar component includes play progress bar, and seek handle
+ * Needed so it can determine seek position based on handle position/size
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.SeekHandle = vjs.SliderHandle.extend();
+
+/** @inheritDoc */
+vjs.SeekHandle.prototype.defaultValue = '00:00';
+
+/** @inheritDoc */
+vjs.SeekHandle.prototype.createEl = function(){
+ return vjs.SliderHandle.prototype.createEl.call(this, 'div', {
+ className: 'vjs-seek-handle'
+ });
+};/**
+ * Control the volume
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.VolumeControl = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ // hide volume controls when they're not supported by the current tech
+ if (player.tech && player.tech.features && player.tech.features.volumeControl === false) {
+ this.addClass('vjs-hidden');
+ }
+ player.on('loadstart', vjs.bind(this, function(){
+ if (player.tech.features && player.tech.features.volumeControl === false) {
+ this.addClass('vjs-hidden');
+ } else {
+ this.removeClass('vjs-hidden');
+ }
+ }));
+ }
+});
+
+vjs.VolumeControl.prototype.options_ = {
+ children: {
+ 'volumeBar': {}
+ }
+};
+
+vjs.VolumeControl.prototype.createEl = function(){
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-volume-control vjs-control'
+ });
+};
+
+/**
+ * Contains volume level
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.VolumeBar = vjs.Slider.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Slider.call(this, player, options);
+ player.on('volumechange', vjs.bind(this, this.updateARIAAttributes));
+ player.ready(vjs.bind(this, this.updateARIAAttributes));
+ setTimeout(vjs.bind(this, this.update), 0); // update when elements is in DOM
+ }
+});
+
+vjs.VolumeBar.prototype.updateARIAAttributes = function(){
+ // Current value of volume bar as a percentage
+ this.el_.setAttribute('aria-valuenow',vjs.round(this.player_.volume()*100, 2));
+ this.el_.setAttribute('aria-valuetext',vjs.round(this.player_.volume()*100, 2)+'%');
+};
+
+vjs.VolumeBar.prototype.options_ = {
+ children: {
+ 'volumeLevel': {},
+ 'volumeHandle': {}
+ },
+ 'barName': 'volumeLevel',
+ 'handleName': 'volumeHandle'
+};
+
+vjs.VolumeBar.prototype.playerEvent = 'volumechange';
+
+vjs.VolumeBar.prototype.createEl = function(){
+ return vjs.Slider.prototype.createEl.call(this, 'div', {
+ className: 'vjs-volume-bar',
+ 'aria-label': 'volume level'
+ });
+};
+
+vjs.VolumeBar.prototype.onMouseMove = function(event) {
+ this.player_.volume(this.calculateDistance(event));
+};
+
+vjs.VolumeBar.prototype.getPercent = function(){
+ if (this.player_.muted()) {
+ return 0;
+ } else {
+ return this.player_.volume();
+ }
+};
+
+vjs.VolumeBar.prototype.stepForward = function(){
+ this.player_.volume(this.player_.volume() + 0.1);
+};
+
+vjs.VolumeBar.prototype.stepBack = function(){
+ this.player_.volume(this.player_.volume() - 0.1);
+};
+
+/**
+ * Shows volume level
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.VolumeLevel = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+ }
+});
+
+vjs.VolumeLevel.prototype.createEl = function(){
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-volume-level',
+ innerHTML: 'Mute
'
+ });
+};
+
+vjs.MuteToggle.prototype.onClick = function(){
+ this.player_.muted( this.player_.muted() ? false : true );
+};
+
+vjs.MuteToggle.prototype.update = function(){
+ var vol = this.player_.volume(),
+ level = 3;
+
+ if (vol === 0 || this.player_.muted()) {
+ level = 0;
+ } else if (vol < 0.33) {
+ level = 1;
+ } else if (vol < 0.67) {
+ level = 2;
+ }
+
+ // Don't rewrite the button text if the actual text doesn't change.
+ // This causes unnecessary and confusing information for screen reader users.
+ // This check is needed because this function gets called every time the volume level is changed.
+ if(this.player_.muted()){
+ if(this.el_.children[0].children[0].innerHTML!='Unmute'){
+ this.el_.children[0].children[0].innerHTML = 'Unmute'; // change the button text to "Unmute"
+ }
+ } else {
+ if(this.el_.children[0].children[0].innerHTML!='Mute'){
+ this.el_.children[0].children[0].innerHTML = 'Mute'; // change the button text to "Mute"
+ }
+ }
+
+ /* TODO improve muted icon classes */
+ for (var i = 0; i < 4; i++) {
+ vjs.removeClass(this.el_, 'vjs-vol-'+i);
+ }
+ vjs.addClass(this.el_, 'vjs-vol-'+level);
+};/**
+ * Menu button with a popup for showing the volume slider.
+ * @constructor
+ */
+vjs.VolumeMenuButton = vjs.MenuButton.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.MenuButton.call(this, player, options);
+
+ // Same listeners as MuteToggle
+ player.on('volumechange', vjs.bind(this, this.update));
+
+ // hide mute toggle if the current tech doesn't support volume control
+ if (player.tech && player.tech.features && player.tech.features.volumeControl === false) {
+ this.addClass('vjs-hidden');
+ }
+ player.on('loadstart', vjs.bind(this, function(){
+ if (player.tech.features && player.tech.features.volumeControl === false) {
+ this.addClass('vjs-hidden');
+ } else {
+ this.removeClass('vjs-hidden');
+ }
+ }));
+ this.addClass('vjs-menu-button');
+ }
+});
+
+vjs.VolumeMenuButton.prototype.createMenu = function(){
+ var menu = new vjs.Menu(this.player_, {
+ contentElType: 'div'
+ });
+ var vc = new vjs.VolumeBar(this.player_, vjs.obj.merge({vertical: true}, this.options_.volumeBar));
+ menu.addChild(vc);
+ return menu;
+};
+
+vjs.VolumeMenuButton.prototype.onClick = function(){
+ vjs.MuteToggle.prototype.onClick.call(this);
+ vjs.MenuButton.prototype.onClick.call(this);
+};
+
+vjs.VolumeMenuButton.prototype.createEl = function(){
+ return vjs.Button.prototype.createEl.call(this, 'div', {
+ className: 'vjs-volume-menu-button vjs-menu-button vjs-control',
+ innerHTML: 'Mute
'
+ });
+};
+vjs.VolumeMenuButton.prototype.update = vjs.MuteToggle.prototype.update;
+/* Poster Image
+================================================================================ */
+/**
+ * Poster image. Shows before the video plays.
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.PosterImage = vjs.Button.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Button.call(this, player, options);
+
+ if (!player.poster() || !player.controls()) {
+ this.hide();
+ }
+
+ player.on('play', vjs.bind(this, this.hide));
+ }
+});
+
+vjs.PosterImage.prototype.createEl = function(){
+ var el = vjs.createEl('div', {
+ className: 'vjs-poster',
+
+ // Don't want poster to be tabbable.
+ tabIndex: -1
+ }),
+ poster = this.player_.poster();
+
+ if (poster) {
+ if ('backgroundSize' in el.style) {
+ el.style.backgroundImage = 'url("' + poster + '")';
+ } else {
+ el.appendChild(vjs.createEl('img', { src: poster }));
+ }
+ }
+
+ return el;
+};
+
+vjs.PosterImage.prototype.onClick = function(){
+ this.player_.play();
+};
+/* Loading Spinner
+================================================================================ */
+/**
+ * Loading spinner for waiting events
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.LoadingSpinner = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Component.call(this, player, options);
+
+ player.on('canplay', vjs.bind(this, this.hide));
+ player.on('canplaythrough', vjs.bind(this, this.hide));
+ player.on('playing', vjs.bind(this, this.hide));
+ player.on('seeked', vjs.bind(this, this.hide));
+
+ player.on('seeking', vjs.bind(this, this.show));
+
+ // in some browsers seeking does not trigger the 'playing' event,
+ // so we also need to trap 'seeked' if we are going to set a
+ // 'seeking' event
+ player.on('seeked', vjs.bind(this, this.hide));
+
+ player.on('error', vjs.bind(this, this.show));
+
+ // Not showing spinner on stalled any more. Browsers may stall and then not trigger any events that would remove the spinner.
+ // Checked in Chrome 16 and Safari 5.1.2. http://help.videojs.com/discussions/problems/883-why-is-the-download-progress-showing
+ // player.on('stalled', vjs.bind(this, this.show));
+
+ player.on('waiting', vjs.bind(this, this.show));
+ }
+});
+
+vjs.LoadingSpinner.prototype.createEl = function(){
+ return vjs.Component.prototype.createEl.call(this, 'div', {
+ className: 'vjs-loading-spinner'
+ });
+};
+/* Big Play Button
+================================================================================ */
+/**
+ * Initial play button. Shows before the video has played.
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.BigPlayButton = vjs.Button.extend({
+ /** @constructor */
+ init: function(player, options){
+ vjs.Button.call(this, player, options);
+
+ if (!player.controls()) {
+ this.hide();
+ }
+
+ player.on('play', vjs.bind(this, this.hide));
+ // player.on('ended', vjs.bind(this, this.show));
+ }
+});
+
+vjs.BigPlayButton.prototype.createEl = function(){
+ return vjs.Button.prototype.createEl.call(this, 'div', {
+ className: 'vjs-big-play-button',
+ innerHTML: ' ';
+};
+/**
+ * @constructor
+ */
+vjs.MediaLoader = vjs.Component.extend({
+ /** @constructor */
+ init: function(player, options, ready){
+ vjs.Component.call(this, player, options, ready);
+
+ // If there are no sources when the player is initialized,
+ // load the first supported playback technology.
+ if (!player.options_['sources'] || player.options_['sources'].length === 0) {
+ for (var i=0,j=player.options_['techOrder']; i