mirror of
https://github.com/kmoskwiak/videojs-resolution-switcher.git
synced 2025-10-03 09:49:21 +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;
|
||||
};
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue