yetangitu/videojs-resolution-switcher
1
0
Fork 0
mirror of https://github.com/kmoskwiak/videojs-resolution-switcher.git synced 2025-10-04 10:19:21 +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>
<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://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='HD'/>
<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' 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>
<script src="node_modules/video.js/dist/video.js"></script>
@ -53,17 +55,18 @@
width: 1000
}, function(){
var player = this;
window.player = player
player.updateSrc([
{
src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm',
type: 'video/webm',
label: '360'
label: 'SD'
},
{
src: 'http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4',
type: 'video/mp4',
label: '720'
label: 'HD'
}
])

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

@ -66,7 +66,7 @@
},
createItems: function(){
var sources = this.sources;
var sources = this.sources.sort(compareResolutions);
var menuItems = [];
for(var i = 0; i < sources.length; i++){
@ -84,6 +84,9 @@
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
if(player.controlBar.resolutionSwitcher){
player.controlBar.resolutionSwitcher.dispose()
@ -96,6 +99,17 @@
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>
if(player.options_.sources.length > 1){
player.updateSrc(player.options_.sources)

8
test/index.html
View file

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

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

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