mirror of
https://github.com/kmoskwiak/videojs-resolution-switcher.git
synced 2025-10-04 02:09:41 +02:00
update
This commit is contained in:
Kasper Moskwiak
parent
f59827fdc4
commit
d186332975
44 changed files with 4089 additions and 19070 deletions
177
index.html
177
index.html
|
|
@ -6,6 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="node_modules/video.js/dist/video-js.min.css" rel="stylesheet">
|
||||
<link href="node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
|
@ -34,38 +35,149 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="info">
|
||||
<p>
|
||||
Set sources dynamically
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid section">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h1>
|
||||
Set sources dynamically
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<pre>
|
||||
videojs('video', {
|
||||
controls: true,
|
||||
plugins: {
|
||||
videoJsResolutionSwitcher: {
|
||||
default: 'low', // Default resolution [{Number}, 'low', 'high'],
|
||||
dynamicLabel: true
|
||||
}
|
||||
}
|
||||
}, function(){
|
||||
var player = this;
|
||||
window.player = player
|
||||
player.updateSrc([
|
||||
{
|
||||
src: 'https://vjs.zencdn.net/v/oceans.mp4?SD',
|
||||
type: 'video/mp4',
|
||||
label: 'SD',
|
||||
res: 360
|
||||
},
|
||||
{
|
||||
src: 'https://vjs.zencdn.net/v/oceans.mp4?HD',
|
||||
type: 'video/mp4',
|
||||
label: 'HD',
|
||||
res: 720
|
||||
}
|
||||
])
|
||||
player.on('resolutionchange', function(){
|
||||
console.info('Source changed to %s', player.src())
|
||||
})
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<video id='video' class="video-js vjs-default-skin"></video>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="info">
|
||||
<p>
|
||||
Set sources inside <code><video></code> tag
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<video id="video_1" class="video-js vjs-default-skin" width="1000" controls fluid='true' data-setup='{}' >
|
||||
<div class="container-fluid section">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h1>
|
||||
Set sources inside <code><video></code> tag
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<pre>
|
||||
<video id="video_1" class="video-js vjs-default-skin" controls data-setup='{}' >
|
||||
<source src="https://vjs.zencdn.net/v/oceans.mp4?sd" type='video/mp4' label='SD' res='480' />
|
||||
<source src="https://vjs.zencdn.net/v/oceans.mp4?hd" type='video/mp4' label='HD' res='1080'/>
|
||||
<source src="https://vjs.zencdn.net/v/oceans.mp4?phone" type='video/mp4' label='phone' res='144'/>
|
||||
<source src="https://vjs.zencdn.net/v/oceans.mp4?4k" type='video/mp4' label='4k' res='2160'/>
|
||||
</video>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<video id="video_1" class="video-js vjs-default-skin" fluid="true" controls data-setup='{}' >
|
||||
<source src="https://vjs.zencdn.net/v/oceans.mp4?sd" type='video/mp4' label='SD' res='480' />
|
||||
<source src="https://vjs.zencdn.net/v/oceans.mp4?hd" type='video/mp4' label='HD' res='1080'/>
|
||||
<source src="https://vjs.zencdn.net/v/oceans.mp4?phone" type='video/mp4' label='phone' res='144'/>
|
||||
<source src="https://vjs.zencdn.net/v/oceans.mp4?4k" type='video/mp4' label='4k' res='2160'/>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid section">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h1>
|
||||
Use flash tech
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<pre>
|
||||
videojs('video', {
|
||||
controls: true,
|
||||
techOrder: ['flash'],
|
||||
preload: 'auto',
|
||||
plugins: {
|
||||
videoJsResolutionSwitcher: {
|
||||
default: 'low', // Default resolution [{Number}, 'low', 'high'],
|
||||
dynamicLabel: true
|
||||
}
|
||||
}
|
||||
}, function(){
|
||||
var player = this;
|
||||
window.player = player
|
||||
player.updateSrc([
|
||||
{
|
||||
src: 'https://vjs.zencdn.net/v/oceans.mp4?SD',
|
||||
type: 'video/mp4',
|
||||
label: 'SD',
|
||||
res: 360
|
||||
},
|
||||
{
|
||||
src: 'https://vjs.zencdn.net/v/oceans.mp4?HD',
|
||||
type: 'video/mp4',
|
||||
label: 'HD',
|
||||
res: 720
|
||||
}
|
||||
])
|
||||
player.on('resolutionchange', function(){
|
||||
console.info('Source changed to %s', player.src())
|
||||
})
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<video id='video_flash' class="video-js vjs-default-skin embed-responsive-item"></video>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<a class='kspr' href="https://kspr.pl">kspr</a>
|
||||
</div>
|
||||
|
||||
<script src="node_modules/video.js/dist/video.js"></script>
|
||||
<script src="node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js"></script>
|
||||
<script>
|
||||
// fire up the plugin
|
||||
videojs('video', {
|
||||
controls: true,
|
||||
muted: true,
|
||||
width: 1000,
|
||||
fluid: true,
|
||||
plugins: {
|
||||
videoJsResolutionSwitcher: {
|
||||
|
|
@ -94,6 +206,41 @@
|
|||
console.info('Source changed to %s', player.src())
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
// flash tech
|
||||
videojs('video_flash', {
|
||||
controls: true,
|
||||
techOrder: ['flash'],
|
||||
preload: 'auto',
|
||||
plugins: {
|
||||
videoJsResolutionSwitcher: {
|
||||
default: 'low', // Default resolution [{Number}, 'low', 'high'],
|
||||
dynamicLabel: true
|
||||
}
|
||||
}
|
||||
}, function(){
|
||||
var player = this;
|
||||
window.player = player
|
||||
player.updateSrc([
|
||||
{
|
||||
src: 'https://vjs.zencdn.net/v/oceans.mp4?SD',
|
||||
type: 'video/mp4',
|
||||
label: 'SD',
|
||||
res: 360
|
||||
},
|
||||
{
|
||||
src: 'https://vjs.zencdn.net/v/oceans.mp4?HD',
|
||||
type: 'video/mp4',
|
||||
label: 'HD',
|
||||
res: 720
|
||||
}
|
||||
])
|
||||
player.on('resolutionchange', function(){
|
||||
console.info('Source changed to %s', player.src())
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
2447
node_modules/video.js/dist/alt/video.novtt.js
generated
vendored
2447
node_modules/video.js/dist/alt/video.novtt.js
generated
vendored
File diff suppressed because it is too large
Load diff
16
node_modules/video.js/dist/alt/video.novtt.min.js
generated
vendored
16
node_modules/video.js/dist/alt/video.novtt.min.js
generated
vendored
File diff suppressed because one or more lines are too long
2
node_modules/video.js/dist/alt/video.novtt.min.js.map
generated
vendored
2
node_modules/video.js/dist/alt/video.novtt.min.js.map
generated
vendored
File diff suppressed because one or more lines are too long
BIN
node_modules/video.js/dist/video-js-5.0.0-rc.72.zip
generated
vendored
BIN
node_modules/video.js/dist/video-js-5.0.0-rc.72.zip
generated
vendored
Binary file not shown.
BIN
node_modules/video.js/dist/video-js-5.0.0.zip
generated
vendored
Normal file
BIN
node_modules/video.js/dist/video-js-5.0.0.zip
generated
vendored
Normal file
Binary file not shown.
604
node_modules/video.js/dist/video-js.css
generated
vendored
604
node_modules/video.js/dist/video-js.css
generated
vendored
|
|
@ -30,11 +30,11 @@
|
|||
.vjs-icon-play-circle:before {
|
||||
content: '\f102'; }
|
||||
|
||||
.vjs-icon-pause, .video-js.vjs-playing .vjs-play-control {
|
||||
.vjs-icon-pause, .video-js .vjs-play-control.vjs-playing {
|
||||
font-family: VideoJS;
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
.vjs-icon-pause:before, .video-js.vjs-playing .vjs-play-control:before {
|
||||
.vjs-icon-pause:before, .video-js .vjs-play-control.vjs-playing:before {
|
||||
content: '\f103'; }
|
||||
|
||||
.vjs-icon-volume-mute, .video-js .vjs-mute-control.vjs-vol-0, .video-js .vjs-volume-menu-button.vjs-vol-0 {
|
||||
|
|
@ -86,11 +86,11 @@
|
|||
.vjs-icon-square:before {
|
||||
content: '\f10a'; }
|
||||
|
||||
.vjs-icon-spinner, .vjs-loading-spinner {
|
||||
.vjs-icon-spinner {
|
||||
font-family: VideoJS;
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
.vjs-icon-spinner:before, .vjs-loading-spinner:before {
|
||||
.vjs-icon-spinner:before {
|
||||
content: '\f10b'; }
|
||||
|
||||
.vjs-icon-subtitles, .video-js .vjs-subtitles-button {
|
||||
|
|
@ -128,11 +128,11 @@
|
|||
.vjs-icon-cog:before {
|
||||
content: '\f110'; }
|
||||
|
||||
.vjs-icon-circle, .video-js .vjs-play-progress, .video-js .vjs-volume-level {
|
||||
.vjs-icon-circle, .video-js .vjs-mouse-display, .video-js .vjs-play-progress, .video-js .vjs-volume-level {
|
||||
font-family: VideoJS;
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
.vjs-icon-circle:before, .video-js .vjs-play-progress:before, .video-js .vjs-volume-level:before {
|
||||
.vjs-icon-circle:before, .video-js .vjs-mouse-display:before, .video-js .vjs-play-progress:before, .video-js .vjs-volume-level:before {
|
||||
content: '\f111'; }
|
||||
|
||||
.vjs-icon-circle-outline {
|
||||
|
|
@ -171,6 +171,7 @@
|
|||
/* Start with 10px for base font size so other dimensions can be em based and
|
||||
easily calculable. */
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
/* Provide some basic defaults for fonts */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
|
@ -192,18 +193,31 @@
|
|||
.video-js *, .video-js *:before, .video-js *:after {
|
||||
box-sizing: inherit; }
|
||||
|
||||
/* List style reset */
|
||||
.video-js ul {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
list-style-position: outside;
|
||||
/* Important to specify each */
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0; }
|
||||
|
||||
/* Fill the width of the containing element and use padding to create the
|
||||
desired aspect ratio. Default to 16x9 unless another ratio is given. */
|
||||
.video-js.vjs-fluid, .video-js.vjs-16-9 {
|
||||
/* Not including a default AR in vjs-fluid because it would override
|
||||
the user set AR injected into the header. */
|
||||
.video-js.vjs-fluid, .video-js.vjs-16-9, .video-js.vjs-4-3 {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 0;
|
||||
height: 0; }
|
||||
|
||||
.video-js.vjs-16-9 {
|
||||
padding-top: 56.25%; }
|
||||
|
||||
.video-js.vjs-4-3 {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 0;
|
||||
padding-top: 75%; }
|
||||
|
||||
.video-js.vjs-fill {
|
||||
|
|
@ -270,7 +284,7 @@ about what's required to play video. */
|
|||
margin: 0px auto; }
|
||||
|
||||
.vjs-no-js a, .vjs-no-js a:visited {
|
||||
color: #F4A460; }
|
||||
color: #66A8CC; }
|
||||
|
||||
.video-js .vjs-big-play-button {
|
||||
font-size: 3em;
|
||||
|
|
@ -285,10 +299,10 @@ about what's required to play video. */
|
|||
padding: 0;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
border: 2px solid #fff;
|
||||
border: 0.06666em solid #fff;
|
||||
/* Need a slightly gray bg so it can be seen on black backgrounds */
|
||||
background-color: #000;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
background-color: #2B333F;
|
||||
background-color: rgba(43, 51, 63, 0.7);
|
||||
-webkit-border-radius: 0.3em;
|
||||
-moz-border-radius: 0.3em;
|
||||
border-radius: 0.3em;
|
||||
|
|
@ -297,39 +311,158 @@ about what's required to play video. */
|
|||
-o-transition: all 0.4s;
|
||||
transition: all 0.4s; }
|
||||
|
||||
.video-js.vjs-big-play-centered .vjs-big-play-button {
|
||||
.vjs-big-play-centered .vjs-big-play-button {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -0.75em;
|
||||
margin-left: -1.5em; }
|
||||
|
||||
.video-js.vjs-controls-disabled .vjs-big-play-button, .video-js.vjs-has-started .vjs-big-play-button, .video-js.vjs-using-native-controls .vjs-big-play-button {
|
||||
display: none; }
|
||||
|
||||
.video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus {
|
||||
outline: 0;
|
||||
border-color: #fff;
|
||||
background-color: #595959;
|
||||
background-color: rgba(89, 89, 89, 0.75);
|
||||
background-color: #73859f;
|
||||
background-color: rgba(115, 133, 159, 0.5);
|
||||
-webkit-transition: all 0s;
|
||||
-moz-transition: all 0s;
|
||||
-o-transition: all 0s;
|
||||
transition: all 0s; }
|
||||
|
||||
.vjs-error .vjs-big-play-button {
|
||||
.vjs-controls-disabled .vjs-big-play-button, .vjs-has-started .vjs-big-play-button, .vjs-using-native-controls .vjs-big-play-button, .vjs-error .vjs-big-play-button {
|
||||
display: none; }
|
||||
|
||||
.video-js button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
transition: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; }
|
||||
|
||||
.vjs-menu-button {
|
||||
cursor: pointer; }
|
||||
|
||||
.vjs-menu .vjs-menu-content {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: auto; }
|
||||
|
||||
/* prevent menus from opening while scrubbing (FF, IE) */
|
||||
.vjs-scrubbing .vjs-menu-button:hover .vjs-menu {
|
||||
display: none; }
|
||||
|
||||
.vjs-menu li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.2em 0;
|
||||
line-height: 1.4em;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
text-transform: lowercase; }
|
||||
|
||||
.vjs-menu li:focus, .vjs-menu li:hover {
|
||||
outline: 0;
|
||||
background-color: #73859f;
|
||||
background-color: rgba(115, 133, 159, 0.5); }
|
||||
|
||||
.vjs-menu li.vjs-selected, .vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:hover {
|
||||
background-color: #fff;
|
||||
color: #2B333F; }
|
||||
|
||||
.vjs-menu 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; }
|
||||
|
||||
.vjs-menu-button-popup .vjs-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 10em;
|
||||
left: -3em;
|
||||
/* (Width of vjs-menu - width of button) / 2 */
|
||||
height: 0em;
|
||||
margin-bottom: 1.5em;
|
||||
border-top-color: rgba(43, 51, 63, 0.7);
|
||||
/* Same as ul background */ }
|
||||
|
||||
/* Button Pop-up Menu */
|
||||
.vjs-menu-button-popup .vjs-menu ul {
|
||||
background-color: #2B333F;
|
||||
background-color: rgba(43, 51, 63, 0.7);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 1.5em;
|
||||
/* Same bottom as vjs-menu border-top */
|
||||
max-height: 15em; }
|
||||
|
||||
.vjs-menu-button-popup:hover .vjs-menu, .vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
|
||||
display: block; }
|
||||
|
||||
.video-js .vjs-menu-button-inline {
|
||||
-webkit-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
overflow: hidden; }
|
||||
|
||||
.video-js .vjs-menu-button-inline:before {
|
||||
width: 2.222222222em; }
|
||||
|
||||
.video-js .vjs-menu-button-inline:hover, .video-js .vjs-menu-button-inline:focus, .video-js .vjs-menu-button-inline.vjs-slider-active, .video-js.vjs-no-flex .vjs-menu-button-inline {
|
||||
width: 12em; }
|
||||
|
||||
.video-js .vjs-menu-button-inline.vjs-slider-active {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none; }
|
||||
|
||||
.vjs-menu-button-inline .vjs-menu {
|
||||
opacity: 0;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
left: 2.2222222em;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
transition: all 0.4s; }
|
||||
|
||||
.vjs-menu-button-inline:hover .vjs-menu, .vjs-menu-button-inline:focus .vjs-menu, .vjs-menu-button-inline.vjs-slider-active .vjs-menu {
|
||||
display: block;
|
||||
opacity: 1; }
|
||||
|
||||
.vjs-no-flex .vjs-menu-button-inline .vjs-menu {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
width: auto; }
|
||||
|
||||
.vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu, .vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu, .vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu {
|
||||
width: auto; }
|
||||
|
||||
.vjs-menu-button-inline .vjs-menu-content {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden; }
|
||||
|
||||
.video-js .vjs-control-bar {
|
||||
display: none;
|
||||
width: 100%;
|
||||
|
|
@ -339,9 +472,9 @@ about what's required to play video. */
|
|||
right: 0;
|
||||
height: 3em;
|
||||
background-color: #2B333F;
|
||||
background-color: rgba(43, 51, 63, 0.5); }
|
||||
background-color: rgba(43, 51, 63, 0.7); }
|
||||
|
||||
.video-js.vjs-has-started .vjs-control-bar {
|
||||
.vjs-has-started .vjs-control-bar {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -353,7 +486,7 @@ about what's required to play video. */
|
|||
-o-transition: visibility 0.1s, opacity 0.1s;
|
||||
transition: visibility 0.1s, opacity 0.1s; }
|
||||
|
||||
.video-js.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
|
||||
.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: visibility 1s, opacity 1s;
|
||||
|
|
@ -361,10 +494,11 @@ about what's required to play video. */
|
|||
-o-transition: visibility 1s, opacity 1s;
|
||||
transition: visibility 1s, opacity 1s; }
|
||||
|
||||
.video-js.video-js.video-js.vjs-controls-disabled .vjs-control-bar, .video-js.video-js.video-js.vjs-using-native-controls .vjs-control-bar, .video-js.video-js.video-js.vjs-error .vjs-control-bar {
|
||||
display: none; }
|
||||
.vjs-controls-disabled .vjs-control-bar, .vjs-using-native-controls .vjs-control-bar, .vjs-error .vjs-control-bar {
|
||||
/* !important is ok in this context. */
|
||||
display: none !important; }
|
||||
|
||||
.video-js.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
|
||||
.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
|
||||
opacity: 1;
|
||||
visibility: visible; }
|
||||
|
||||
|
|
@ -374,11 +508,11 @@ fonts to show/hide properly.
|
|||
- Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
|
||||
*/
|
||||
@media \0screen {
|
||||
.video-js.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
|
||||
.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
|
||||
content: ""; } }
|
||||
|
||||
/* IE 8 + 9 Support */
|
||||
.video-js.vjs-has-started.vjs-no-flex .vjs-control-bar {
|
||||
.vjs-has-started.vjs-no-flex .vjs-control-bar {
|
||||
display: table; }
|
||||
|
||||
.video-js .vjs-control {
|
||||
|
|
@ -449,6 +583,9 @@ fonts to show/hide properly.
|
|||
-ms-flex-align: center;
|
||||
align-items: center; }
|
||||
|
||||
.vjs-live .vjs-progress-control {
|
||||
display: none; }
|
||||
|
||||
/* Box containing play and load progresses. Also acts as seek scrubber. */
|
||||
.video-js .vjs-progress-holder {
|
||||
-webkit-box-flex: auto;
|
||||
|
|
@ -467,7 +604,7 @@ fonts to show/hide properly.
|
|||
font-size: 1.6666666667em; }
|
||||
|
||||
/* Also show the current time tooltip */
|
||||
.video-js .vjs-progress-control:hover .vjs-play-progress:after {
|
||||
.video-js .vjs-progress-control:hover .vjs-mouse-display:after, .video-js .vjs-progress-control:hover .vjs-play-progress:after {
|
||||
display: block;
|
||||
/* If we let the font size grow as much as everything else, the current time tooltip ends up
|
||||
ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled
|
||||
|
|
@ -487,17 +624,18 @@ fonts to show/hide properly.
|
|||
left: 0;
|
||||
top: 0; }
|
||||
|
||||
.video-js .vjs-mouse-display:before {
|
||||
display: none; }
|
||||
|
||||
.video-js .vjs-play-progress {
|
||||
background-color: #fff; }
|
||||
.video-js .vjs-play-progress:before {
|
||||
position: absolute;
|
||||
top: -0.3333333333em;
|
||||
right: -0.5em;
|
||||
font-size: 0.9em;
|
||||
height: 1em;
|
||||
line-height: 1em; }
|
||||
font-size: 0.9em; }
|
||||
|
||||
.video-js .vjs-play-progress:after {
|
||||
.video-js .vjs-mouse-display:after, .video-js .vjs-play-progress:after {
|
||||
/* By default this is hidden and only shown when hovering over the progress control */
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
@ -513,27 +651,64 @@ fonts to show/hide properly.
|
|||
-moz-border-radius: 0.3em;
|
||||
border-radius: 0.3em; }
|
||||
|
||||
.video-js .vjs-play-progress:before, .video-js .vjs-play-progress:after {
|
||||
z-index: 1; }
|
||||
|
||||
.video-js .vjs-load-progress {
|
||||
background: #646464;
|
||||
/* IE8- Fallback */
|
||||
background: rgba(255, 255, 255, 0.2); }
|
||||
/* For IE8 we'll lighten the color */
|
||||
background: ligthen(#73859f, 25%);
|
||||
/* Otherwise we'll rely on stacked opacities */
|
||||
background: rgba(115, 133, 159, 0.5); }
|
||||
|
||||
/* there are child elements of the load progress bar that represent the
|
||||
specific time ranges that have been buffered */
|
||||
.video-js .vjs-load-progress div {
|
||||
background: rgba(89, 89, 89, 0.1); }
|
||||
/* For IE8 we'll lighten the color */
|
||||
background: ligthen(#73859f, 50%);
|
||||
/* Otherwise we'll rely on stacked opacities */
|
||||
background: rgba(115, 133, 159, 0.75); }
|
||||
|
||||
.video-js.vjs-no-flex .vjs-progress-control {
|
||||
width: auto; }
|
||||
|
||||
.video-js .vjs-progress-control .vjs-mouse-display {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
z-index: 1; }
|
||||
|
||||
.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
|
||||
z-index: 0; }
|
||||
|
||||
.video-js .vjs-progress-control:hover .vjs-mouse-display {
|
||||
display: block; }
|
||||
|
||||
.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display, .video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display:after {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: visibility 1s, opacity 1s;
|
||||
-moz-transition: visibility 1s, opacity 1s;
|
||||
-o-transition: visibility 1s, opacity 1s;
|
||||
transition: visibility 1s, opacity 1s; }
|
||||
|
||||
.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display, .video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display:after {
|
||||
display: none; }
|
||||
|
||||
.video-js .vjs-progress-control .vjs-mouse-display:after {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
background-color: rgba(0, 0, 0, 0.8); }
|
||||
|
||||
.video-js .vjs-slider {
|
||||
outline: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin: 0 0.45em 0 0.45em;
|
||||
background-color: #595959;
|
||||
background-color: rgba(89, 89, 89, 0.9); }
|
||||
background-color: #73859f;
|
||||
background-color: rgba(115, 133, 159, 0.5); }
|
||||
|
||||
.video-js .vjs-slider:focus {
|
||||
text-shadow: 0em 0em 1em white;
|
||||
|
|
@ -568,11 +743,11 @@ specific time ranges that have been buffered */
|
|||
.video-js .vjs-volume-bar {
|
||||
margin: 1.35em; }
|
||||
|
||||
.video-js .vjs-volume-bar.vjs-slider-horizontal {
|
||||
.vjs-volume-bar.vjs-slider-horizontal {
|
||||
width: 5em;
|
||||
height: 0.3em; }
|
||||
|
||||
.video-js .vjs-volume-bar.vjs-slider-vertical {
|
||||
.vjs-volume-bar.vjs-slider-vertical {
|
||||
width: 0.3em;
|
||||
height: 5em; }
|
||||
|
||||
|
|
@ -585,23 +760,23 @@ specific time ranges that have been buffered */
|
|||
position: absolute;
|
||||
font-size: 0.9em; }
|
||||
|
||||
.video-js .vjs-slider-vertical .vjs-volume-level {
|
||||
.vjs-slider-vertical .vjs-volume-level {
|
||||
width: 0.3em; }
|
||||
.video-js .vjs-slider-vertical .vjs-volume-level:before {
|
||||
.vjs-slider-vertical .vjs-volume-level:before {
|
||||
top: -0.5em;
|
||||
left: -0.3em; }
|
||||
|
||||
.video-js .vjs-slider-horizontal .vjs-volume-level {
|
||||
.vjs-slider-horizontal .vjs-volume-level {
|
||||
height: 0.3em; }
|
||||
.video-js .vjs-slider-horizontal .vjs-volume-level:before {
|
||||
.vjs-slider-horizontal .vjs-volume-level:before {
|
||||
top: -0.3em;
|
||||
right: -0.5em; }
|
||||
|
||||
/* Assumes volume starts at 1.0. */
|
||||
.video-js .vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
|
||||
.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
|
||||
height: 100%; }
|
||||
|
||||
.video-js .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
|
||||
.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
|
||||
width: 100%; }
|
||||
|
||||
/* The volume menu button is like menu buttons (captions/subtitles) but works
|
||||
|
|
@ -609,146 +784,36 @@ a little differently. It needs to be possible to tab to the volume slider
|
|||
without hitting space bar on the menu button. To do this we're not using
|
||||
display:none to hide the slider menu by default, and instead setting the
|
||||
width and height to zero. */
|
||||
.video-js .vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu {
|
||||
.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top-color: transparent; }
|
||||
|
||||
.video-js .vjs-volume-menu-button.vjs-volume-menu-button-vertical .vjs-menu {
|
||||
.vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
|
||||
left: 0.5em; }
|
||||
|
||||
.video-js .vjs-volume-menu-button-popup.vjs-volume-menu-button-horizontal .vjs-menu {
|
||||
.vjs-menu-button-popup.vjs-volume-menu-button-horizontal .vjs-menu {
|
||||
left: -2em; }
|
||||
|
||||
.video-js .vjs-menu-button.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu .vjs-menu-content {
|
||||
.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu-content {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden; }
|
||||
|
||||
.video-js .vjs-volume-menu-button.vjs-volume-menu-button-vertical:hover .vjs-menu .vjs-menu-content, .video-js .vjs-volume-menu-button.vjs-volume-menu-button-vertical .vjs-menu.vjs-lock-showing .vjs-menu-content {
|
||||
.vjs-volume-menu-button-vertical:hover .vjs-menu-content, .vjs-volume-menu-button-vertical .vjs-lock-showing .vjs-menu-content {
|
||||
height: 8em;
|
||||
width: 2.9em; }
|
||||
|
||||
.video-js .vjs-volume-menu-button.vjs-volume-menu-button-horizontal:hover .vjs-menu .vjs-menu-content, .video-js .vjs-volume-menu-button.vjs-volume-menu-button-horizontal .vjs-menu.vjs-lock-showing .vjs-menu-content {
|
||||
.vjs-volume-menu-button-horizontal:hover .vjs-menu-content, .vjs-volume-menu-button-horizontal .vjs-lock-showing .vjs-menu-content {
|
||||
height: 2.9em;
|
||||
width: 8em; }
|
||||
|
||||
.video-js .vjs-mute-control, .video-js .vjs-volume-control {
|
||||
display: none; }
|
||||
|
||||
.video-js .vjs-menu-button {
|
||||
cursor: pointer; }
|
||||
|
||||
.video-js .vjs-menu .vjs-menu-content {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: auto; }
|
||||
|
||||
/* prevent menus from opening while scrubbing (FF, IE) */
|
||||
.video-js.vjs-scrubbing .vjs-menu-button:hover .vjs-menu {
|
||||
display: none; }
|
||||
|
||||
.video-js .vjs-menu ul li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.2em 0;
|
||||
line-height: 1.4em;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
text-transform: lowercase; }
|
||||
|
||||
.video-js .vjs-menu ul li.vjs-selected {
|
||||
background-color: #000; }
|
||||
|
||||
.video-js .vjs-menu ul li:focus, .video-js .vjs-menu ul li:hover, .video-js .vjs-menu ul li.vjs-selected:focus, .video-js .vjs-menu ul li.vjs-selected:hover {
|
||||
outline: 0;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
background-color: rgba(255, 255, 255, 0.75); }
|
||||
|
||||
.video-js .vjs-menu 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; }
|
||||
|
||||
.video-js .vjs-menu-button-popup .vjs-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -3em;
|
||||
/* (Width of vjs-menu - width of button) / 2 */
|
||||
width: 0em;
|
||||
height: 0em;
|
||||
margin-bottom: 1.5em;
|
||||
border-top-color: rgba(7, 40, 50, 0.5);
|
||||
/* Same as ul background */ }
|
||||
|
||||
/* Button Pop-up Menu */
|
||||
.video-js .vjs-menu-button-popup .vjs-menu-content {
|
||||
background-color: #000;
|
||||
background-color: rgba(0, 0, 0, 0.7); }
|
||||
|
||||
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
|
||||
position: absolute;
|
||||
width: 10em;
|
||||
bottom: 1.5em;
|
||||
/* Same bottom as vjs-menu border-top */
|
||||
max-height: 15em; }
|
||||
|
||||
.video-js .vjs-menu-button.vjs-menu-button-popup:hover .vjs-menu, .video-js .vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
|
||||
display: block; }
|
||||
|
||||
.video-js .vjs-menu-button-inline {
|
||||
-webkit-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
overflow: hidden; }
|
||||
|
||||
.video-js .vjs-menu-button.vjs-menu-button-inline:before {
|
||||
width: 2.222222222em; }
|
||||
|
||||
.video-js .vjs-menu-button-inline .vjs-menu {
|
||||
opacity: 0;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
left: 2.2222222em;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-transition: all 0.2s;
|
||||
-moz-transition: all 0.2s;
|
||||
-o-transition: all 0.2s;
|
||||
transition: all 0.2s; }
|
||||
|
||||
.video-js.vjs-no-flex .vjs-menu-button-inline .vjs-menu {
|
||||
position: relative;
|
||||
width: 0; }
|
||||
|
||||
.video-js.vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu {
|
||||
width: auto; }
|
||||
|
||||
.video-js .vjs-menu-button-inline .vjs-menu .vjs-menu-content {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden; }
|
||||
|
||||
.video-js .vjs-menu-button-inline:hover {
|
||||
width: 10em; }
|
||||
|
||||
.video-js .vjs-menu-button.vjs-menu-button-inline:hover .vjs-menu, .video-js .vjs-menu-button-inline .vjs-menu.vjs-lock-showing {
|
||||
display: block;
|
||||
opacity: 1; }
|
||||
.vjs-volume-menu-button.vjs-menu-button-inline .vjs-menu-content {
|
||||
/* An inline volume should never have a menu background color.
|
||||
This protects it from external changes to background colors. */
|
||||
background-color: transparent !important; }
|
||||
|
||||
.vjs-poster {
|
||||
display: inline-block;
|
||||
|
|
@ -766,6 +831,7 @@ width and height to zero. */
|
|||
left: 0;
|
||||
height: 100%; }
|
||||
|
||||
/* Used for IE8 fallback */
|
||||
.vjs-poster img {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
|
|
@ -775,30 +841,44 @@ width and height to zero. */
|
|||
width: 100%; }
|
||||
|
||||
/* Hide the poster after the video has started playing */
|
||||
.video-js.vjs-has-started .vjs-poster {
|
||||
.vjs-has-started .vjs-poster {
|
||||
display: none; }
|
||||
|
||||
/* Don't hide the poster if we're playing audio */
|
||||
.video-js.vjs-audio.vjs-has-started .vjs-poster {
|
||||
.vjs-audio.vjs-has-started .vjs-poster {
|
||||
display: block; }
|
||||
|
||||
/* Hide the poster when controls are disabled because it's clickable
|
||||
and the native poster can take over */
|
||||
.video-js.vjs-controls-disabled .vjs-poster {
|
||||
.vjs-controls-disabled .vjs-poster {
|
||||
display: none; }
|
||||
|
||||
/* Hide the poster when native controls are used otherwise it covers them */
|
||||
.video-js.vjs-using-native-controls .vjs-poster {
|
||||
display: none; }
|
||||
|
||||
.video-js.vjs-live .vjs-time-control, .video-js.vjs-live .vjs-time-divider, .video-js.vjs-live .vjs-progress-control {
|
||||
.vjs-using-native-controls .vjs-poster {
|
||||
display: none; }
|
||||
|
||||
.video-js .vjs-live-control {
|
||||
display: none;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: flex-start;
|
||||
align-items: flex-start;
|
||||
-webkit-box-flex: auto;
|
||||
-moz-box-flex: auto;
|
||||
-webkit-flex: auto;
|
||||
-ms-flex: auto;
|
||||
flex: auto;
|
||||
font-size: 1em;
|
||||
line-height: 3em; }
|
||||
|
||||
.vjs-no-flex .vjs-live-control {
|
||||
display: table-cell;
|
||||
width: auto;
|
||||
text-align: left; }
|
||||
|
||||
.video-js .vjs-time-control {
|
||||
-webkit-box-flex: none;
|
||||
-moz-box-flex: none;
|
||||
|
|
@ -808,17 +888,23 @@ and the native poster can take over */
|
|||
font-size: 1em;
|
||||
line-height: 3em; }
|
||||
|
||||
/* We need the extra specificity that referencing .vjs-no-flex provides. */
|
||||
.video-js .vjs-current-time, .video-js.vjs-no-flex .vjs-current-time {
|
||||
.vjs-live .vjs-time-control {
|
||||
display: none; }
|
||||
|
||||
.video-js .vjs-duration, .video-js.vjs-no-flex .vjs-duration {
|
||||
/* We need the extra specificity that referencing .vjs-no-flex provides. */
|
||||
.video-js .vjs-current-time, .vjs-no-flex .vjs-current-time {
|
||||
display: none; }
|
||||
|
||||
.video-js .vjs-duration, .vjs-no-flex .vjs-duration {
|
||||
display: none; }
|
||||
|
||||
.vjs-time-divider {
|
||||
display: none;
|
||||
line-height: 3em; }
|
||||
|
||||
.vjs-live .vjs-time-divider {
|
||||
display: none; }
|
||||
|
||||
.video-js .vjs-play-control {
|
||||
cursor: pointer;
|
||||
-webkit-box-flex: none;
|
||||
|
|
@ -827,7 +913,7 @@ and the native poster can take over */
|
|||
-ms-flex: none;
|
||||
flex: none; }
|
||||
|
||||
.video-js .vjs-text-track-display {
|
||||
.vjs-text-track-display {
|
||||
position: absolute;
|
||||
bottom: 3em;
|
||||
left: 0;
|
||||
|
|
@ -848,11 +934,11 @@ and the native poster can take over */
|
|||
background-color: #000;
|
||||
background-color: rgba(0, 0, 0, 0.5); }
|
||||
|
||||
.video-js .vjs-subtitles {
|
||||
.vjs-subtitles {
|
||||
color: #fff;
|
||||
/* Subtitles are white */ }
|
||||
|
||||
.video-js .vjs-captions {
|
||||
.vjs-captions {
|
||||
color: #fc6;
|
||||
/* Captions are yellow */ }
|
||||
|
||||
|
|
@ -869,7 +955,7 @@ and the native poster can take over */
|
|||
flex: none; }
|
||||
|
||||
/* Switch to the exit icon when the player is in fullscreen */
|
||||
.video-js .vjs-playback-rate .vjs-playback-rate-value {
|
||||
.vjs-playback-rate .vjs-playback-rate-value {
|
||||
font-size: 1.5em;
|
||||
line-height: 2;
|
||||
position: absolute;
|
||||
|
|
@ -879,13 +965,9 @@ and the native poster can take over */
|
|||
height: 100%;
|
||||
text-align: center; }
|
||||
|
||||
.video-js .vjs-playback-rate .vjs-menu {
|
||||
left: 0em; }
|
||||
|
||||
.video-js .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content {
|
||||
.vjs-playback-rate .vjs-menu {
|
||||
width: 4em;
|
||||
left: 0;
|
||||
list-style: none; }
|
||||
left: 0em; }
|
||||
|
||||
.vjs-error-display {
|
||||
display: none; }
|
||||
|
|
@ -902,7 +984,7 @@ and the native poster can take over */
|
|||
content: 'X';
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 4em;
|
||||
color: #595959;
|
||||
color: #fff;
|
||||
/* 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;
|
||||
|
|
@ -928,82 +1010,101 @@ and the native poster can take over */
|
|||
background-color: rgba(0, 0, 0, 0.5); }
|
||||
|
||||
.vjs-error-display a, .vjs-error-display a:visited {
|
||||
color: #F4A460; }
|
||||
color: #66A8CC; }
|
||||
|
||||
.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; }
|
||||
margin: -25px 0 0 -25px;
|
||||
opacity: 0.85;
|
||||
/* Need to fix centered page layouts */
|
||||
text-align: left;
|
||||
border: 6px solid rgba(43, 51, 63, 0.7);
|
||||
box-sizing: border-box;
|
||||
background-clip: padding-box;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 25px; }
|
||||
|
||||
/* Show the spinner when waiting for data and seeking to a new time */
|
||||
.vjs-waiting .vjs-loading-spinner, .vjs-seeking .vjs-loading-spinner {
|
||||
display: block;
|
||||
/* only animate when showing because it can be processor heavy */
|
||||
-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-seeking .vjs-loading-spinner, .vjs-waiting .vjs-loading-spinner {
|
||||
display: block; }
|
||||
|
||||
/* Errors are unrecoverable without user interaction so hide the spinner */
|
||||
.vjs-error .vjs-loading-spinner {
|
||||
display: none;
|
||||
/* ensure animation doesn't continue while hidden */
|
||||
-webkit-animation: none;
|
||||
-moz-animation: none;
|
||||
-o-animation: none;
|
||||
animation: none; }
|
||||
|
||||
.video-js .vjs-loading-spinner:before {
|
||||
.vjs-loading-spinner:before, .vjs-loading-spinner:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
text-shadow: 0em 0em 0.1em #000; }
|
||||
margin: -6px;
|
||||
box-sizing: inherit;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: inherit;
|
||||
/* Keep 100% opacity so they don't show through each other */
|
||||
opacity: 1;
|
||||
border: inherit;
|
||||
border-color: transparent;
|
||||
border-top-color: white; }
|
||||
|
||||
@-moz-keyframes spin {
|
||||
/* only animate when showing because it can be processor heavy */
|
||||
.vjs-seeking .vjs-loading-spinner:before, .vjs-seeking .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:before, .vjs-waiting .vjs-loading-spinner:after {
|
||||
-webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
|
||||
animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite; }
|
||||
|
||||
.vjs-seeking .vjs-loading-spinner:before, .vjs-waiting .vjs-loading-spinner:before {
|
||||
border-top-color: white; }
|
||||
|
||||
.vjs-seeking .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:after {
|
||||
border-top-color: white;
|
||||
-webkit-animation-delay: 0.44s;
|
||||
animation-delay: 0.44s; }
|
||||
|
||||
@keyframes vjs-spinner-spin {
|
||||
100% {
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
@-webkit-keyframes vjs-spinner-spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg); } }
|
||||
|
||||
@keyframes vjs-spinner-fade {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg); }
|
||||
border-top-color: #73859f; }
|
||||
|
||||
20% {
|
||||
border-top-color: #73859f; }
|
||||
|
||||
35% {
|
||||
border-top-color: white; }
|
||||
|
||||
60% {
|
||||
border-top-color: #73859f; }
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg); } }
|
||||
border-top-color: #73859f; } }
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
@-webkit-keyframes vjs-spinner-fade {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg); }
|
||||
border-top-color: #73859f; }
|
||||
|
||||
20% {
|
||||
border-top-color: #73859f; }
|
||||
|
||||
35% {
|
||||
border-top-color: white; }
|
||||
|
||||
60% {
|
||||
border-top-color: #73859f; }
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(359deg); } }
|
||||
border-top-color: #73859f; } }
|
||||
|
||||
@-o-keyframes spin {
|
||||
0% {
|
||||
-o-transform: rotate(0deg); }
|
||||
.vjs-chapters-button .vjs-menu {
|
||||
left: -10em;
|
||||
/* (Width of vjs-menu - width of vjs-control) / 2 */
|
||||
width: 0; }
|
||||
|
||||
100% {
|
||||
-o-transform: rotate(359deg); } }
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg); }
|
||||
|
||||
100% {
|
||||
transform: rotate(359deg); } }
|
||||
|
||||
.video-js .vjs-chapters-button.vjs-menu-button .vjs-menu {
|
||||
left: 2em; }
|
||||
|
||||
.video-js .vjs-chapters-button.vjs-menu-button .vjs-menu .vjs-menu-content {
|
||||
width: 24em;
|
||||
left: -12em; }
|
||||
.vjs-chapters-button .vjs-menu ul {
|
||||
width: 24em; }
|
||||
|
||||
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-custom-control-spacer {
|
||||
-webkit-box-flex: auto;
|
||||
|
|
@ -1025,13 +1126,12 @@ and the native poster can take over */
|
|||
.vjs-caption-settings {
|
||||
position: relative;
|
||||
top: 1em;
|
||||
background-color: #000;
|
||||
opacity: 0.75;
|
||||
background-color: #2B333F;
|
||||
background-color: rgba(43, 51, 63, 0.75);
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
padding: 0.5em;
|
||||
height: 15em;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
width: 40em; }
|
||||
|
||||
|
|
|
|||
2
node_modules/video.js/dist/video-js.min.css
generated
vendored
2
node_modules/video.js/dist/video-js.min.css
generated
vendored
File diff suppressed because one or more lines are too long
2447
node_modules/video.js/dist/video.js
generated
vendored
2447
node_modules/video.js/dist/video.js
generated
vendored
File diff suppressed because it is too large
Load diff
96
node_modules/video.js/dist/video.js.map
generated
vendored
96
node_modules/video.js/dist/video.js.map
generated
vendored
File diff suppressed because one or more lines are too long
16
node_modules/video.js/dist/video.min.js
generated
vendored
16
node_modules/video.js/dist/video.min.js
generated
vendored
File diff suppressed because one or more lines are too long
2
node_modules/video.js/dist/video.min.js.map
generated
vendored
2
node_modules/video.js/dist/video.min.js.map
generated
vendored
File diff suppressed because one or more lines are too long
16909
node_modules/video.js/dist/video.novtt.js
generated
vendored
16909
node_modules/video.js/dist/video.novtt.js
generated
vendored
File diff suppressed because one or more lines are too long
1
node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.css
generated
vendored
1
node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.css
generated
vendored
|
|
@ -23,7 +23,6 @@
|
|||
|
||||
.vjs-resolution-button ul.vjs-menu-content {
|
||||
width: 4em !important;
|
||||
right: -7em !important;
|
||||
}
|
||||
|
||||
.vjs-resolution-button .vjs-menu {
|
||||
|
|
|
|||
258
node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js
generated
vendored
258
node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js
generated
vendored
|
|
@ -1,12 +1,115 @@
|
|||
/*! videojs-resolution-switcher - v0.0.0 - 2015-7-26
|
||||
* Copyright (c) 2015 Kasper Moskwiak
|
||||
* Modified by Pierre Kraft
|
||||
* Licensed under the Apache-2.0 license. */
|
||||
(function(window, videojs) {
|
||||
/* jshint eqnull: true*/
|
||||
'use strict';
|
||||
|
||||
var defaults = {},
|
||||
videoJsResolutionSwitcher,
|
||||
groupedSrc;
|
||||
videoJsResolutionSwitcher;
|
||||
|
||||
function setSourcesSanitized(player, sources) {
|
||||
return player.src(sources.map(function(src) {
|
||||
return {src: src.src, type: src.type, res: src.res};
|
||||
}));
|
||||
}
|
||||
|
||||
/*
|
||||
* Resolution menu item
|
||||
*/
|
||||
var MenuItem = videojs.getComponent('MenuItem');
|
||||
var ResolutionMenuItem = videojs.extend(MenuItem, {
|
||||
constructor: function(player, options, onClickListener, label){
|
||||
this.onClickListener = onClickListener;
|
||||
this.label = label;
|
||||
// Sets this.player_, this.options_ and initializes the component
|
||||
MenuItem.call(this, player, options);
|
||||
this.src = options.src;
|
||||
|
||||
this.on('click', this.onClick);
|
||||
this.on('touchstart', this.onClick);
|
||||
|
||||
if (options.initialySelected) {
|
||||
this.showAsLabel();
|
||||
this.selected(true);
|
||||
}
|
||||
},
|
||||
showAsLabel: function() {
|
||||
// Change menu button label to the label of this item if the menu button label is provided
|
||||
if(this.label) {
|
||||
this.label.innerHTML = this.options_.label;
|
||||
}
|
||||
},
|
||||
onClick: function(){
|
||||
this.onClickListener(this);
|
||||
// Hide bigPlayButton
|
||||
this.player_.bigPlayButton.hide();
|
||||
// Remember player state
|
||||
var currentTime = this.player_.currentTime();
|
||||
var isPaused = this.player_.paused();
|
||||
this.showAsLabel();
|
||||
// Change player source and wait for loadeddata event, then play video
|
||||
// loadedmetadata doesn't work right now for flash.
|
||||
// Probably because of https://github.com/videojs/video-js-swf/issues/124
|
||||
setSourcesSanitized(this.player_, this.src).one('loadeddata', function() {
|
||||
this.player_.currentTime(currentTime);
|
||||
if(!isPaused){
|
||||
// Start playing and hide loadingSpinner (flash issue ?)
|
||||
this.player_.play().handleTechSeeked_();
|
||||
}
|
||||
this.player_.trigger('resolutionchange');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
* Resolution menu button
|
||||
*/
|
||||
var MenuButton = videojs.getComponent('MenuButton');
|
||||
var ResolutionMenuButton = videojs.extend(MenuButton, {
|
||||
constructor: function(player, options, settings, label){
|
||||
this.sources = options.sources;
|
||||
this.label = label;
|
||||
this.label.innerHTML = options.initialySelectedLabel;
|
||||
// Sets this.player_, this.options_ and initializes the component
|
||||
MenuButton.call(this, player, options);
|
||||
this.controlText('Quality');
|
||||
|
||||
if(settings.dynamicLabel){
|
||||
this.el().appendChild(label);
|
||||
}else{
|
||||
var staticLabel = document.createElement('span');
|
||||
staticLabel.classList.add('vjs-resolution-button-staticlabel');
|
||||
this.el().appendChild(staticLabel);
|
||||
}
|
||||
},
|
||||
createItems: function(){
|
||||
var menuItems = [];
|
||||
var labels = (this.sources && this.sources.label) || {};
|
||||
var onClickUnselectOthers = function(clickedItem) {
|
||||
menuItems.map(function(item) {
|
||||
item.selected(item === clickedItem);
|
||||
});
|
||||
};
|
||||
|
||||
for (var key in labels) {
|
||||
if (labels.hasOwnProperty(key)) {
|
||||
menuItems.push(new ResolutionMenuItem(
|
||||
this.player_,
|
||||
{
|
||||
label: key,
|
||||
src: labels[key],
|
||||
initialySelected: key === this.options_.initialySelectedLabel
|
||||
},
|
||||
onClickUnselectOthers,
|
||||
this.label));
|
||||
}
|
||||
}
|
||||
return menuItems;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Initialize the plugin.
|
||||
|
|
@ -17,91 +120,25 @@
|
|||
player = this,
|
||||
label = document.createElement('span');
|
||||
|
||||
label.classList.add('vjs-resolution-button-label')
|
||||
|
||||
/*
|
||||
* Resolution menu item
|
||||
*/
|
||||
var MenuItem = videojs.getComponent('MenuItem')
|
||||
var ResolutionMenuItem = videojs.extends(MenuItem, {
|
||||
constructor: function(player, options){
|
||||
|
||||
MenuItem.call(this, player, options);
|
||||
this.src = options.src;
|
||||
this.type = options.type;
|
||||
|
||||
this.on('click', this.onClick)
|
||||
this.on('touchstart', this.onClick)
|
||||
},
|
||||
onClick: function(){
|
||||
// Hide bigPlayButton
|
||||
player.bigPlayButton.hide()
|
||||
// Remember player state
|
||||
var currentTime = player.currentTime()
|
||||
var isPaused = player.paused()
|
||||
// Change menu button label
|
||||
label.innerHTML = this.options_.label;
|
||||
// Change player source and wait for loadedmetadata event, then play video
|
||||
player.src({src: this.src, type: this.type}).one( 'loadedmetadata', function() {
|
||||
player.currentTime(currentTime)
|
||||
if(!isPaused){ player.play() }
|
||||
player.trigger('resolutionchange')
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
/*
|
||||
* Resolution menu button
|
||||
*/
|
||||
var MenuButton = videojs.getComponent('MenuButton')
|
||||
var ResolutionMenuButton = videojs.extends(MenuButton, {
|
||||
constructor: function(player, options){
|
||||
this.sources = options.sources;
|
||||
MenuButton.call(this, player, options);
|
||||
this.controlText('Quality');
|
||||
|
||||
if(settings.dynamicLabel){
|
||||
this.el().appendChild(label)
|
||||
}else{
|
||||
var staticLabel = document.createElement('span')
|
||||
staticLabel.classList.add('vjs-resolution-button-staticlabel')
|
||||
this.el().appendChild(staticLabel)
|
||||
}
|
||||
},
|
||||
createItems: function(){
|
||||
var sources = this.sources;
|
||||
var menuItems = [];
|
||||
for(var i = 0; i < sources.length; i++){
|
||||
menuItems.push(new ResolutionMenuItem(player, {
|
||||
label: sources[i].label,
|
||||
src: sources[i].src,
|
||||
type: sources[i].type
|
||||
}))
|
||||
}
|
||||
return menuItems;
|
||||
}
|
||||
})
|
||||
|
||||
label.classList.add('vjs-resolution-button-label');
|
||||
|
||||
player.updateSrc = function(src){
|
||||
//Return current src if src is not given
|
||||
if(!src){ return player.src() }
|
||||
if(!src){ return player.src(); }
|
||||
// Dispose old resolution menu button before adding new sources
|
||||
if(player.controlBar.resolutionSwitcher){
|
||||
player.controlBar.resolutionSwitcher.dispose()
|
||||
delete player.controlBar.resolutionSwitcher
|
||||
player.controlBar.resolutionSwitcher.dispose();
|
||||
delete player.controlBar.resolutionSwitcher;
|
||||
}
|
||||
//Sort sources
|
||||
src = src.sort(compareResolutions)
|
||||
groupedSrc = bucketSources(src)
|
||||
var menuButton = new ResolutionMenuButton(player, { sources: src });
|
||||
menuButton.el().classList.add('vjs-resolution-button')
|
||||
player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton)
|
||||
var newSource = chooseSrc(src)
|
||||
label.innerHTML = newSource.label
|
||||
player.src(newSource);
|
||||
}
|
||||
src = src.sort(compareResolutions);
|
||||
var groupedSrc = bucketSources(src);
|
||||
var choosen = chooseSrc(groupedSrc, src);
|
||||
var menuButton = new ResolutionMenuButton(player, { sources: groupedSrc, initialySelectedLabel: choosen.label , initialySelectedRes: choosen.res}, settings, label);
|
||||
menuButton.el().classList.add('vjs-resolution-button');
|
||||
player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton);
|
||||
return setSourcesSanitized(player, choosen.sources);
|
||||
};
|
||||
|
||||
/**
|
||||
* Method used for sorting list of sources
|
||||
|
|
@ -110,47 +147,72 @@
|
|||
* @returns {Number} result of comparation
|
||||
*/
|
||||
function compareResolutions(a, b){
|
||||
if(!a.res || !b.res) return 0;
|
||||
if(!a.res || !b.res){ return 0; }
|
||||
return (+b.res)-(+a.res);
|
||||
}
|
||||
|
||||
/**
|
||||
* Group sources by label, resolution and type
|
||||
* @param {Array} src Array of sources
|
||||
* @returns {Object} grouped sources: { label: {}, res: {}, type: {} }
|
||||
* @returns {Object} grouped sources: { label: { key: [] }, res: { key: [] }, type: { key: [] } }
|
||||
*/
|
||||
function bucketSources(src){
|
||||
var resolutions = {
|
||||
label: {},
|
||||
res: {},
|
||||
type: {}
|
||||
};
|
||||
src.map(function(source) {
|
||||
initResolutionKey(resolutions, 'label', source);
|
||||
initResolutionKey(resolutions, 'res', source);
|
||||
initResolutionKey(resolutions, 'type', source);
|
||||
|
||||
appendSourceToKey(resolutions, 'label', source);
|
||||
appendSourceToKey(resolutions, 'res', source);
|
||||
appendSourceToKey(resolutions, 'type', source);
|
||||
});
|
||||
return resolutions;
|
||||
}
|
||||
for(var i = 0; i<src.length; i++){
|
||||
resolutions.label[src[i].label] = resolutions.label[src[i].label] || []
|
||||
resolutions.res[src[i].res] = resolutions.res[src[i].res] || []
|
||||
resolutions.type[src[i].type] = resolutions.type[src[i].type] || []
|
||||
resolutions.label[src[i].label].push(src[i])
|
||||
resolutions.res[src[i].res].push(src[i])
|
||||
resolutions.type[src[i].type].push(src[i])
|
||||
|
||||
function initResolutionKey(resolutions, key, source) {
|
||||
if(resolutions[key][source[key]] == null) {
|
||||
resolutions[key][source[key]] = [];
|
||||
}
|
||||
return resolutions
|
||||
}
|
||||
|
||||
function appendSourceToKey(resolutions, key, source) {
|
||||
resolutions[key][source[key]].push(source);
|
||||
}
|
||||
|
||||
/**
|
||||
* Choose src if option.default is specified
|
||||
* @param {Array} src Array of sources
|
||||
* @returns {Object} source object
|
||||
* @param {Object} groupedSrc {res: { key: [] }}
|
||||
* @param {Array} src Array of sources sorted by resolution used to find high and low res
|
||||
* @returns {Object} {res: string, sources: []}
|
||||
*/
|
||||
function chooseSrc(src){
|
||||
if(settings.default === 'low'){ return src[src.length - 1] }
|
||||
if(settings.default === 'high'){ return src[0] }
|
||||
if(groupedSrc.res[settings.default]){ return groupedSrc.res[settings.default][0] }
|
||||
return src[src.length - 1]
|
||||
function chooseSrc(groupedSrc, src){
|
||||
var selectedRes = settings.default;
|
||||
var selectedLabel = '';
|
||||
if (selectedRes === 'high') {
|
||||
selectedRes = src[0].res;
|
||||
selectedLabel = src[0].label;
|
||||
} else if (selectedRes === 'low' || selectedRes == null) {
|
||||
// Select low-res if default is low or not set
|
||||
selectedRes = src[src.length - 1].res;
|
||||
selectedLabel = src[src.length -1].label;
|
||||
} else if (groupedSrc.res[selectedRes]) {
|
||||
selectedLabel = groupedSrc.res[selectedRes][0].label;
|
||||
}
|
||||
|
||||
if(selectedRes === undefined){
|
||||
return {res: selectedRes, label: selectedLabel, sources: groupedSrc.label[selectedLabel]};
|
||||
}
|
||||
return {res: selectedRes, label: selectedLabel, sources: groupedSrc.res[selectedRes]};
|
||||
}
|
||||
|
||||
// Create resolution switcher for videos form <source> tag inside <video>
|
||||
if(player.options_.sources.length > 1){
|
||||
player.updateSrc(player.options_.sources)
|
||||
player.updateSrc(player.options_.sources);
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
},
|
||||
"homepage": "https://github.com/kmoskwiak/videojs-resolution-switcher#readme",
|
||||
"dependencies": {
|
||||
"video.js": "^5.0.0",
|
||||
"videojs-resolution-switcher": "git+https://github.com/kmoskwiak/videojs-resolution-switcher.git"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
51
style.css
51
style.css
|
|
@ -5,33 +5,66 @@ body {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
a {
|
||||
color: aliceblue;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: aliceblue;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #00aad3;
|
||||
background: #0082d3;
|
||||
padding: 50px 50px 0px 50px;
|
||||
color: #fff;
|
||||
box-shadow: 0 0 20px -5px #000;
|
||||
}
|
||||
|
||||
.example {
|
||||
margin: 50px 0;
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #007f90
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.social {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.section {
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 50px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: #fff;
|
||||
padding: 20px 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.kspr {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
line-height: 50px;
|
||||
background: #0082d3;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
|
||||
font-family: monospace;
|
||||
box-shadow: 2px 2px 10px -5px #000;
|
||||
}
|
||||
|
||||
.kspr:hover {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue