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

sorting sourcec

Browse source
This commit is contained in:
Kasper Moskwiak 2015-08-01 14:07:43 +02:00
parent 3183bbaf1c
commit 6889d02fe7
4 changed files with 29 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

11
example.html
View file

@ -39,8 +39,10 @@
</div> </div>
<video id="video_1" class="video-js vjs-default-skin" width="1000" controls data-setup='{}'> <video id="video_1" class="video-js vjs-default-skin" width="1000" controls data-setup='{}'>
<source src="http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4" type='video/mp4' label='SD' /> <source src="http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4" type='video/mp4' label='SD' res='480' />
<source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='HD'/> <source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='HD' res='1080'/>
<source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='phone' res='144'/>
<source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='4k' res='2160'/>
</video> </video>
<script src="node_modules/video.js/dist/video.js"></script> <script src="node_modules/video.js/dist/video.js"></script>
@ -53,17 +55,18 @@
width: 1000 width: 1000
}, function(){ }, function(){
var player = this; var player = this;
window.player = player
player.updateSrc([ player.updateSrc([
{ {
src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm', src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm',
type: 'video/webm', type: 'video/webm',
label: '360' label: 'SD'
}, },
{ {
src: 'http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4', src: 'http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4',
type: 'video/mp4', type: 'video/mp4',
label: '720' label: 'HD'
} }
]) ])

16
lib/videojs-resolution-switcher.js
View file

@ -66,7 +66,7 @@
}, },
createItems: function(){ createItems: function(){
var sources = this.sources; var sources = this.sources.sort(compareResolutions);
var menuItems = []; var menuItems = [];
for(var i = 0; i < sources.length; i++){ for(var i = 0; i < sources.length; i++){
@ -84,6 +84,9 @@
player.updateSrc = function(src){ player.updateSrc = function(src){
//Return current src if src is not given
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()
@ -96,6 +99,17 @@
player.src(src); player.src(src);
} }
/**
* Method used for sorting list of sources
* @param {Object} a source object with res property
* @param {Object} b source object with res property
* @returns {Number} result of comparation
*/
function compareResolutions(a, b){
if(!a.res || !b.res) return 0;
return (+b.res)-(+a.res);
}
// 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)

8
test/index.html
View file

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Video.js Test</title> <title>Video.js videoJsResolutionSwitcher</title>
<link rel="stylesheet" href="../node_modules/qunitjs/qunit/qunit.css"> <link rel="stylesheet" href="../node_modules/qunitjs/qunit/qunit.css">
</head> </head>
<body> <body>
@ -14,8 +14,8 @@
ok(true, 'everything is swell'); ok(true, 'everything is swell');
}); });
</script> </script>
<script src="../node_modules/video.js/dist/video-js/video.js"></script> <script src="../node_modules/video.js/dist/video.js"></script>
<script src="../lib/videojs-test.js"></script> <script src="../lib/videojs-resolution-switcher.js"></script>
<script src="videojs-test.test.js"></script> <script src="videojs-resolution-switcher.test.js"></script>
</body> </body>
</html> </html>

5
test/videojs-resolution-switcher.test.js
View file

@ -31,6 +31,7 @@
setup: function() { setup: function() {
// force HTML support so the tests run in a reasonable // force HTML support so the tests run in a reasonable
// environment under phantomjs // environment under phantomjs
videojs.Html5 = videojs.Html5 || {};
realIsHtmlSupported = videojs.Html5.isSupported; realIsHtmlSupported = videojs.Html5.isSupported;
videojs.Html5.isSupported = function() { videojs.Html5.isSupported = function() {
return true; return true;
@ -44,7 +45,7 @@
player = videojs(video); player = videojs(video);
// initialize the plugin with the default options // initialize the plugin with the default options
player.test(); player.videoJsResolutionSwitcher();
}, },
teardown: function() { teardown: function() {
videojs.Html5.isSupported = realIsHtmlSupported; videojs.Html5.isSupported = realIsHtmlSupported;
@ -52,6 +53,6 @@
}); });
test('registers itself', function() { test('registers itself', function() {
ok(player.test, 'registered the plugin'); ok(player.videoJsResolutionSwitcher, 'registered the plugin');
}); });
})(window, window.videojs, window.QUnit); })(window, window.videojs, window.QUnit);