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

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

@ -1,8 +1,17 @@
/// <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 */
@ -42,7 +51,7 @@
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
@ -66,6 +75,7 @@
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 () {
@ -93,10 +103,14 @@
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.updateLabel = function () {
var label = this.player_.controlBar.resolutionSwitcher.getElementsByClassName('vjs-resolution-button-label')[0];
label.innerHTML = this.player_.currentResolutionState.label;
};
ResolutionMenuButton.prototype.buildCSSClass = function () { ResolutionMenuButton.prototype.buildCSSClass = function () {
return MenuButton.prototype.buildCSSClass.call(this) + ' vjs-resolution-button'; return MenuButton.prototype.buildCSSClass.call(this) + ' vjs-resolution-button';
}; };
MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton); videojs.registerComponent('ResolutionMenuButton', ResolutionMenuButton);
/** /**
* Initialize the plugin. * Initialize the plugin.
@ -160,23 +174,19 @@
// 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) {
@ -184,7 +194,7 @@
player.play().handleTechSeeked_(); player.play().handleTechSeeked_();
} }
player.trigger('resolutionchange'); player.trigger('resolutionchange');
}); }
return player; return player;
}; };