diff --git a/examples/hls.html b/examples/hls.html new file mode 100644 index 0000000..aa3d19e --- /dev/null +++ b/examples/hls.html @@ -0,0 +1,65 @@ + + + + + Video.js Resolution Switcher + + + + + + +
+

+ HLS tech +

+
+ + + + + + + + + diff --git a/lib/videojs-resolution-switcher.js b/lib/videojs-resolution-switcher.js index eae1c38..eb8adbf 100644 --- a/lib/videojs-resolution-switcher.js +++ b/lib/videojs-resolution-switcher.js @@ -85,6 +85,7 @@ ); } } + return menuItems; }; ResolutionMenuButton.prototype.update = function(){ @@ -114,10 +115,15 @@ * @param {Array} [src] array of sources [{src: '', type: '', label: '', res: ''}] * @returns {Object|String|Array} videojs player object if used as setter or current source URL, object, or array of sources */ - player.updateSrc = function(src){ + player.updateSrc = function(src, _options){ //Return current src if src is not given if(!src){ return player.src(); } + if(_options && _options.hls){ + player.src(src); + return initResolutionForHLS(player); + } + // Only add those sources which we can (maybe) play src = src.filter( function(source) { try { @@ -127,6 +133,7 @@ return true; } }); + //Sort sources this.currentSources = src.sort(compareResolutions); this.groupedSrc = bucketSources(this.currentSources); @@ -338,6 +345,74 @@ player.setSourcesSanitized(chosen.sources, chosen.label, _customSourcePicker); }); } + + function initResolutionForHLS(player){ + var hls = player.tech_.hls; + if(!hls) { return; } + // Capture events + player.on('mediachange', function(){ + player.trigger('resolutionchange'); + }); + + player.one('loadedmetadata', function(){ + var representations = hls.representations(); + var _sources = [{ src: 'auto', type: 'application/x-mpegURL', label: 'auto', res: 0}]; + + representations.map(function(representation){ + _sources.push({ + src: representation, + type: 'application/x-mpegURL', + label: representation.height, + res: representation.height + }); + }); + + player.groupedSrc = bucketSources(_sources); + + // Overwrite defualt sourcePicer function + var _customSourcePicker = function(_player, _sources, _label){ + var representations = _player.tech_.hls.representations(); + if(_label === 'auto'){ + // If user selected auto enable all representations + representations.map(function(represenation){ + represenation.enabled(true); + }); + player.trigger('updateSources'); + return _player; + } + + var source = _sources[0]; + var id = source.src.id; + representations.map(function(represenation){ + if(represenation.id !== id){ + represenation.enabled(false); + }else{ + represenation.enabled(true); + } + }); + + player.trigger('updateSources'); + return _player; + }; + + settings.customSourcePicker = _customSourcePicker; + + var currentPlaylist = hls.playlists.media(); + var chosen = { + label: 'auto', + res: currentPlaylist.attributes.RESOLUTION.height, + sources: currentPlaylist + }; + + this.currentResolutionState = { + label: chosen.label, + sources: chosen.sources + }; + + player.trigger('updateSources'); + player.setSourcesSanitized(chosen.sources, chosen.label, _customSourcePicker); + }); + } player.ready(function(){ if( settings.ui ) { @@ -353,11 +428,17 @@ player.updateSrc(player.options_.sources); } + if(player.tech_.hls && player.options_.sources.length){ + // HLS support + initResolutionForHLS(player); + } + if(player.techName_ === 'Youtube'){ // tech: YouTube initResolutionForYt(player); } }); + }; diff --git a/package.json b/package.json index aa8ab26..7447eec 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "url": "git@github.com:kmoskwiak/videojs-resolution-switcher.git" }, "bugs": { - "url": "https://github.com/kmoskwiak/videojs-resolution-switcher/issues" + "url": "https://github.com/khmoskwiak/videojs-resolution-switcher/issues" }, "license": "Apache-2.0", "keywords": [ @@ -35,7 +35,7 @@ "test": "grunt test" }, "devDependencies": { - "grunt": "^0.4.5", + "grunt": "^1.0.1", "grunt-contrib-clean": "^1.0", "grunt-contrib-concat": "^1.0", "grunt-contrib-jshint": "^1.0", @@ -43,8 +43,9 @@ "grunt-contrib-uglify": "^1.0", "grunt-contrib-watch": "^1.0", "video.js": "^5.8", - "qunitjs": "^1.22", - "videojs-youtube": "^2.0.8" + "qunitjs": "^2.0.0-rc1", + "videojs-youtube": "^2.0.8", + "videojs-contrib-hls": "^2.1.1" }, "peerDependencies": { "video.js": "^5.8"