mirror of
https://github.com/kmoskwiak/videojs-resolution-switcher.git
synced 2025-10-03 17:59:42 +02:00
Merge branch 'YouPic-master'
This commit is contained in:
Kasper Moskwiak
commit
8d2c34ec14
4 changed files with 223 additions and 162 deletions
|
|
@ -1,5 +1,7 @@
|
|||
Copyright 2013 Kasper Moskwiak
|
||||
|
||||
Modified by Pierre Kraft
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
<script>
|
||||
videojs.options.flash.swf = "node_modules/video.js/dist/video-js.swf"
|
||||
</script>
|
||||
<script src="lib/videojs-resolution-switcher.js"></script>
|
||||
<script src="index.js"></script>
|
||||
<script>
|
||||
// fire up the plugin
|
||||
videojs('video', {
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
width: 1000,
|
||||
plugins: {
|
||||
videoJsResolutionSwitcher: {
|
||||
default: '360', // Default resolution [{Number}, 'low', 'high'],
|
||||
default: 'low', // Default resolution [{Number}, 'low', 'high'],
|
||||
dynamicLabel: true // Display dynamic labels or gear symbol
|
||||
}
|
||||
}
|
||||
|
|
|
|||
219
index.js
Normal file
219
index.js
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
/*! videojs-resolution-switcher - v0.0.0 - 2015-7-26
|
||||
* Copyright (c) 2015 Kasper Moskwiak
|
||||
* Modified by Pierre Kraft
|
||||
* Licensed under the Apache-2.0 license. */
|
||||
(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
|
||||
*/
|
||||
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, 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_,
|
||||
{
|
||||
label: key,
|
||||
src: labels[key],
|
||||
initialySelected: key === this.options_.initialySelectedLabel
|
||||
},
|
||||
onClickUnselectOthers,
|
||||
this.label));
|
||||
}
|
||||
}
|
||||
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
|
||||
* @param {Object} a source object with res property
|
||||
* @param {Object} b source object with res property
|
||||
* @returns {Number} result of comparation
|
||||
*/
|
||||
function compareResolutions(a, b){
|
||||
if(!a.res || !b.res){ return 0; }
|
||||
return (+b.res)-(+a.res);
|
||||
}
|
||||
|
||||
/**
|
||||
* Group sources by label, resolution and type
|
||||
* @param {Array} src Array of sources
|
||||
* @returns {Object} grouped sources: { label: { key: [] }, res: { key: [] }, type: { key: [] } }
|
||||
*/
|
||||
function bucketSources(src){
|
||||
var resolutions = {
|
||||
label: {},
|
||||
res: {},
|
||||
type: {}
|
||||
};
|
||||
src.map(function(source) {
|
||||
initResolutionKey(resolutions, 'label', source);
|
||||
initResolutionKey(resolutions, 'res', source);
|
||||
initResolutionKey(resolutions, 'type', source);
|
||||
|
||||
appendSourceToKey(resolutions, 'label', source);
|
||||
appendSourceToKey(resolutions, 'res', source);
|
||||
appendSourceToKey(resolutions, 'type', source);
|
||||
});
|
||||
return resolutions;
|
||||
}
|
||||
|
||||
function initResolutionKey(resolutions, key, source) {
|
||||
if(resolutions[key][source[key]] == null) {
|
||||
resolutions[key][source[key]] = [];
|
||||
}
|
||||
}
|
||||
|
||||
function appendSourceToKey(resolutions, key, source) {
|
||||
resolutions[key][source[key]].push(source);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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: []}
|
||||
*/
|
||||
function chooseSrc(groupedSrc, src){
|
||||
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, window.videojs);
|
||||
|
|
@ -1,160 +0,0 @@
|
|||
/*! videojs-resolution-switcher - v0.0.0 - 2015-7-26
|
||||
* Copyright (c) 2015 Kasper Moskwiak
|
||||
* Licensed under the Apache-2.0 license. */
|
||||
(function(window, videojs) {
|
||||
'use strict';
|
||||
|
||||
var defaults = {},
|
||||
videoJsResolutionSwitcher,
|
||||
groupedSrc;
|
||||
|
||||
/**
|
||||
* 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');
|
||||
|
||||
/*
|
||||
* 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.type = options.type;
|
||||
|
||||
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 loadedmetadata event, then play video
|
||||
player.src({src: this.src, type: this.type}).one( 'loadedmetadata', function() {
|
||||
player.currentTime(currentTime);
|
||||
if(!isPaused){ player.play(); }
|
||||
player.trigger('resolutionchange');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
* Resolution menu button
|
||||
*/
|
||||
var MenuButton = videojs.getComponent('MenuButton');
|
||||
var ResolutionMenuButton = videojs.extend(MenuButton, {
|
||||
constructor: function(player, options){
|
||||
this.sources = options.sources;
|
||||
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 sources = this.sources;
|
||||
var menuItems = [];
|
||||
for(var i = 0; i < sources.length; i++){
|
||||
menuItems.push(new ResolutionMenuItem(player, {
|
||||
label: sources[i].label,
|
||||
src: sources[i].src,
|
||||
type: sources[i].type
|
||||
}));
|
||||
}
|
||||
return menuItems;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
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);
|
||||
groupedSrc = bucketSources(src);
|
||||
var menuButton = new ResolutionMenuButton(player, { sources: src });
|
||||
menuButton.el().classList.add('vjs-resolution-button');
|
||||
player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton);
|
||||
var newSource = chooseSrc(src);
|
||||
label.innerHTML = newSource.label;
|
||||
player.src(newSource);
|
||||
};
|
||||
|
||||
/**
|
||||
* Method used for sorting list of sources
|
||||
* @param {Object} a source object with res property
|
||||
* @param {Object} b source object with res property
|
||||
* @returns {Number} result of comparation
|
||||
*/
|
||||
function compareResolutions(a, b){
|
||||
if(!a.res || !b.res){ return 0; }
|
||||
return (+b.res)-(+a.res);
|
||||
}
|
||||
|
||||
/**
|
||||
* Group sources by label, resolution and type
|
||||
* @param {Array} src Array of sources
|
||||
* @returns {Object} grouped sources: { label: {}, res: {}, type: {} }
|
||||
*/
|
||||
function bucketSources(src){
|
||||
var resolutions = {
|
||||
label: {},
|
||||
res: {},
|
||||
type: {}
|
||||
};
|
||||
for(var i = 0; i<src.length; i++){
|
||||
resolutions.label[src[i].label] = resolutions.label[src[i].label] || [];
|
||||
resolutions.res[src[i].res] = resolutions.res[src[i].res] || [];
|
||||
resolutions.type[src[i].type] = resolutions.type[src[i].type] || [];
|
||||
resolutions.label[src[i].label].push(src[i]);
|
||||
resolutions.res[src[i].res].push(src[i]);
|
||||
resolutions.type[src[i].type].push(src[i]);
|
||||
}
|
||||
return resolutions;
|
||||
}
|
||||
|
||||
/**
|
||||
* Choose src if option.default is specified
|
||||
* @param {Array} src Array of sources
|
||||
* @returns {Object} source object
|
||||
*/
|
||||
function chooseSrc(src){
|
||||
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][0]; }
|
||||
return src[src.length - 1];
|
||||
}
|
||||
|
||||
// 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, window.videojs);
|
||||
Loading…
Add table
Add a link
Reference in a new issue