From ae1b1a9fc53f2697c9faeebd5c685cf521776fee Mon Sep 17 00:00:00 2001 From: Wanderson Braganca Date: Tue, 24 Jun 2014 11:44:19 -0300 Subject: [PATCH] Initial commit --- .gitattributes | 26 + LICENSE | 27 + README.md | 81 + assets/font/vjs.eot | Bin 0 -> 4804 bytes assets/font/vjs.svg | 28 + assets/font/vjs.ttf | Bin 0 -> 4640 bytes assets/font/vjs.woff | Bin 0 -> 3492 bytes assets/video-js.css | 904 +++ assets/video-js.less | 1098 ++++ assets/video-js.min.css | 5 + assets/video-js.swf | Bin 0 -> 16899 bytes assets/video.js | 8057 +++++++++++++++++++++++++++ assets/video.min.js | 149 + assets/videojs-media-sources.js | 171 + assets/videojs-media-sources.min.js | 1 + assets/videojs.hls.js | 3083 ++++++++++ assets/videojs.hls.min.js | 3 + composer.json | 24 + videojs/VideoJsAsset.php | 64 + videojs/VideoJsWidget.php | 87 + 20 files changed, 13808 insertions(+) create mode 100644 .gitattributes create mode 100644 LICENSE create mode 100644 README.md create mode 100644 assets/font/vjs.eot create mode 100644 assets/font/vjs.svg create mode 100644 assets/font/vjs.ttf create mode 100644 assets/font/vjs.woff create mode 100644 assets/video-js.css create mode 100644 assets/video-js.less create mode 100644 assets/video-js.min.css create mode 100644 assets/video-js.swf create mode 100644 assets/video.js create mode 100644 assets/video.min.js create mode 100644 assets/videojs-media-sources.js create mode 100644 assets/videojs-media-sources.min.js create mode 100644 assets/videojs.hls.js create mode 100644 assets/videojs.hls.min.js create mode 100644 composer.json create mode 100644 videojs/VideoJsAsset.php create mode 100644 videojs/VideoJsWidget.php diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..39a8c57 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,26 @@ +# Autodetect text files +* text=auto + +# ...Unless the name matches the following overriding patterns + +# Definitively text files +*.php text +*.css text +*.js text +*.txt text +*.md text +*.xml text +*.json text +*.bat text +*.sql text +*.xml text +*.yml text + +# Ensure those won't be messed up with +*.png binary +*.jpg binary +*.gif binary +*.ttf binary +*.svg binary +*.eot binary +*.woff binary diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..b5c1623 --- /dev/null +++ b/LICENSE @@ -0,0 +1,27 @@ +Copyright (c) 2014, Wanderson Bragança +All rights reserved. + +Redistribution and use in source and binary forms, with or without modification, +are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, this + list of conditions and the following disclaimer in the documentation and/or + other materials provided with the distribution. + +* Neither the name of the {organization} nor the names of its + contributors may be used to endorse or promote products derived from + this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND +ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED +WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR +ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES +(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; +LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON +ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS +SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..248d46a --- /dev/null +++ b/README.md @@ -0,0 +1,81 @@ +yii2-videojs-widget +===================== +The yii2-videojs-widget is a Yii 2 wrapper for the [video.js](http://www.videojs.com/). A JavaScript and CSS library that makes it easier to work with and build on HTML5 video. This is also known as an HTML5 Video Player. + +Installation +------------ + +The preferred way to install this extension is through [composer](http://getcomposer.org/download/). + +Either run + +``` +php composer.phar require --prefer-dist wbraganca/yii2-videojs-widget "*" +``` + +or add + +``` +"wbraganca/yii2-videojs-widget": "*" +``` + +to the require section of your `composer.json` file. + + +How to use +---------- + +Example 1 - HTML5 + +```php + [ + 'class' => 'video-js vjs-default-skin vjs-big-play-centered', + 'poster' => "http://www.videojs.com/img/poster.jpg", + 'controls' => true, + 'preload' => 'auto', + 'width' => '970', + 'height' => '400', + ], + 'tags' => [ + 'source' => [ + ['src' => 'http://vjs.zencdn.net/v/oceans.mp4', 'type' => 'video/mp4'], + ['src' => 'http://vjs.zencdn.net/v/oceans.webm', 'type' => 'video/webm'] + ], + 'track' => [ + ['kind' => 'captions', 'src' => 'http://vjs.zencdn.net/vtt/captions.vtt', 'srclang' => 'en', 'label' => 'English'] + ] + ] + ]); +?> + +``` + +Example 2 - Real Time Messaging Protocol (RTMP) + +```php + [ + 'class' => 'video-js vjs-default-skin vjs-big-play-centered', + 'controls' => true, + 'preload' => 'auto', + 'width' => '420', + 'height' => '315', + 'data' => [ + 'setup' => [ + 'autoplay' => true, + 'techOrder' =>['flash', 'html5'] + ], + ], + ], + 'tags' => [ + 'source' => [ + ['src' => 'rtmp://cp67126.edgefcs.net/ondemand/&mp4:mediapm/ovp/content/test/video/spacealonehd_sounas_640_300.mp4', 'type' => 'rtmp/mp4'] + ] + ] + ]); +?> + +``` diff --git a/assets/font/vjs.eot b/assets/font/vjs.eot new file mode 100644 index 0000000000000000000000000000000000000000..a2c0f5f24111047aa05a51377821e11312b48912 GIT binary patch literal 4804 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 + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/font/vjs.ttf b/assets/font/vjs.ttf new file mode 100644 index 0000000000000000000000000000000000000000..682a9b21ef23161d9f1ce0087c4385a8b31b3e26 GIT binary patch literal 4640 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 +*/ +.vjs-default-skin { + color: #cccccc; +} +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons. +*/ +@font-face { + font-family: 'VideoJS'; + src: url('font/vjs.eot'); + src: url('font/vjs.eot?#iefix') format('embedded-opentype'), url('font/vjs.woff') format('woff'), url('font/vjs.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +*/ +/* Slider - used for Volume bar and Seek bar */ +.vjs-default-skin .vjs-slider { + /* Replace browser focus hightlight with handle highlight */ + outline: 0; + position: relative; + cursor: pointer; + padding: 0; + /* background-color-with-alpha */ + background-color: #333333; + background-color: rgba(51, 51, 51, 0.9); +} +.vjs-default-skin .vjs-slider:focus { + /* box-shadow */ + -webkit-box-shadow: 0 0 2em #ffffff; + -moz-box-shadow: 0 0 2em #ffffff; + box-shadow: 0 0 2em #ffffff; +} +.vjs-default-skin .vjs-slider-handle { + position: absolute; + /* Needed for IE6 */ + left: 0; + top: 0; +} +.vjs-default-skin .vjs-slider-handle:before { + content: "\e009"; + 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 */ + /* transform */ + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); +} +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.vjs-default-skin .vjs-control-bar { + /* Start hidden */ + display: none; + position: absolute; + /* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ + bottom: 0; + /* Use left/right to stretch to 100% width of player div */ + left: 0; + right: 0; + /* Height includes any margin you want above or below control items */ + height: 3.0em; + /* background-color-with-alpha */ + background-color: #07141e; + background-color: rgba(7, 20, 30, 0.7); +} +/* Show the control bar only once the video has started playing */ +.vjs-default-skin.vjs-has-started .vjs-control-bar { + display: block; + /* Visibility needed to make sure things hide in older browsers too. */ + + visibility: visible; + opacity: 1; + /* transition */ + -webkit-transition: visibility 0.1s, opacity 0.1s; + -moz-transition: visibility 0.1s, opacity 0.1s; + -o-transition: visibility 0.1s, opacity 0.1s; + transition: visibility 0.1s, opacity 0.1s; +} +/* Hide the control bar when the video is playing and the user is inactive */ +.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar { + display: block; + visibility: hidden; + opacity: 0; + /* transition */ + -webkit-transition: visibility 1s, opacity 1s; + -moz-transition: visibility 1s, opacity 1s; + -o-transition: visibility 1s, opacity 1s; + transition: visibility 1s, opacity 1s; +} +.vjs-default-skin.vjs-controls-disabled .vjs-control-bar { + display: none; +} +.vjs-default-skin.vjs-using-native-controls .vjs-control-bar { + display: none; +} +/* The control bar shouldn't show after an error */ +.vjs-default-skin.vjs-error .vjs-control-bar { + display: none; +} +/* IE8 is flakey with fonts, and you have to change the actual content to force +fonts to show/hide properly. + - "\9" IE8 hack didn't work for this + - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9 +*/ +@media \0screen { + .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before { + content: ""; + } +} +/* 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 #ffffff; +} +.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 */ +.vjs-default-skin .vjs-control-text { + /* hide-visually */ + 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"; +} +.vjs-default-skin.vjs-playing .vjs-play-control:before { + content: "\e002"; +} +/* Playback toggle +-------------------------------------------------------------------------------- +*/ +.vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value { + 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); +} +.vjs-default-skin .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content { + width: 4em; + left: -2em; + list-style: none; +} +/* 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"; +} +.vjs-default-skin .vjs-mute-control.vjs-vol-0:before, +.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before { + content: "\e003"; +} +.vjs-default-skin .vjs-mute-control.vjs-vol-1:before, +.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before { + content: "\e004"; +} +.vjs-default-skin .vjs-mute-control.vjs-vol-2:before, +.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before { + content: "\e005"; +} +.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; + /* assuming volume starts at 1.0 */ + + width: 100%; + 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; + /* Assumes volume starts at 1.0. If you change the size of the + handle relative to the volume bar, you'll need to update this value + too. */ + + left: 4.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; +} +/* 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. */ + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 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. */ + + /* transition */ + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; +} +/* Box containing play and load progresses. Also acts as seek scrubber. */ +.vjs-default-skin .vjs-progress-holder { + 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; + /* updated by javascript during playback */ + + width: 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. Surprisingly 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: #646464 /* 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 */; +} +/* Live Mode +-------------------------------------------------------------------------------- +*/ +.vjs-default-skin.vjs-live .vjs-time-controls, +.vjs-default-skin.vjs-live .vjs-time-divider, +.vjs-default-skin.vjs-live .vjs-progress-control { + display: none; +} +.vjs-default-skin.vjs-live .vjs-live-display { + display: block; +} +/* Live Display +-------------------------------------------------------------------------------- +*/ +.vjs-default-skin .vjs-live-display { + display: none; + font-size: 1em; + line-height: 3em; +} +/* 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"; +} +/* Switch to the exit icon when the player is in fullscreen */ +.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before { + content: "\e00b"; +} +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer. http://designer.videojs.com/ +*/ +.vjs-default-skin .vjs-big-play-button { + left: 0.5em; + top: 0.5em; + font-size: 3em; + display: block; + z-index: 2; + position: absolute; + width: 4em; + height: 2.6em; + 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-with-alpha */ + background-color: #07141e; + background-color: rgba(7, 20, 30, 0.7); + border: 0.1em solid #3b4249; + /* border-radius */ + -webkit-border-radius: 0.8em; + -moz-border-radius: 0.8em; + border-radius: 0.8em; + /* box-shadow */ + -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); + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* Optionally center */ +.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -2.1em; + /* Center it vertically */ + top: 50%; + margin-top: -1.4000000000000001em; +} +/* Hide if controls are disabled */ +.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button { + display: none; +} +/* Hide when video starts playing */ +.vjs-default-skin.vjs-has-started .vjs-big-play-button { + display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button { + display: none; +} +.vjs-default-skin:hover .vjs-big-play-button, +.vjs-default-skin .vjs-big-play-button:focus { + outline: 0; + border-color: #fff; + /* IE8 needs a non-glow hover state */ + background-color: #505050; + background-color: rgba(50, 50, 50, 0.75); + /* box-shadow */ + -webkit-box-shadow: 0 0 3em #ffffff; + -moz-box-shadow: 0 0 3em #ffffff; + box-shadow: 0 0 3em #ffffff; + /* transition */ + -webkit-transition: all 0s; + -moz-transition: all 0s; + -o-transition: all 0s; + transition: all 0s; +} +.vjs-default-skin .vjs-big-play-button:before { + content: "\e001"; + font-family: VideoJS; + /* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + + line-height: 2.6em; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} +.vjs-error .vjs-big-play-button { + display: none; +} +/* Error Display +-------------------------------------------------------------------------------- +*/ +.vjs-error-display { + display: none; +} +.vjs-error .vjs-error-display { + display: block; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; +} +.vjs-error .vjs-error-display:before { + content: 'X'; + font-family: Arial; + font-size: 4em; + color: #666666; + /* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + + line-height: 1; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + vertical-align: middle; + position: absolute; + top: 50%; + margin-top: -0.5em; + width: 100%; +} +.vjs-error-display div { + position: absolute; + font-size: 1.4em; + text-align: center; + bottom: 1em; + right: 1em; + left: 1em; +} +.vjs-error-display a, +.vjs-error-display a:visited { + color: #F4A460; +} +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ +.vjs-loading-spinner { + display: none; + position: absolute; + top: 50%; + left: 50%; + font-size: 4em; + line-height: 1; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + opacity: 0.75; + /* animation */ + -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; +} +/* Errors are unrecoverable without user interaction, + so hide the spinner in the case of an error */ +.video-js.vjs-error .vjs-loading-spinner { + /* using !important flag because currently the loading spinner + uses hide()/show() instead of classes. The !important can be + removed when that's updated */ + + display: none !important; + /* ensure animation doesn't continue while hidden */ + + /* animation */ + -webkit-animation: none; + -moz-animation: none; + -o-animation: none; + animation: none; +} +.vjs-default-skin .vjs-loading-spinner:before { + content: "\e01e"; + font-family: VideoJS; + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + text-align: center; + text-shadow: 0em 0em 0.1em #000; +} +@-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); + } +} +@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 #000000; + /* Same width 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-with-alpha */ + background-color: #07141e; + background-color: rgba(7, 20, 30, 0.7); + /* box-shadow */ + -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2); + -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2); + box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2); +} +.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; + 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 { + outline: 0; + color: #111; + /* background-color-with-alpha */ + background-color: #ffffff; + background-color: rgba(255, 255, 255, 0.75); + /* box-shadow */ + -webkit-box-shadow: 0 0 1em #ffffff; + -moz-box-shadow: 0 0 1em #ffffff; + box-shadow: 0 0 1em #ffffff; +} +.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"; +} +/* Captions Button */ +.vjs-default-skin .vjs-captions-button:before { + content: "\e008"; +} +/* 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 { + /* box-shadow */ + -webkit-box-shadow: 0 0 1em #ffffff; + -moz-box-shadow: 0 0 1em #ffffff; + box-shadow: 0 0 1em #ffffff; +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (Flash or HTML5) and controls, +and sets the width and height of the video. + +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.video-js { + background-color: #000; + position: relative; + padding: 0; + /* Start with 10px for base font size so other dimensions can be em based and + easily calculable. */ + + font-size: 10px; + /* Allow poster to be vertially aligned. */ + + vertical-align: middle; + /* display: table-cell; */ + /*This works in Safari but not Firefox.*/ + + /* Provide some basic defaults for fonts */ + + font-weight: normal; + font-style: normal; + /* Avoiding helvetica: issue #376 */ + + font-family: Arial, sans-serif; + /* Turn off user selection (text highlighting) by default. + The majority of player components will not be text blocks. + Text areas will need to turn user selection back on. */ + + /* user-select */ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +/* Playback technology elements expand to the width/height of the containing div +