mirror of
https://github.com/kmoskwiak/videojs-resolution-switcher.git
synced 2025-10-03 17:59:42 +02:00
Merge branch 'H1D-patch-1'
This commit is contained in:
Kasper Moskwiak
commit
83d268d652
1 changed files with 173 additions and 163 deletions
|
|
@ -2,19 +2,28 @@
|
||||||
* Copyright (c) 2015 Kasper Moskwiak
|
* Copyright (c) 2015 Kasper Moskwiak
|
||||||
* Modified by Pierre Kraft
|
* Modified by Pierre Kraft
|
||||||
* Licensed under the Apache-2.0 license. */
|
* Licensed under the Apache-2.0 license. */
|
||||||
(function(window, videojs) {
|
|
||||||
/* jshint eqnull: true*/
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var defaults = {},
|
(function() {
|
||||||
videoJsResolutionSwitcher;
|
var videojs = null;
|
||||||
|
if(typeof window.videojs === 'undefined' && typeof require === 'function') {
|
||||||
function setSourcesSanitized(player, sources) {
|
videojs = require('videojs');
|
||||||
return player.src(sources.map(function(src) {
|
} else {
|
||||||
return {src: src.src, type: src.type, res: src.res};
|
videojs = window.videojs;
|
||||||
}));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
(function(window, videojs) {
|
||||||
|
/* jshint eqnull: true*/
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var defaults = {},
|
||||||
|
videoJsResolutionSwitcher;
|
||||||
|
|
||||||
|
function setSourcesSanitized(player, sources) {
|
||||||
|
return player.src(sources.map(function(src) {
|
||||||
|
return {src: src.src, type: src.type, res: src.res};
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Resolution menu item
|
* Resolution menu item
|
||||||
*/
|
*/
|
||||||
|
|
@ -62,164 +71,165 @@
|
||||||
this.player_.play().handleTechSeeked_();
|
this.player_.play().handleTechSeeked_();
|
||||||
}
|
}
|
||||||
this.player_.trigger('resolutionchange');
|
this.player_.trigger('resolutionchange');
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Resolution menu button
|
|
||||||
*/
|
|
||||||
var MenuButton = videojs.getComponent('MenuButton');
|
|
||||||
var ResolutionMenuButton = videojs.extend(MenuButton, {
|
|
||||||
constructor: function(player, options, settings, label){
|
|
||||||
this.sources = options.sources;
|
|
||||||
this.label = label;
|
|
||||||
this.label.innerHTML = options.initialySelectedLabel;
|
|
||||||
// Sets this.player_, this.options_ and initializes the component
|
|
||||||
MenuButton.call(this, player, options);
|
|
||||||
this.controlText('Quality');
|
|
||||||
|
|
||||||
if(settings.dynamicLabel){
|
|
||||||
this.el().appendChild(label);
|
|
||||||
}else{
|
|
||||||
var staticLabel = document.createElement('span');
|
|
||||||
staticLabel.classList.add('vjs-resolution-button-staticlabel');
|
|
||||||
this.el().appendChild(staticLabel);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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(
|
/*
|
||||||
this.player_,
|
* Resolution menu button
|
||||||
{
|
*/
|
||||||
label: key,
|
var MenuButton = videojs.getComponent('MenuButton');
|
||||||
src: labels[key],
|
var ResolutionMenuButton = videojs.extend(MenuButton, {
|
||||||
initialySelected: key === this.options_.initialySelectedLabel
|
constructor: function(player, options, settings, label){
|
||||||
},
|
this.sources = options.sources;
|
||||||
onClickUnselectOthers,
|
this.label = label;
|
||||||
this.label));
|
this.label.innerHTML = options.initialySelectedLabel;
|
||||||
}
|
// Sets this.player_, this.options_ and initializes the component
|
||||||
|
MenuButton.call(this, player, options);
|
||||||
|
this.controlText('Quality');
|
||||||
|
|
||||||
|
if(settings.dynamicLabel){
|
||||||
|
this.el().appendChild(label);
|
||||||
|
}else{
|
||||||
|
var staticLabel = document.createElement('span');
|
||||||
|
staticLabel.classList.add('vjs-resolution-button-staticlabel');
|
||||||
|
this.el().appendChild(staticLabel);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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(
|
||||||
|
this.player_,
|
||||||
|
{
|
||||||
|
label: key,
|
||||||
|
src: labels[key],
|
||||||
|
initialySelected: key === this.options_.initialySelectedLabel
|
||||||
|
},
|
||||||
|
onClickUnselectOthers,
|
||||||
|
this.label));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return menuItems;
|
||||||
}
|
}
|
||||||
return menuItems;
|
});
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialize the plugin.
|
|
||||||
* @param options (optional) {object} configuration for the plugin
|
|
||||||
*/
|
|
||||||
videoJsResolutionSwitcher = function(options) {
|
|
||||||
var settings = videojs.mergeOptions(defaults, options),
|
|
||||||
player = this,
|
|
||||||
label = document.createElement('span');
|
|
||||||
|
|
||||||
label.classList.add('vjs-resolution-button-label');
|
|
||||||
|
|
||||||
player.updateSrc = function(src){
|
|
||||||
//Return current src if src is not given
|
|
||||||
if(!src){ return player.src(); }
|
|
||||||
// Dispose old resolution menu button before adding new sources
|
|
||||||
if(player.controlBar.resolutionSwitcher){
|
|
||||||
player.controlBar.resolutionSwitcher.dispose();
|
|
||||||
delete player.controlBar.resolutionSwitcher;
|
|
||||||
}
|
|
||||||
//Sort sources
|
|
||||||
src = src.sort(compareResolutions);
|
|
||||||
var groupedSrc = bucketSources(src);
|
|
||||||
var choosen = chooseSrc(groupedSrc, src);
|
|
||||||
var menuButton = new ResolutionMenuButton(player, { sources: groupedSrc, initialySelectedLabel: choosen.label , initialySelectedRes: choosen.res}, settings, label);
|
|
||||||
menuButton.el().classList.add('vjs-resolution-button');
|
|
||||||
player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton);
|
|
||||||
return setSourcesSanitized(player, choosen.sources);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Method used for sorting list of sources
|
* Initialize the plugin.
|
||||||
* @param {Object} a source object with res property
|
* @param options (optional) {object} configuration for the plugin
|
||||||
* @param {Object} b source object with res property
|
|
||||||
* @returns {Number} result of comparation
|
|
||||||
*/
|
*/
|
||||||
function compareResolutions(a, b){
|
videoJsResolutionSwitcher = function(options) {
|
||||||
if(!a.res || !b.res){ return 0; }
|
var settings = videojs.mergeOptions(defaults, options),
|
||||||
return (+b.res)-(+a.res);
|
player = this,
|
||||||
}
|
label = document.createElement('span');
|
||||||
|
|
||||||
/**
|
label.classList.add('vjs-resolution-button-label');
|
||||||
* Group sources by label, resolution and type
|
|
||||||
* @param {Array} src Array of sources
|
player.updateSrc = function(src){
|
||||||
* @returns {Object} grouped sources: { label: { key: [] }, res: { key: [] }, type: { key: [] } }
|
//Return current src if src is not given
|
||||||
*/
|
if(!src){ return player.src(); }
|
||||||
function bucketSources(src){
|
// Dispose old resolution menu button before adding new sources
|
||||||
var resolutions = {
|
if(player.controlBar.resolutionSwitcher){
|
||||||
label: {},
|
player.controlBar.resolutionSwitcher.dispose();
|
||||||
res: {},
|
delete player.controlBar.resolutionSwitcher;
|
||||||
type: {}
|
}
|
||||||
|
//Sort sources
|
||||||
|
src = src.sort(compareResolutions);
|
||||||
|
var groupedSrc = bucketSources(src);
|
||||||
|
var choosen = chooseSrc(groupedSrc, src);
|
||||||
|
var menuButton = new ResolutionMenuButton(player, { sources: groupedSrc, initialySelectedLabel: choosen.label , initialySelectedRes: choosen.res}, settings, label);
|
||||||
|
menuButton.el().classList.add('vjs-resolution-button');
|
||||||
|
player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton);
|
||||||
|
return setSourcesSanitized(player, choosen.sources);
|
||||||
};
|
};
|
||||||
src.map(function(source) {
|
|
||||||
initResolutionKey(resolutions, 'label', source);
|
/**
|
||||||
initResolutionKey(resolutions, 'res', source);
|
* Method used for sorting list of sources
|
||||||
initResolutionKey(resolutions, 'type', source);
|
* @param {Object} a source object with res property
|
||||||
|
* @param {Object} b source object with res property
|
||||||
appendSourceToKey(resolutions, 'label', source);
|
* @returns {Number} result of comparation
|
||||||
appendSourceToKey(resolutions, 'res', source);
|
*/
|
||||||
appendSourceToKey(resolutions, 'type', source);
|
function compareResolutions(a, b){
|
||||||
});
|
if(!a.res || !b.res){ return 0; }
|
||||||
return resolutions;
|
return (+b.res)-(+a.res);
|
||||||
}
|
|
||||||
|
|
||||||
function initResolutionKey(resolutions, key, source) {
|
|
||||||
if(resolutions[key][source[key]] == null) {
|
|
||||||
resolutions[key][source[key]] = [];
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
/**
|
||||||
function appendSourceToKey(resolutions, key, source) {
|
* Group sources by label, resolution and type
|
||||||
resolutions[key][source[key]].push(source);
|
* @param {Array} src Array of sources
|
||||||
}
|
* @returns {Object} grouped sources: { label: { key: [] }, res: { key: [] }, type: { key: [] } }
|
||||||
|
*/
|
||||||
/**
|
function bucketSources(src){
|
||||||
* Choose src if option.default is specified
|
var resolutions = {
|
||||||
* @param {Object} groupedSrc {res: { key: [] }}
|
label: {},
|
||||||
* @param {Array} src Array of sources sorted by resolution used to find high and low res
|
res: {},
|
||||||
* @returns {Object} {res: string, sources: []}
|
type: {}
|
||||||
*/
|
};
|
||||||
function chooseSrc(groupedSrc, src){
|
src.map(function(source) {
|
||||||
var selectedRes = settings.default;
|
initResolutionKey(resolutions, 'label', source);
|
||||||
var selectedLabel = '';
|
initResolutionKey(resolutions, 'res', source);
|
||||||
if (selectedRes === 'high') {
|
initResolutionKey(resolutions, 'type', source);
|
||||||
selectedRes = src[0].res;
|
|
||||||
selectedLabel = src[0].label;
|
appendSourceToKey(resolutions, 'label', source);
|
||||||
} else if (selectedRes === 'low' || selectedRes == null) {
|
appendSourceToKey(resolutions, 'res', source);
|
||||||
// Select low-res if default is low or not set
|
appendSourceToKey(resolutions, 'type', source);
|
||||||
selectedRes = src[src.length - 1].res;
|
});
|
||||||
selectedLabel = src[src.length -1].label;
|
return resolutions;
|
||||||
} else if (groupedSrc.res[selectedRes]) {
|
|
||||||
selectedLabel = groupedSrc.res[selectedRes][0].label;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(selectedRes === undefined){
|
function initResolutionKey(resolutions, key, source) {
|
||||||
return {res: selectedRes, label: selectedLabel, sources: groupedSrc.label[selectedLabel]};
|
if(resolutions[key][source[key]] == null) {
|
||||||
|
resolutions[key][source[key]] = [];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return {res: selectedRes, label: selectedLabel, sources: groupedSrc.res[selectedRes]};
|
|
||||||
}
|
function appendSourceToKey(resolutions, key, source) {
|
||||||
|
resolutions[key][source[key]].push(source);
|
||||||
// Create resolution switcher for videos form <source> tag inside <video>
|
}
|
||||||
if(player.options_.sources.length > 1){
|
|
||||||
player.updateSrc(player.options_.sources);
|
/**
|
||||||
}
|
* Choose src if option.default is specified
|
||||||
|
* @param {Object} groupedSrc {res: { key: [] }}
|
||||||
};
|
* @param {Array} src Array of sources sorted by resolution used to find high and low res
|
||||||
|
* @returns {Object} {res: string, sources: []}
|
||||||
// register the plugin
|
*/
|
||||||
videojs.plugin('videoJsResolutionSwitcher', videoJsResolutionSwitcher);
|
function chooseSrc(groupedSrc, src){
|
||||||
})(window, window.videojs);
|
var selectedRes = settings.default;
|
||||||
|
var selectedLabel = '';
|
||||||
|
if (selectedRes === 'high') {
|
||||||
|
selectedRes = src[0].res;
|
||||||
|
selectedLabel = src[0].label;
|
||||||
|
} else if (selectedRes === 'low' || selectedRes == null) {
|
||||||
|
// Select low-res if default is low or not set
|
||||||
|
selectedRes = src[src.length - 1].res;
|
||||||
|
selectedLabel = src[src.length -1].label;
|
||||||
|
} else if (groupedSrc.res[selectedRes]) {
|
||||||
|
selectedLabel = groupedSrc.res[selectedRes][0].label;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(selectedRes === undefined){
|
||||||
|
return {res: selectedRes, label: selectedLabel, sources: groupedSrc.label[selectedLabel]};
|
||||||
|
}
|
||||||
|
return {res: selectedRes, label: selectedLabel, sources: groupedSrc.res[selectedRes]};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create resolution switcher for videos form <source> tag inside <video>
|
||||||
|
if(player.options_.sources.length > 1){
|
||||||
|
player.updateSrc(player.options_.sources);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// register the plugin
|
||||||
|
videojs.plugin('videoJsResolutionSwitcher', videoJsResolutionSwitcher);
|
||||||
|
})(window, videojs);
|
||||||
|
})();
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue