mirror of
https://github.com/kmoskwiak/videojs-resolution-switcher.git
synced 2025-10-03 17:59:42 +02:00
merge hls-tech into master
+ update videojs and videojs-hls-contrib
This commit is contained in:
Kasper Moskwiak
commit
dba17d2e5b
3 changed files with 152 additions and 5 deletions
65
examples/hls.html
Normal file
65
examples/hls.html
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Video.js Resolution Switcher</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="../node_modules/video.js/dist/video-js.css" rel="stylesheet">
|
||||||
|
<link href="../lib/videojs-resolution-switcher.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background: #777;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
background-color: #eee;
|
||||||
|
border: thin solid #333;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 0 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.video-js {
|
||||||
|
margin: 40px auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="info">
|
||||||
|
<p>
|
||||||
|
HLS tech
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<video id="video" class="video-js"></video>
|
||||||
|
|
||||||
|
<script src="../node_modules/video.js/dist/video.js"></script>
|
||||||
|
<script src="../node_modules/videojs-contrib-hls/dist/videojs-contrib-hls.min.js"></script>
|
||||||
|
<script src="../lib/videojs-resolution-switcher.js"></script>
|
||||||
|
<script>
|
||||||
|
// fire up the plugin
|
||||||
|
videojs('video', {
|
||||||
|
controls: true,
|
||||||
|
muted: true,
|
||||||
|
width: 1000,
|
||||||
|
plugins: {
|
||||||
|
videoJsResolutionSwitcher: {
|
||||||
|
dynamicLabel: true // Display dynamic labels or gear symbol
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, function(){
|
||||||
|
var player = this;
|
||||||
|
window.player = player;
|
||||||
|
|
||||||
|
player.updateSrc({
|
||||||
|
src: '//labs.tvpw.pl/video/hls/tears.m3u8',
|
||||||
|
type: 'application/x-mpegURL'
|
||||||
|
}, {hls: true});
|
||||||
|
|
||||||
|
player.on('resolutionchange', function(){
|
||||||
|
console.info('Source changed to %s', player.src());
|
||||||
|
});
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -85,6 +85,7 @@
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return menuItems;
|
return menuItems;
|
||||||
};
|
};
|
||||||
ResolutionMenuButton.prototype.update = function(){
|
ResolutionMenuButton.prototype.update = function(){
|
||||||
|
|
@ -114,10 +115,15 @@
|
||||||
* @param {Array} [src] array of sources [{src: '', type: '', label: '', res: ''}]
|
* @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
|
* @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
|
//Return current src if src is not given
|
||||||
if(!src){ return player.src(); }
|
if(!src){ return player.src(); }
|
||||||
|
|
||||||
|
if(_options && _options.hls){
|
||||||
|
player.src(src);
|
||||||
|
return initResolutionForHLS(player);
|
||||||
|
}
|
||||||
|
|
||||||
// Only add those sources which we can (maybe) play
|
// Only add those sources which we can (maybe) play
|
||||||
src = src.filter( function(source) {
|
src = src.filter( function(source) {
|
||||||
try {
|
try {
|
||||||
|
|
@ -127,6 +133,7 @@
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
//Sort sources
|
//Sort sources
|
||||||
this.currentSources = src.sort(compareResolutions);
|
this.currentSources = src.sort(compareResolutions);
|
||||||
this.groupedSrc = bucketSources(this.currentSources);
|
this.groupedSrc = bucketSources(this.currentSources);
|
||||||
|
|
@ -334,6 +341,74 @@
|
||||||
sources: chosen.sources
|
sources: chosen.sources
|
||||||
};
|
};
|
||||||
|
|
||||||
|
player.trigger('updateSources');
|
||||||
|
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.trigger('updateSources');
|
||||||
player.setSourcesSanitized(chosen.sources, chosen.label, _customSourcePicker);
|
player.setSourcesSanitized(chosen.sources, chosen.label, _customSourcePicker);
|
||||||
});
|
});
|
||||||
|
|
@ -353,12 +428,18 @@
|
||||||
player.updateSrc(player.options_.sources);
|
player.updateSrc(player.options_.sources);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(player.tech_.hls && player.options_.sources.length){
|
||||||
|
// HLS support
|
||||||
|
initResolutionForHLS(player);
|
||||||
|
}
|
||||||
|
|
||||||
if(player.techName_ === 'Youtube'){
|
if(player.techName_ === 'Youtube'){
|
||||||
// tech: YouTube
|
// tech: YouTube
|
||||||
initResolutionForYt(player);
|
initResolutionForYt(player);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// register the plugin
|
// register the plugin
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
"url": "git@github.com:kmoskwiak/videojs-resolution-switcher.git"
|
"url": "git@github.com:kmoskwiak/videojs-resolution-switcher.git"
|
||||||
},
|
},
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/kmoskwiak/videojs-resolution-switcher/issues"
|
"url": "https://github.com/khmoskwiak/videojs-resolution-switcher/issues"
|
||||||
},
|
},
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
"test": "grunt test"
|
"test": "grunt test"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"grunt": "^0.4.5",
|
"grunt": "^1.0.1",
|
||||||
"grunt-contrib-clean": "^1.0",
|
"grunt-contrib-clean": "^1.0",
|
||||||
"grunt-contrib-concat": "^1.0",
|
"grunt-contrib-concat": "^1.0",
|
||||||
"grunt-contrib-jshint": "^1.0",
|
"grunt-contrib-jshint": "^1.0",
|
||||||
|
|
@ -43,8 +43,9 @@
|
||||||
"grunt-contrib-uglify": "^1.0",
|
"grunt-contrib-uglify": "^1.0",
|
||||||
"grunt-contrib-watch": "^1.0",
|
"grunt-contrib-watch": "^1.0",
|
||||||
"video.js": "^5.8",
|
"video.js": "^5.8",
|
||||||
"qunitjs": "^1.22",
|
"qunitjs": "^2.0.0-rc1",
|
||||||
"videojs-youtube": "^2.0.8"
|
"videojs-youtube": "^2.0.8",
|
||||||
|
"videojs-contrib-hls": "^2.1.1"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"video.js": "^5.8"
|
"video.js": "^5.8"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue