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

- Works in IE9

Browse source 
- Fix issue with Quality Label not changing
- Immediately displays loading spinner on resolution change
- Listens to 'timeupdate', 'loadedmetadata', and 'loadeddata' events when resolution changes, because these events are fired inconsistently depending on device (iOS mostly), browser, and filetype.
- Auto-formatted file (spaces to tabs)
This commit is contained in:
DerekZiemba 2017-03-01 22:01:59 -06:00
parent 85f1e51c8b
commit 03d8a35516
1 changed files with 338 additions and 328 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,20 +1,29 @@
/// <reference path="../videojs-5.14.1.js" />
/* https://github.com/kmoskwiak/videojs-resolution-switcher
* This library is using the dev branch (9/13/2016) because it fixes some IE9 issues. https://github.com/kmoskwiak/videojs-resolution-switcher/blob/dev/lib/videojs-resolution-switcher.js
* (12/20/2016) Modified to fix an issue with the Quality Label not changing.
* (1/13/2017) Modified player.currentResolution to pause video when switching resolution and to show loading spinner.
* (1/20/2017) Modified player.currentResolution to listen to timeupdate, loadedmetadata, and loadeddata to fix iOS safari issue.
*/
/*! videojs-resolution-switcher - 2015-7-26 /*! videojs-resolution-switcher - 2015-7-26
* Copyright (c) 2016 Kasper Moskwiak * Copyright (c) 2016 Kasper Moskwiak
* Modified by Pierre Kraft and Derk-Jan Hartman * Modified by Pierre Kraft and Derk-Jan Hartman
* Licensed under the Apache-2.0 license. */ * Licensed under the Apache-2.0 license.
*/
(function() { (function () {
/* jshint eqnull: true*/ /* jshint eqnull: true*/
/* global require */ /* global require */
'use strict'; 'use strict';
var videojs = null; var videojs = null;
if(typeof window.videojs === 'undefined' && typeof require === 'function') { if (typeof window.videojs === 'undefined' && typeof require === 'function') {
videojs = require('video.js'); videojs = require('video.js');
} else { } else {
videojs = window.videojs; videojs = window.videojs;
} }
(function(window, videojs) { (function (window, videojs) {
var videoJsResolutionSwitcher, var videoJsResolutionSwitcher,
defaults = { defaults = {
ui: true ui: true
@ -25,7 +34,7 @@
*/ */
var MenuItem = videojs.getComponent('MenuItem'); var MenuItem = videojs.getComponent('MenuItem');
var ResolutionMenuItem = videojs.extend(MenuItem, { var ResolutionMenuItem = videojs.extend(MenuItem, {
constructor: function(player, options){ constructor: function (player, options) {
options.selectable = true; options.selectable = true;
// Sets this.player_, this.options_ and initializes the component // Sets this.player_, this.options_ and initializes the component
MenuItem.call(this, player, options); MenuItem.call(this, player, options);
@ -33,42 +42,43 @@
player.on('resolutionchange', videojs.bind(this, this.update)); player.on('resolutionchange', videojs.bind(this, this.update));
} }
} ); });
ResolutionMenuItem.prototype.handleClick = function(event){ ResolutionMenuItem.prototype.handleClick = function (event) {
MenuItem.prototype.handleClick.call(this,event); MenuItem.prototype.handleClick.call(this, event);
this.player_.currentResolution(this.options_.label); this.player_.currentResolution(this.options_.label);
}; };
ResolutionMenuItem.prototype.update = function(){ ResolutionMenuItem.prototype.update = function () {
var selection = this.player_.currentResolution(); var selection = this.player_.currentResolution();
this.selected(this.options_.label === selection.label); this.selected(this.options_.label === selection.label);
}; };
MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem); videojs.registerComponent('ResolutionMenuItem', ResolutionMenuItem);
/* /*
* Resolution menu button * Resolution menu button
*/ */
var MenuButton = videojs.getComponent('MenuButton'); var MenuButton = videojs.getComponent('MenuButton');
var ResolutionMenuButton = videojs.extend(MenuButton, { var ResolutionMenuButton = videojs.extend(MenuButton, {
constructor: function(player, options){ constructor: function (player, options) {
this.label = document.createElement('span'); this.label = document.createElement('span');
options.label = 'Quality'; options.label = 'Quality';
// Sets this.player_, this.options_ and initializes the component // Sets this.player_, this.options_ and initializes the component
MenuButton.call(this, player, options); MenuButton.call(this, player, options);
this.el().setAttribute('aria-label','Quality'); this.el().setAttribute('aria-label', 'Quality');
this.controlText('Quality'); this.controlText('Quality');
if(options.dynamicLabel){ if (options.dynamicLabel) {
videojs.addClass(this.label, 'vjs-resolution-button-label'); videojs.addClass(this.label, 'vjs-resolution-button-label');
this.el().appendChild(this.label); this.el().appendChild(this.label);
}else{ } else {
var staticLabel = document.createElement('span'); var staticLabel = document.createElement('span');
videojs.addClass(staticLabel, 'vjs-menu-icon'); videojs.addClass(staticLabel, 'vjs-menu-icon');
this.el().appendChild(staticLabel); this.el().appendChild(staticLabel);
} }
player.on('updateSources', videojs.bind( this, this.update ) ); player.on('updateSources', videojs.bind(this, this.update));
player.on('resolutionchange', videojs.bind(this, this.updateLabel));
} }
} ); });
ResolutionMenuButton.prototype.createItems = function(){ ResolutionMenuButton.prototype.createItems = function () {
var menuItems = []; var menuItems = [];
var labels = (this.sources && this.sources.label) || {}; var labels = (this.sources && this.sources.label) || {};
@ -87,22 +97,26 @@
} }
return menuItems; return menuItems;
}; };
ResolutionMenuButton.prototype.update = function(){ ResolutionMenuButton.prototype.update = function () {
this.sources = this.player_.getGroupedSrc(); this.sources = this.player_.getGroupedSrc();
this.currentSelection = this.player_.currentResolution(); this.currentSelection = this.player_.currentResolution();
this.label.innerHTML = this.currentSelection ? this.currentSelection.label : ''; this.label.innerHTML = this.currentSelection ? this.currentSelection.label : '';
return MenuButton.prototype.update.call(this); return MenuButton.prototype.update.call(this);
}; };
ResolutionMenuButton.prototype.buildCSSClass = function(){ ResolutionMenuButton.prototype.updateLabel = function () {
return MenuButton.prototype.buildCSSClass.call( this ) + ' vjs-resolution-button'; var label = this.player_.controlBar.resolutionSwitcher.getElementsByClassName('vjs-resolution-button-label')[0];
label.innerHTML = this.player_.currentResolutionState.label;
}; };
MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton); ResolutionMenuButton.prototype.buildCSSClass = function () {
return MenuButton.prototype.buildCSSClass.call(this) + ' vjs-resolution-button';
};
videojs.registerComponent('ResolutionMenuButton', ResolutionMenuButton);
/** /**
* Initialize the plugin. * Initialize the plugin.
* @param {object} [options] configuration for the plugin * @param {object} [options] configuration for the plugin
*/ */
videoJsResolutionSwitcher = function(options) { videoJsResolutionSwitcher = function (options) {
var settings = videojs.mergeOptions(defaults, options), var settings = videojs.mergeOptions(defaults, options),
player = this, player = this,
groupedSrc = {}, groupedSrc = {},
@ -114,14 +128,14 @@
* @param {Array} [src] array of sources [{src: '', type: '', label: '', res: ''}] * @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 * @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) {
//Return current src if src is not given //Return current src if src is not given
if(!src){ return player.src(); } if (!src) { return player.src(); }
// Only add those sources which we can (maybe) play // Only add those sources which we can (maybe) play
src = src.filter( function(source) { src = src.filter(function (source) {
try { try {
return ( player.canPlayType( source.type ) !== '' ); return (player.canPlayType(source.type) !== '');
} catch (e) { } catch (e) {
// If a Tech doesn't yet have canPlayType just add it // If a Tech doesn't yet have canPlayType just add it
return true; return true;
@ -149,42 +163,38 @@
* @param {Function} [customSourcePicker] custom function to choose source. Takes 2 arguments: sources, label. Must return player object. * @param {Function} [customSourcePicker] custom function to choose source. Takes 2 arguments: sources, label. Must return player object.
* @returns {Object} current resolution object {label: '', sources: []} if used as getter or player object if used as setter * @returns {Object} current resolution object {label: '', sources: []} if used as getter or player object if used as setter
*/ */
player.currentResolution = function(label, customSourcePicker){ player.currentResolution = function (label, customSourcePicker) {
if(label == null) { return this.currentResolutionState; } if (label == null) { return this.currentResolutionState; }
// Lookup sources for label // Lookup sources for label
if(!this.groupedSrc || !this.groupedSrc.label || !this.groupedSrc.label[label]){ if (!this.groupedSrc || !this.groupedSrc.label || !this.groupedSrc.label[label]) {
return; return;
} }
var sources = this.groupedSrc.label[label]; var sources = this.groupedSrc.label[label];
// Remember player state // Remember player state
var currentTime = player.currentTime(); var currentTime = player.currentTime();
var isPaused = player.paused(); var isPaused = player.paused();
player.pause();
player.loadingSpinner.show();
// Hide bigPlayButton // Hide bigPlayButton
if(!isPaused && this.player_.options_.bigPlayButton){ if (!isPaused && this.player_.options_.bigPlayButton) {
this.player_.bigPlayButton.hide(); this.player_.bigPlayButton.hide();
} }
player.setSourcesSanitized(sources, label, customSourcePicker || settings.customSourcePicker);
// Change player source and wait for loadeddata event, then play video //The event is fired inconsistently across devices and different filetypes. So listen for all of them;
// loadedmetadata doesn't work right now for flash. player.one('timeupdate', handleLoad).one('loadedmetadata', handleLoad).one('loadeddata', handleLoad);
// Probably because of https://github.com/videojs/video-js-swf/issues/124 function handleLoad() {
// 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) player.off('timeupdate', handleLoad).off('loadedmetadata', handleLoad).off('loadeddata', handleLoad);
var handleSeekEvent = 'loadeddata';
if(this.player_.techName_ !== 'Youtube' && this.player_.preload() === 'none' && this.player_.techName_ !== 'Flash') {
handleSeekEvent = 'timeupdate';
}
player
.setSourcesSanitized(sources, label, customSourcePicker || settings.customSourcePicker)
.one(handleSeekEvent, function() {
player.currentTime(currentTime); player.currentTime(currentTime);
player.handleTechSeeked_(); player.handleTechSeeked_();
if(!isPaused){ if (!isPaused) {
// Start playing and hide loadingSpinner (flash issue ?) // Start playing and hide loadingSpinner (flash issue ?)
player.play().handleTechSeeked_(); player.play().handleTechSeeked_();
} }
player.trigger('resolutionchange'); player.trigger('resolutionchange');
}); }
return player; return player;
}; };
@ -192,20 +202,20 @@
* Returns grouped sources by label, resolution and type * Returns grouped sources by label, resolution and type
* @returns {Object} grouped sources: { label: { key: [] }, res: { key: [] }, type: { key: [] } } * @returns {Object} grouped sources: { label: { key: [] }, res: { key: [] }, type: { key: [] } }
*/ */
player.getGroupedSrc = function(){ player.getGroupedSrc = function () {
return this.groupedSrc; return this.groupedSrc;
}; };
player.setSourcesSanitized = function(sources, label, customSourcePicker) { player.setSourcesSanitized = function (sources, label, customSourcePicker) {
this.currentResolutionState = { this.currentResolutionState = {
label: label, label: label,
sources: sources sources: sources
}; };
if(typeof customSourcePicker === 'function'){ if (typeof customSourcePicker === 'function') {
return customSourcePicker(player, sources, label); return customSourcePicker(player, sources, label);
} }
player.src(sources.map(function(src) { player.src(sources.map(function (src) {
return {src: src.src, type: src.type, res: src.res}; return { src: src.src, type: src.type, res: src.res };
})); }));
return player; return player;
}; };
@ -216,9 +226,9 @@
* @param {Object} b - source object with res property * @param {Object} b - source object with res property
* @returns {Number} result of comparation * @returns {Number} result of comparation
*/ */
function compareResolutions(a, b){ function compareResolutions(a, b) {
if(!a.res || !b.res){ return 0; } if (!a.res || !b.res) { return 0; }
return (+b.res)-(+a.res); return (+b.res) - (+a.res);
} }
/** /**
@ -226,13 +236,13 @@
* @param {Array} src Array of sources * @param {Array} src Array of sources
* @returns {Object} grouped sources: { label: { key: [] }, res: { key: [] }, type: { key: [] } } * @returns {Object} grouped sources: { label: { key: [] }, res: { key: [] }, type: { key: [] } }
*/ */
function bucketSources(src){ function bucketSources(src) {
var resolutions = { var resolutions = {
label: {}, label: {},
res: {}, res: {},
type: {} type: {}
}; };
src.map(function(source) { src.map(function (source) {
initResolutionKey(resolutions, 'label', source); initResolutionKey(resolutions, 'label', source);
initResolutionKey(resolutions, 'res', source); initResolutionKey(resolutions, 'res', source);
initResolutionKey(resolutions, 'type', source); initResolutionKey(resolutions, 'type', source);
@ -245,7 +255,7 @@
} }
function initResolutionKey(resolutions, key, source) { function initResolutionKey(resolutions, key, source) {
if(resolutions[key][source[key]] == null) { if (resolutions[key][source[key]] == null) {
resolutions[key][source[key]] = []; resolutions[key][source[key]] = [];
} }
} }
@ -260,7 +270,7 @@
* @param {Array} src Array of sources sorted by resolution used to find high and low res * @param {Array} src Array of sources sorted by resolution used to find high and low res
* @returns {Object} {res: string, sources: []} * @returns {Object} {res: string, sources: []}
*/ */
function chooseSrc(groupedSrc, src){ function chooseSrc(groupedSrc, src) {
var selectedRes = settings['default']; // use array access as default is a reserved keyword var selectedRes = settings['default']; // use array access as default is a reserved keyword
var selectedLabel = ''; var selectedLabel = '';
if (selectedRes === 'high') { if (selectedRes === 'high') {
@ -269,28 +279,28 @@
} else if (selectedRes === 'low' || selectedRes == null || !groupedSrc.res[selectedRes]) { } else if (selectedRes === 'low' || selectedRes == null || !groupedSrc.res[selectedRes]) {
// Select low-res if default is low or not set // Select low-res if default is low or not set
selectedRes = src[src.length - 1].res; selectedRes = src[src.length - 1].res;
selectedLabel = src[src.length -1].label; selectedLabel = src[src.length - 1].label;
} else if (groupedSrc.res[selectedRes]) { } else if (groupedSrc.res[selectedRes]) {
selectedLabel = groupedSrc.res[selectedRes][0].label; selectedLabel = groupedSrc.res[selectedRes][0].label;
} }
return {res: selectedRes, label: selectedLabel, sources: groupedSrc.res[selectedRes]}; return { res: selectedRes, label: selectedLabel, sources: groupedSrc.res[selectedRes] };
} }
function initResolutionForYt(player){ function initResolutionForYt(player) {
// Map youtube qualities names // Map youtube qualities names
var _yts = { var _yts = {
highres: {res: 1080, label: '1080', yt: 'highres'}, highres: { res: 1080, label: '1080', yt: 'highres' },
hd1080: {res: 1080, label: '1080', yt: 'hd1080'}, hd1080: { res: 1080, label: '1080', yt: 'hd1080' },
hd720: {res: 720, label: '720', yt: 'hd720'}, hd720: { res: 720, label: '720', yt: 'hd720' },
large: {res: 480, label: '480', yt: 'large'}, large: { res: 480, label: '480', yt: 'large' },
medium: {res: 360, label: '360', yt: 'medium'}, medium: { res: 360, label: '360', yt: 'medium' },
small: {res: 240, label: '240', yt: 'small'}, small: { res: 240, label: '240', yt: 'small' },
tiny: {res: 144, label: '144', yt: 'tiny'}, tiny: { res: 144, label: '144', yt: 'tiny' },
auto: {res: 0, label: 'auto', yt: 'auto'} auto: { res: 0, label: 'auto', yt: 'auto' }
}; };
// Overwrite default sourcePicker function // Overwrite default sourcePicker function
var _customSourcePicker = function(_player, _sources, _label){ var _customSourcePicker = function (_player, _sources, _label) {
// Note that setPlayebackQuality is a suggestion. YT does not always obey it. // Note that setPlayebackQuality is a suggestion. YT does not always obey it.
player.tech_.ytPlayer.setPlaybackQuality(_sources[0]._yt); player.tech_.ytPlayer.setPlaybackQuality(_sources[0]._yt);
player.trigger('updateSources'); player.trigger('updateSources');
@ -302,9 +312,9 @@
player.tech_.ytPlayer.setPlaybackQuality('auto'); player.tech_.ytPlayer.setPlaybackQuality('auto');
// This is triggered when the resolution actually changes // This is triggered when the resolution actually changes
player.tech_.ytPlayer.addEventListener('onPlaybackQualityChange', function(event){ player.tech_.ytPlayer.addEventListener('onPlaybackQualityChange', function (event) {
for(var res in _yts) { for (var res in _yts) {
if(res.yt === event.data) { if (res.yt === event.data) {
player.currentResolution(res.label, _customSourcePicker); player.currentResolution(res.label, _customSourcePicker);
return; return;
} }
@ -312,11 +322,11 @@
}); });
// We must wait for play event // We must wait for play event
player.one('play', function(){ player.one('play', function () {
var qualities = player.tech_.ytPlayer.getAvailableQualityLevels(); var qualities = player.tech_.ytPlayer.getAvailableQualityLevels();
var _sources = []; var _sources = [];
qualities.map(function(q){ qualities.map(function (q) {
_sources.push({ _sources.push({
src: player.src().src, src: player.src().src,
type: player.src().type, type: player.src().type,
@ -327,7 +337,7 @@
}); });
player.groupedSrc = bucketSources(_sources); player.groupedSrc = bucketSources(_sources);
var chosen = {label: 'auto', res: 0, sources: player.groupedSrc.label.auto}; var chosen = { label: 'auto', res: 0, sources: player.groupedSrc.label.auto };
this.currentResolutionState = { this.currentResolutionState = {
label: chosen.label, label: chosen.label,
@ -339,21 +349,21 @@
}); });
} }
player.ready(function(){ player.ready(function () {
if( settings.ui ) { if (settings.ui) {
var menuButton = new ResolutionMenuButton(player, settings); var menuButton = new ResolutionMenuButton(player, settings);
player.controlBar.resolutionSwitcher = player.controlBar.el_.insertBefore(menuButton.el_, player.controlBar.getChild('fullscreenToggle').el_); player.controlBar.resolutionSwitcher = player.controlBar.el_.insertBefore(menuButton.el_, player.controlBar.getChild('fullscreenToggle').el_);
player.controlBar.resolutionSwitcher.dispose = function(){ player.controlBar.resolutionSwitcher.dispose = function () {
this.parentNode.removeChild(this); this.parentNode.removeChild(this);
}; };
} }
if(player.options_.sources.length > 1){ if (player.options_.sources.length > 1) {
// tech: Html5 and Flash // tech: Html5 and Flash
// Create resolution switcher for videos form <source> tag inside <video> // Create resolution switcher for videos form <source> tag inside <video>
player.updateSrc(player.options_.sources); player.updateSrc(player.options_.sources);
} }
if(player.techName_ === 'Youtube'){ if (player.techName_ === 'Youtube') {
// tech: YouTube // tech: YouTube
initResolutionForYt(player); initResolutionForYt(player);
} }