yetangitu/videojs-resolution-switcher
1
0
Fork 0
mirror of https://github.com/kmoskwiak/videojs-resolution-switcher.git synced 2025-10-04 02:09:41 +02:00
Code Issues Releases Wiki Activity

update

Browse source
This commit is contained in:
Kasper Moskwiak 2015-10-18 23:07:55 +02:00
parent f59827fdc4
commit d186332975
44 changed files with 4089 additions and 19070 deletions
Download patch file Download diff file Expand all files Collapse all files

187
index.html
View file

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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/video.js/dist/video-js.min.css" rel="stylesheet">
<link href="node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.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"> <link href="style.css" rel="stylesheet">
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@ -34,38 +35,149 @@
</div> </div>
</div> </div>
<div class="example">
<div class="info"> <div class="container-fluid section">
<p> <div class="row">
Set sources dynamically <div class="col-md-12">
</p> <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> </div>
<video id='video' class="video-js vjs-default-skin"></video>
</div> </div>
<div class="example"> <div class="container-fluid section">
<div class="info"> <div class="row">
<p> <div class="col-md-12">
Set sources inside <code>&ltvideo&gt</code> tag <h1>
</p> Set sources inside <code>&ltvideo&gt</code> tag
</h1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<pre>
&lt;video id=&quot;video_1&quot; class=&quot;video-js vjs-default-skin&quot; controls data-setup='{}' &gt;
&lt;source src=&quot;https://vjs.zencdn.net/v/oceans.mp4?sd&quot; type='video/mp4' label='SD' res='480' /&gt;
&lt;source src=&quot;https://vjs.zencdn.net/v/oceans.mp4?hd&quot; type='video/mp4' label='HD' res='1080'/&gt;
&lt;source src=&quot;https://vjs.zencdn.net/v/oceans.mp4?phone&quot; type='video/mp4' label='phone' res='144'/&gt;
&lt;source src=&quot;https://vjs.zencdn.net/v/oceans.mp4?4k&quot; type='video/mp4' label='4k' res='2160'/&gt;
&lt;/video&gt;
</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>
<video id="video_1" class="video-js vjs-default-skin" width="1000" controls fluid='true' data-setup='{}' > <div class="container-fluid section">
<source src="https://vjs.zencdn.net/v/oceans.mp4?sd" type='video/mp4' label='SD' res='480' /> <div class="row">
<source src="https://vjs.zencdn.net/v/oceans.mp4?hd" type='video/mp4' label='HD' res='1080'/> <div class="col-md-12">
<source src="https://vjs.zencdn.net/v/oceans.mp4?phone" type='video/mp4' label='phone' res='144'/> <h1>
<source src="https://vjs.zencdn.net/v/oceans.mp4?4k" type='video/mp4' label='4k' res='2160'/> Use flash tech
</video> </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>
<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/video.js/dist/video.js"></script>
<script src="node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js"></script> <script src="node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js"></script>
<script> <script>
// fire up the plugin // fire up the plugin
videojs('video', { videojs('video', {
controls: true, controls: true,
muted: true,
width: 1000,
fluid: true, fluid: true,
plugins: { plugins: {
videoJsResolutionSwitcher: { videoJsResolutionSwitcher: {
@ -94,6 +206,41 @@
console.info('Source changed to %s', player.src()) 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> </script>

2457
node_modules/video.js/dist/alt/video.novtt.js generated vendored
View file

File diff suppressed because it is too large Load diff

16
node_modules/video.js/dist/alt/video.novtt.min.js generated vendored
View file

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
View file

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
View file

Binary file not shown.

BIN
node_modules/video.js/dist/video-js-5.0.0.zip generated vendored Normal file
View file

Binary file not shown.

604
node_modules/video.js/dist/video-js.css generated vendored
View file

@ -30,11 +30,11 @@
.vjs-icon-play-circle:before { .vjs-icon-play-circle:before {
content: '\f102'; } 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-family: VideoJS;
font-weight: normal; font-weight: normal;
font-style: 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'; } content: '\f103'; }
.vjs-icon-volume-mute, .video-js .vjs-mute-control.vjs-vol-0, .video-js .vjs-volume-menu-button.vjs-vol-0 { .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 { .vjs-icon-square:before {
content: '\f10a'; } content: '\f10a'; }
.vjs-icon-spinner, .vjs-loading-spinner { .vjs-icon-spinner {
font-family: VideoJS; font-family: VideoJS;
font-weight: normal; font-weight: normal;
font-style: normal; } font-style: normal; }
.vjs-icon-spinner:before, .vjs-loading-spinner:before { .vjs-icon-spinner:before {
content: '\f10b'; } content: '\f10b'; }
.vjs-icon-subtitles, .video-js .vjs-subtitles-button { .vjs-icon-subtitles, .video-js .vjs-subtitles-button {
@ -128,11 +128,11 @@
.vjs-icon-cog:before { .vjs-icon-cog:before {
content: '\f110'; } 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-family: VideoJS;
font-weight: normal; font-weight: normal;
font-style: 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'; } content: '\f111'; }
.vjs-icon-circle-outline { .vjs-icon-circle-outline {
@ -171,6 +171,7 @@
/* Start with 10px for base font size so other dimensions can be em based and /* Start with 10px for base font size so other dimensions can be em based and
easily calculable. */ easily calculable. */
font-size: 10px; font-size: 10px;
line-height: 1;
/* Provide some basic defaults for fonts */ /* Provide some basic defaults for fonts */
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -192,18 +193,31 @@
.video-js *, .video-js *:before, .video-js *:after { .video-js *, .video-js *:before, .video-js *:after {
box-sizing: inherit; } 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 /* Fill the width of the containing element and use padding to create the
desired aspect ratio. Default to 16x9 unless another ratio is given. */ 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%; width: 100%;
max-width: 100%; max-width: 100%;
height: 0; height: 0; }
.video-js.vjs-16-9 {
padding-top: 56.25%; } padding-top: 56.25%; }
.video-js.vjs-4-3 { .video-js.vjs-4-3 {
width: 100%;
max-width: 100%;
height: 0;
padding-top: 75%; } padding-top: 75%; }
.video-js.vjs-fill { .video-js.vjs-fill {
@ -270,7 +284,7 @@ about what's required to play video. */
margin: 0px auto; } margin: 0px auto; }
.vjs-no-js a, .vjs-no-js a:visited { .vjs-no-js a, .vjs-no-js a:visited {
color: #F4A460; } color: #66A8CC; }
.video-js .vjs-big-play-button { .video-js .vjs-big-play-button {
font-size: 3em; font-size: 3em;
@ -285,10 +299,10 @@ about what's required to play video. */
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
border: 2px solid #fff; border: 0.06666em solid #fff;
/* Need a slightly gray bg so it can be seen on black backgrounds */ /* Need a slightly gray bg so it can be seen on black backgrounds */
background-color: #000; background-color: #2B333F;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(43, 51, 63, 0.7);
-webkit-border-radius: 0.3em; -webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em; -moz-border-radius: 0.3em;
border-radius: 0.3em; border-radius: 0.3em;
@ -297,39 +311,158 @@ about what's required to play video. */
-o-transition: all 0.4s; -o-transition: all 0.4s;
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%; top: 50%;
left: 50%; left: 50%;
margin-top: -0.75em; margin-top: -0.75em;
margin-left: -1.5em; } 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 { .video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus {
outline: 0; outline: 0;
border-color: #fff; border-color: #fff;
background-color: #595959; background-color: #73859f;
background-color: rgba(89, 89, 89, 0.75); background-color: rgba(115, 133, 159, 0.5);
-webkit-transition: all 0s; -webkit-transition: all 0s;
-moz-transition: all 0s; -moz-transition: all 0s;
-o-transition: all 0s; -o-transition: all 0s;
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; } display: none; }
.video-js button { .video-js button {
background: none; background: none;
border: none; border: none;
color: #fff; color: inherit;
display: inline-block; display: inline-block;
overflow: visible; overflow: visible;
font-size: inherit; font-size: inherit;
line-height: inherit;
text-transform: none;
text-decoration: none;
transition: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
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 { .video-js .vjs-control-bar {
display: none; display: none;
width: 100%; width: 100%;
@ -339,9 +472,9 @@ about what's required to play video. */
right: 0; right: 0;
height: 3em; height: 3em;
background-color: #2B333F; 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-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -353,7 +486,7 @@ about what's required to play video. */
-o-transition: visibility 0.1s, opacity 0.1s; -o-transition: visibility 0.1s, opacity 0.1s;
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; visibility: hidden;
opacity: 0; opacity: 0;
-webkit-transition: visibility 1s, opacity 1s; -webkit-transition: visibility 1s, opacity 1s;
@ -361,10 +494,11 @@ about what's required to play video. */
-o-transition: visibility 1s, opacity 1s; -o-transition: visibility 1s, opacity 1s;
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 { .vjs-controls-disabled .vjs-control-bar, .vjs-using-native-controls .vjs-control-bar, .vjs-error .vjs-control-bar {
display: none; } /* !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; opacity: 1;
visibility: visible; } 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 - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
*/ */
@media \0screen { @media \0screen {
.video-js.vjs-user-inactive.vjs-playing .vjs-control-bar :before { .vjs-user-inactive.vjs-playing .vjs-control-bar :before {
content: ""; } } content: ""; } }
/* IE 8 + 9 Support */ /* 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; } display: table; }
.video-js .vjs-control { .video-js .vjs-control {
@ -449,6 +583,9 @@ fonts to show/hide properly.
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; } align-items: center; }
.vjs-live .vjs-progress-control {
display: none; }
/* Box containing play and load progresses. Also acts as seek scrubber. */ /* Box containing play and load progresses. Also acts as seek scrubber. */
.video-js .vjs-progress-holder { .video-js .vjs-progress-holder {
-webkit-box-flex: auto; -webkit-box-flex: auto;
@ -467,7 +604,7 @@ fonts to show/hide properly.
font-size: 1.6666666667em; } font-size: 1.6666666667em; }
/* Also show the current time tooltip */ /* 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; display: block;
/* If we let the font size grow as much as everything else, the current time tooltip ends up /* 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 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; left: 0;
top: 0; } top: 0; }
.video-js .vjs-mouse-display:before {
display: none; }
.video-js .vjs-play-progress { .video-js .vjs-play-progress {
background-color: #fff; } background-color: #fff; }
.video-js .vjs-play-progress:before { .video-js .vjs-play-progress:before {
position: absolute; position: absolute;
top: -0.3333333333em; top: -0.3333333333em;
right: -0.5em; right: -0.5em;
font-size: 0.9em; font-size: 0.9em; }
height: 1em;
line-height: 1em; }
.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 */ /* By default this is hidden and only shown when hovering over the progress control */
display: none; display: none;
position: absolute; position: absolute;
@ -513,27 +651,64 @@ fonts to show/hide properly.
-moz-border-radius: 0.3em; -moz-border-radius: 0.3em;
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 { .video-js .vjs-load-progress {
background: #646464; /* For IE8 we'll lighten the color */
/* IE8- Fallback */ background: ligthen(#73859f, 25%);
background: rgba(255, 255, 255, 0.2); } /* 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 /* there are child elements of the load progress bar that represent the
specific time ranges that have been buffered */ specific time ranges that have been buffered */
.video-js .vjs-load-progress div { .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 { .video-js.vjs-no-flex .vjs-progress-control {
width: auto; } 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 { .video-js .vjs-slider {
outline: 0; outline: 0;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
margin: 0 0.45em 0 0.45em; margin: 0 0.45em 0 0.45em;
background-color: #595959; background-color: #73859f;
background-color: rgba(89, 89, 89, 0.9); } background-color: rgba(115, 133, 159, 0.5); }
.video-js .vjs-slider:focus { .video-js .vjs-slider:focus {
text-shadow: 0em 0em 1em white; text-shadow: 0em 0em 1em white;
@ -568,11 +743,11 @@ specific time ranges that have been buffered */
.video-js .vjs-volume-bar { .video-js .vjs-volume-bar {
margin: 1.35em; } margin: 1.35em; }
.video-js .vjs-volume-bar.vjs-slider-horizontal { .vjs-volume-bar.vjs-slider-horizontal {
width: 5em; width: 5em;
height: 0.3em; } height: 0.3em; }
.video-js .vjs-volume-bar.vjs-slider-vertical { .vjs-volume-bar.vjs-slider-vertical {
width: 0.3em; width: 0.3em;
height: 5em; } height: 5em; }
@ -585,23 +760,23 @@ specific time ranges that have been buffered */
position: absolute; position: absolute;
font-size: 0.9em; } font-size: 0.9em; }
.video-js .vjs-slider-vertical .vjs-volume-level { .vjs-slider-vertical .vjs-volume-level {
width: 0.3em; } width: 0.3em; }
.video-js .vjs-slider-vertical .vjs-volume-level:before { .vjs-slider-vertical .vjs-volume-level:before {
top: -0.5em; top: -0.5em;
left: -0.3em; } left: -0.3em; }
.video-js .vjs-slider-horizontal .vjs-volume-level { .vjs-slider-horizontal .vjs-volume-level {
height: 0.3em; } height: 0.3em; }
.video-js .vjs-slider-horizontal .vjs-volume-level:before { .vjs-slider-horizontal .vjs-volume-level:before {
top: -0.3em; top: -0.3em;
right: -0.5em; } right: -0.5em; }
/* Assumes volume starts at 1.0. */ /* 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%; } height: 100%; }
.video-js .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level { .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
width: 100%; } width: 100%; }
/* The volume menu button is like menu buttons (captions/subtitles) but works /* 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 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 display:none to hide the slider menu by default, and instead setting the
width and height to zero. */ 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; display: block;
width: 0; width: 0;
height: 0; height: 0;
border-top-color: transparent; } 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; } 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; } 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; height: 0;
width: 0; width: 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: 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; height: 8em;
width: 2.9em; } 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; height: 2.9em;
width: 8em; } width: 8em; }
.video-js .vjs-mute-control, .video-js .vjs-volume-control { .vjs-volume-menu-button.vjs-menu-button-inline .vjs-menu-content {
display: none; } /* An inline volume should never have a menu background color.
This protects it from external changes to background colors. */
.video-js .vjs-menu-button { background-color: transparent !important; }
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-poster { .vjs-poster {
display: inline-block; display: inline-block;
@ -766,6 +831,7 @@ width and height to zero. */
left: 0; left: 0;
height: 100%; } height: 100%; }
/* Used for IE8 fallback */
.vjs-poster img { .vjs-poster img {
display: block; display: block;
vertical-align: middle; vertical-align: middle;
@ -775,30 +841,44 @@ width and height to zero. */
width: 100%; } width: 100%; }
/* Hide the poster after the video has started playing */ /* Hide the poster after the video has started playing */
.video-js.vjs-has-started .vjs-poster { .vjs-has-started .vjs-poster {
display: none; } display: none; }
/* Don't hide the poster if we're playing audio */ /* 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; } display: block; }
/* Hide the poster when controls are disabled because it's clickable /* Hide the poster when controls are disabled because it's clickable
and the native poster can take over */ and the native poster can take over */
.video-js.vjs-controls-disabled .vjs-poster { .vjs-controls-disabled .vjs-poster {
display: none; } display: none; }
/* Hide the poster when native controls are used otherwise it covers them */ /* Hide the poster when native controls are used otherwise it covers them */
.video-js.vjs-using-native-controls .vjs-poster { .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 {
display: none; } display: none; }
.video-js .vjs-live-control { .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; font-size: 1em;
line-height: 3em; } line-height: 3em; }
.vjs-no-flex .vjs-live-control {
display: table-cell;
width: auto;
text-align: left; }
.video-js .vjs-time-control { .video-js .vjs-time-control {
-webkit-box-flex: none; -webkit-box-flex: none;
-moz-box-flex: none; -moz-box-flex: none;
@ -808,17 +888,23 @@ and the native poster can take over */
font-size: 1em; font-size: 1em;
line-height: 3em; } line-height: 3em; }
/* We need the extra specificity that referencing .vjs-no-flex provides. */ .vjs-live .vjs-time-control {
.video-js .vjs-current-time, .video-js.vjs-no-flex .vjs-current-time {
display: none; } 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; } display: none; }
.vjs-time-divider { .vjs-time-divider {
display: none; display: none;
line-height: 3em; } line-height: 3em; }
.vjs-live .vjs-time-divider {
display: none; }
.video-js .vjs-play-control { .video-js .vjs-play-control {
cursor: pointer; cursor: pointer;
-webkit-box-flex: none; -webkit-box-flex: none;
@ -827,7 +913,7 @@ and the native poster can take over */
-ms-flex: none; -ms-flex: none;
flex: none; } flex: none; }
.video-js .vjs-text-track-display { .vjs-text-track-display {
position: absolute; position: absolute;
bottom: 3em; bottom: 3em;
left: 0; left: 0;
@ -848,11 +934,11 @@ and the native poster can take over */
background-color: #000; background-color: #000;
background-color: rgba(0, 0, 0, 0.5); } background-color: rgba(0, 0, 0, 0.5); }
.video-js .vjs-subtitles { .vjs-subtitles {
color: #fff; color: #fff;
/* Subtitles are white */ } /* Subtitles are white */ }
.video-js .vjs-captions { .vjs-captions {
color: #fc6; color: #fc6;
/* Captions are yellow */ } /* Captions are yellow */ }
@ -869,7 +955,7 @@ and the native poster can take over */
flex: none; } flex: none; }
/* Switch to the exit icon when the player is in fullscreen */ /* 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; font-size: 1.5em;
line-height: 2; line-height: 2;
position: absolute; position: absolute;
@ -879,13 +965,9 @@ and the native poster can take over */
height: 100%; height: 100%;
text-align: center; } text-align: center; }
.video-js .vjs-playback-rate .vjs-menu { .vjs-playback-rate .vjs-menu {
left: 0em; }
.video-js .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content {
width: 4em; width: 4em;
left: 0; left: 0em; }
list-style: none; }
.vjs-error-display { .vjs-error-display {
display: none; } display: none; }
@ -902,7 +984,7 @@ and the native poster can take over */
content: 'X'; content: 'X';
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 4em; font-size: 4em;
color: #595959; color: #fff;
/* In order to center the play icon vertically we need to set the line height /* In order to center the play icon vertically we need to set the line height
to the same as the button height */ to the same as the button height */
line-height: 1; line-height: 1;
@ -928,82 +1010,101 @@ and the native poster can take over */
background-color: rgba(0, 0, 0, 0.5); } background-color: rgba(0, 0, 0, 0.5); }
.vjs-error-display a, .vjs-error-display a:visited { .vjs-error-display a, .vjs-error-display a:visited {
color: #F4A460; } color: #66A8CC; }
.vjs-loading-spinner { .vjs-loading-spinner {
display: none; display: none;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
font-size: 4em; margin: -25px 0 0 -25px;
line-height: 1; opacity: 0.85;
width: 1em; /* Need to fix centered page layouts */
height: 1em; text-align: left;
margin-left: -0.5em; border: 6px solid rgba(43, 51, 63, 0.7);
margin-top: -0.5em; box-sizing: border-box;
opacity: 0.75; } 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-seeking .vjs-loading-spinner, .vjs-waiting .vjs-loading-spinner {
.vjs-waiting .vjs-loading-spinner, .vjs-seeking .vjs-loading-spinner { display: block; }
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; }
/* Errors are unrecoverable without user interaction so hide the spinner */ .vjs-loading-spinner:before, .vjs-loading-spinner:after {
.vjs-error .vjs-loading-spinner { content: "";
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 {
position: absolute; position: absolute;
top: 0; margin: -6px;
left: 0; box-sizing: inherit;
width: 1em; width: inherit;
height: 1em; height: inherit;
text-align: center; border-radius: inherit;
text-shadow: 0em 0em 0.1em #000; } /* 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% { 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% { 100% {
-moz-transform: rotate(359deg); } } border-top-color: #73859f; } }
@-webkit-keyframes spin { @-webkit-keyframes vjs-spinner-fade {
0% { 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% { 100% {
-webkit-transform: rotate(359deg); } } border-top-color: #73859f; } }
@-o-keyframes spin { .vjs-chapters-button .vjs-menu {
0% { left: -10em;
-o-transform: rotate(0deg); } /* (Width of vjs-menu - width of vjs-control) / 2 */
width: 0; }
100% { .vjs-chapters-button .vjs-menu ul {
-o-transform: rotate(359deg); } } width: 24em; }
@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; }
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-custom-control-spacer { .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-custom-control-spacer {
-webkit-box-flex: auto; -webkit-box-flex: auto;
@ -1025,13 +1126,12 @@ and the native poster can take over */
.vjs-caption-settings { .vjs-caption-settings {
position: relative; position: relative;
top: 1em; top: 1em;
background-color: #000; background-color: #2B333F;
opacity: 0.75; background-color: rgba(43, 51, 63, 0.75);
color: #fff; color: #fff;
margin: 0 auto; margin: 0 auto;
padding: 0.5em; padding: 0.5em;
height: 15em; height: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
width: 40em; } width: 40em; }

2
node_modules/video.js/dist/video-js.min.css generated vendored
View file

File diff suppressed because one or more lines are too long

2457
node_modules/video.js/dist/video.js generated vendored
View file

File diff suppressed because it is too large Load diff

96
node_modules/video.js/dist/video.js.map generated vendored
View file

File diff suppressed because one or more lines are too long

16
node_modules/video.js/dist/video.min.js generated vendored
View file

File diff suppressed because one or more lines are too long

2
node_modules/video.js/dist/video.min.js.map generated vendored
View file

File diff suppressed because one or more lines are too long

16909
node_modules/video.js/dist/video.novtt.js generated vendored
View file

File diff suppressed because one or more lines are too long

1
node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.css generated vendored
View file

@ -23,7 +23,6 @@
.vjs-resolution-button ul.vjs-menu-content { .vjs-resolution-button ul.vjs-menu-content {
width: 4em !important; width: 4em !important;
right: -7em !important;
} }
.vjs-resolution-button .vjs-menu { .vjs-resolution-button .vjs-menu {

260
node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js generated vendored
View file

@ -1,12 +1,115 @@
/*! videojs-resolution-switcher - v0.0.0 - 2015-7-26 /*! videojs-resolution-switcher - v0.0.0 - 2015-7-26
* Copyright (c) 2015 Kasper Moskwiak * Copyright (c) 2015 Kasper Moskwiak
* Modified by Pierre Kraft
* Licensed under the Apache-2.0 license. */ * Licensed under the Apache-2.0 license. */
(function(window, videojs) { (function(window, videojs) {
/* jshint eqnull: true*/
'use strict'; 'use strict';
var defaults = {}, var defaults = {},
videoJsResolutionSwitcher, videoJsResolutionSwitcher;
groupedSrc;
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. * Initialize the plugin.
@ -17,91 +120,25 @@
player = this, player = this,
label = document.createElement('span'); label = document.createElement('span');
label.classList.add('vjs-resolution-button-label') 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;
}
})
player.updateSrc = function(src){ player.updateSrc = function(src){
//Return current src if src is not given //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 // Dispose old resolution menu button before adding new sources
if(player.controlBar.resolutionSwitcher){ if(player.controlBar.resolutionSwitcher){
player.controlBar.resolutionSwitcher.dispose() player.controlBar.resolutionSwitcher.dispose();
delete player.controlBar.resolutionSwitcher delete player.controlBar.resolutionSwitcher;
} }
//Sort sources //Sort sources
src = src.sort(compareResolutions) src = src.sort(compareResolutions);
groupedSrc = bucketSources(src) var groupedSrc = bucketSources(src);
var menuButton = new ResolutionMenuButton(player, { sources: src }); var choosen = chooseSrc(groupedSrc, src);
menuButton.el().classList.add('vjs-resolution-button') var menuButton = new ResolutionMenuButton(player, { sources: groupedSrc, initialySelectedLabel: choosen.label , initialySelectedRes: choosen.res}, settings, label);
player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton) menuButton.el().classList.add('vjs-resolution-button');
var newSource = chooseSrc(src) player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton);
label.innerHTML = newSource.label return setSourcesSanitized(player, choosen.sources);
player.src(newSource); };
}
/** /**
* Method used for sorting list of sources * Method used for sorting list of sources
@ -110,47 +147,72 @@
* @returns {Number} result of comparation * @returns {Number} result of comparation
*/ */
function compareResolutions(a, b){ function compareResolutions(a, b){
if(!a.res || !b.res) return 0; if(!a.res || !b.res){ return 0; }
return (+b.res)-(+a.res); return (+b.res)-(+a.res);
} }
/** /**
* Group sources by label, resolution and type * Group sources by label, resolution and type
* @param {Array} src Array of sources * @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){ function bucketSources(src){
var resolutions = { var resolutions = {
label: {}, label: {},
res: {}, res: {},
type: {} 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;
}
function initResolutionKey(resolutions, key, source) {
if(resolutions[key][source[key]] == null) {
resolutions[key][source[key]] = [];
} }
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] || [] function appendSourceToKey(resolutions, key, source) {
resolutions.type[src[i].type] = resolutions.type[src[i].type] || [] resolutions[key][source[key]].push(source);
resolutions.label[src[i].label].push(src[i])
resolutions.res[src[i].res].push(src[i])
resolutions.type[src[i].type].push(src[i])
}
return resolutions
} }
/** /**
* Choose src if option.default is specified * Choose src if option.default is specified
* @param {Array} src Array of sources * @param {Object} groupedSrc {res: { key: [] }}
* @returns {Object} source object * @param {Array} src Array of sources sorted by resolution used to find high and low res
* @returns {Object} {res: string, sources: []}
*/ */
function chooseSrc(src){ function chooseSrc(groupedSrc, src){
if(settings.default === 'low'){ return src[src.length - 1] } var selectedRes = settings.default;
if(settings.default === 'high'){ return src[0] } var selectedLabel = '';
if(groupedSrc.res[settings.default]){ return groupedSrc.res[settings.default][0] } if (selectedRes === 'high') {
return src[src.length - 1] 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> // Create resolution switcher for videos form <source> tag inside <video>
if(player.options_.sources.length > 1){ if(player.options_.sources.length > 1){
player.updateSrc(player.options_.sources) player.updateSrc(player.options_.sources);
} }
}; };

1
package.json
View file

@ -17,6 +17,7 @@
}, },
"homepage": "https://github.com/kmoskwiak/videojs-resolution-switcher#readme", "homepage": "https://github.com/kmoskwiak/videojs-resolution-switcher#readme",
"dependencies": { "dependencies": {
"video.js": "^5.0.0",
"videojs-resolution-switcher": "git+https://github.com/kmoskwiak/videojs-resolution-switcher.git" "videojs-resolution-switcher": "git+https://github.com/kmoskwiak/videojs-resolution-switcher.git"
} }
} }

51
style.css
View file

@ -5,33 +5,66 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
background: #eee;
} }
a { a {
color: aliceblue; color: aliceblue;
} }
a:hover {
color: aliceblue;
}
.header { .header {
background: #00aad3; background: #0082d3;
padding: 50px 50px 0px 50px; padding: 50px 50px 0px 50px;
color: #fff; color: #fff;
box-shadow: 0 0 20px -5px #000; box-shadow: 0 0 20px -5px #000;
} }
.example {
margin: 50px 0;
padding: 0 50px;
}
code { code {
color: #007f90 color: #007f90
} }
.info {
font-size: 1.2em;
}
.social { .social {
text-align: center; text-align: center;
padding: 20px; 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;
}