yetangitu/videojs-resolution-switcher
1
0
Fork 0
mirror of https://github.com/kmoskwiak/videojs-resolution-switcher.git synced 2025-10-03 17:59:42 +02:00
Code Issues Releases Wiki Activity

youtube tech

Browse source
This commit is contained in:
Kasper Moskwiak 2016-03-13 20:57:55 +01:00
parent 46c88bcc41
commit 92477a26db
5 changed files with 229 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -86,7 +86,7 @@
// Probably because of https://github.com/videojs/video-js-swf/issues/124
// If player preload is 'none' and then loadeddata not fired. So, we need timeupdate event for seek handle (timeupdate doesn't work properly with flash)
var handleSeekEvent = 'loadeddata';
if(this.player_.preload() === 'none' && this.player_.techName_ !== 'Flash') {
if(this.player_.techName_ != 'Youtube' && this.player_.preload() === 'none' && this.player_.techName_ !== 'Flash') {
handleSeekEvent = 'timeupdate';
}
setSourcesSanitized(this.player_, this.src, this.options_.label, customSourcePicker).one(handleSeekEvent, function() {
@ -282,14 +282,76 @@
}
return {res: selectedRes, label: selectedLabel, sources: groupedSrc.res[selectedRes]};
}
function initResolutionForYt(player){
// Init resolution
player.tech_.ytPlayer.setPlaybackQuality('default');
// Capture events
player.tech_.ytPlayer.addEventListener('onPlaybackQualityChange', function(){
player.trigger('resolutionchange');
});
// We must wait for play event
player.one('play', function(){
var qualities = player.tech_.ytPlayer.getAvailableQualityLevels();
// Map youtube qualities names
var _yts = {
"highres": {res: 1080, label: '1080', yt: 'highres'},
"hd1080": {res: 1080, label: '1080', yt: 'hd1080'},
"hd720": {res: 720, label: '720', yt: 'hd720'},
"large": {res: 480, label: '480', yt: 'large'},
"medium": {res: 360, label: '360', yt: 'medium'},
"small": {res: 240, label: '240', yt: 'small'},
"tiny": {res: 144, label: '144', yt: 'tiny'},
"auto": {res: 0, label: 'auto', yt: 'default'}
}
// Create resolution switcher for videos form <source> tag inside <video>
if(player.options_.sources.length > 1){
// Wait for player ready event
player.ready(function(){
player.updateSrc(player.options_.sources);
});
}
var _sources = [];
qualities.map(function(q){
_sources.push({
src: player.src().src,
type: player.src().type,
label: _yts[q].label,
res: _yts[q].res,
_yt: _yts[q].yt
})
});
groupedSrc = bucketSources(_sources);
// Overwrite defualt sourcePicer function
var _customSourcePicker = function(_player, _sources, _label){
player.tech_.ytPlayer.setPlaybackQuality(_sources[0]._yt);
return player;
}
var choosen = {label: 'auto', res: 0, sources: groupedSrc.label['auto']};
var menuButton = new ResolutionMenuButton(player, {
sources: groupedSrc,
initialySelectedLabel: choosen.label,
initialySelectedRes: choosen.res,
customSourcePicker: _customSourcePicker
}, settings, label);
menuButton.el().classList.add('vjs-resolution-button');
player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton);
});
}
player.ready(function(){
if(player.options_.sources.length > 1){
// tech: Html5 and Flash
// Create resolution switcher for videos form <source> tag inside <video>
player.updateSrc(player.options_.sources);
}
if(player.techName_ === 'Youtube'){
// tech: YouTube
initResolutionForYt(player);
}
});
};