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

Make the selected label selected from the beginning

Browse source
This commit is contained in:
Pierre Kraft 2015-10-05 16:31:35 +02:00
parent 7ed92d2d00
commit 157cd3b211
1 changed files with 95 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

128
index.js
View file

@ -19,51 +19,67 @@
label.classList.add('vjs-resolution-button-label');
/*
* Resolution menu item
*/
var MenuItem = videojs.getComponent('MenuItem');
var ResolutionMenuItem = videojs.extend(MenuItem, {
constructor: function(player, options){
MenuItem.call(this, player, options);
this.src = options.src;
this.on('click', this.onClick);
this.on('touchstart', this.onClick);
},
onClick: function(){
// Hide bigPlayButton
player.bigPlayButton.hide();
// Remember player state
var currentTime = player.currentTime();
var isPaused = player.paused();
// Change menu button label
label.innerHTML = this.options_.label;
// Change player source and wait for loadeddata event, then play video
// loadedmetadata doesn't work right now for flash.
// Probably because of https://github.com/videojs/video-js-swf/issues/124
setSourceSanitized(this.src).one( 'loadeddata', function() {
player.currentTime(currentTime);
if(!isPaused){ player.play(); }
player.trigger('resolutionchange');
});
}
});
function setSourceSanitized(sources) {
function setSourcesSanitized(player, sources) {
return player.src(sources.map(function(src) {
return {src: src.src, type: src.type, res: src.res};
}));
}
/*
* Resolution menu item
*/
var MenuItem = videojs.getComponent('MenuItem');
var ResolutionMenuItem = videojs.extend(MenuItem, {
constructor: function(player, options, onClickListener, label){
this.onClickListener = onClickListener;
this.label = label;
// Sets this.player_, this.options_ and initializes the component
MenuItem.call(this, player, options);
this.src = options.src;
this.on('click', this.onClick);
this.on('touchstart', this.onClick);
if (options.initialySelected) {
this.showAsLabel();
this.selected(true);
}
},
showAsLabel: function() {
// Change menu button label to the label of this item if the menu button label is provided
if(this.label) {
this.label.innerHTML = this.options_.label;
}
},
onClick: function(){
this.onClickListener(this);
// Hide bigPlayButton
this.player_.bigPlayButton.hide();
// Remember player state
var currentTime = this.player_.currentTime();
var isPaused = this.player_.paused();
this.showAsLabel()
// Change player source and wait for loadeddata event, then play video
// loadedmetadata doesn't work right now for flash.
// Probably because of https://github.com/videojs/video-js-swf/issues/124
setSourcesSanitized(this.player_, this.src).one('loadeddata', function() {
this.player_.currentTime(currentTime);
if(!isPaused){ this.player_.play(); }
this.player_.trigger('resolutionchange');
});
}
});
/*
* Resolution menu button
*/
var MenuButton = videojs.getComponent('MenuButton');
var ResolutionMenuButton = videojs.extend(MenuButton, {
constructor: function(player, options){
constructor: function(player, options, settings, label){
this.sources = options.sources;
this.label = label;
// Sets this.player_, this.options_ and initializes the component
MenuButton.call(this, player, options);
this.controlText('Quality');
@ -78,19 +94,29 @@
createItems: function(){
var menuItems = [];
var labels = (this.sources && this.sources.label) || {};
var onClickUnselectOthers = function(clickedItem) {
menuItems.map(function(item) {
item.selected(item === clickedItem);
});
};
for (var key in labels) {
if (labels.hasOwnProperty(key)) {
menuItems.push(new ResolutionMenuItem(player, {
menuItems.push(new ResolutionMenuItem(
this.player_,
{
label: key,
src: labels[key]
}));
src: labels[key],
initialySelected: +key === +this.options_.initialySelectedRes
},
onClickUnselectOthers,
this.label));
}
}
return menuItems;
}
});
player.updateSrc = function(src){
//Return current src if src is not given
if(!src){ return player.src(); }
@ -102,12 +128,11 @@
//Sort sources
src = src.sort(compareResolutions);
var groupedSrc = bucketSources(src);
var menuButton = new ResolutionMenuButton(player, { sources: groupedSrc });
var choosen = chooseSrc(groupedSrc, src);
var menuButton = new ResolutionMenuButton(player, { sources: groupedSrc, initialySelectedRes: choosen.res }, settings, label);
menuButton.el().classList.add('vjs-resolution-button');
player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton);
var newSource = chooseSrc(src, groupedSrc);
label.innerHTML = newSource.label;
return setSourceSanitized(newSource);
return setSourcesSanitized(player, choosen.sources);
};
/**
@ -156,15 +181,20 @@
/**
* Choose src if option.default is specified
* @param {Array} src Array of sources
* @param {Object} groupedSrc {res: { key: [] }}
* @returns {Array} one or many source objects. As array for convenience
* @param {Array} src Array of sources sorted by resolution used to find high and low res
* @returns {Object} {res: string, sources: []}
*/
function chooseSrc(src, groupedSrc){
if(settings.default === 'low'){ return [src[src.length - 1]]; }
if(settings.default === 'high'){ return [src[0]]; }
if(groupedSrc.res[settings.default]){ return groupedSrc.res[settings.default]; }
return [src[src.length - 1]];
function chooseSrc(groupedSrc, src){
var selectedRes = settings.default;
if (selectedRes === 'high') {
selectedRes = src[0].res;
} else if (selectedRes === 'low' || selectedRes == null) {
// Select low-res if default is low or not set
selectedRes = src[src.length - 1].res;
}
return {res: selectedRes, sources: groupedSrc.res[selectedRes]};
}
// Create resolution switcher for videos form <source> tag inside <video>