Compatibility fix VideoJs 7+ (handleTechSeeked_, currentResolution, change label, hidden)

[BaNru]

VideoJS 7+
videojs-resolution-switcher - 2015-7-26
Modified by Pierre Kraft and Derk-Jan Hartman

Error after switching quality

VIDEOJS: ERROR: TypeError: player.play(...).handleTechSeeked_ is not a function
at Player. (videojs-resolution-switcher.js:184)

This is probably due to the exclusion of the flash from the kernel.
https://blog.videojs.com/video-js-removes-flash-from-core-player/

My fix
Find strings

player
  .setSourcesSanitized(sources, label, customSourcePicker || settings.customSourcePicker)
  .one(handleSeekEvent, function() {
    player.currentTime(currentTime);
    player.handleTechSeeked_();
    if(!isPaused){
      // Start playing and hide loadingSpinner (flash issue ?)
      player.play().handleTechSeeked_();
    }
    player.trigger('resolutionchange');
  });

And replace with if you do NOT need FLASH support

player
  .setSourcesSanitized(sources, label, customSourcePicker || settings.customSourcePicker)
  .one(handleSeekEvent, function() {
    player.currentTime(currentTime);
    if(!isPaused){
      player.play();
    }
    player.trigger('resolutionchange');
  });

Or replace if you need FLASH support

player
  .setSourcesSanitized(sources, label, customSourcePicker || settings.customSourcePicker)
  .one(handleSeekEvent, function() {
    player.currentTime(currentTime);
    if(player.handleTechSeeked_()){
      player.handleTechSeeked_();
      if(!isPaused){
        // Start playing and hide loadingSpinner (flash issue ?)
        player.play().handleTechSeeked_();
      }
    }else{
      if(!isPaused){
        player.play();
      }
    }
    player.trigger('resolutionchange');
  });

[BaNru]

next error

TypeError: Cannot read property 'currentResolution' of null

Find

ResolutionMenuItem.prototype.update = function(){
  var selection = this.player_.currentResolution();
  this.selected(this.options_.label === selection.label);
};

Replace

ResolutionMenuItem.prototype.update = function(){
  if(!this.player_)return false;
  var selection = this.player_.currentResolution();
  this.selected(this.options_.label === selection.label);
};

[BaNru]

next error: label does not change after changing quality
The decision is very bad. I did not find another option to access the button to change the values. But it works.

Add last string

ResolutionMenuItem.prototype.update = function(){
      if(!this.player_)return false;
      var selection = this.player_.currentResolution();
      this.selected(this.options_.label === selection.label);
      this.player_.controlBar.resolutionSwitcher.lastElementChild.textContent = selection.label;
    };

[BaNru]

next error: the menu is blocked (hidden) after the first choice of quality.
The problem appeared after the update release VIDEO v7.4.0

vjs-lock-showing class gets removed from menu when no longer hovering on menu-button. (#5465) (
58f638e), closes #1690

Added hiding / showing items on rows #336 and #358, after which the menu started to block.

Decision
The solution is similar to the previous one, not the best

Add new last string

ResolutionMenuItem.prototype.update = function(){
  if(!this.player_)return false;
  var selection = this.player_.currentResolution();
  this.selected(this.options_.label === selection.label);
  this.player_.controlBar.resolutionSwitcher.lastElementChild.textContent = selection.label;
  this.player_.controlBar.resolutionSwitcher.children[1].classList.remove('vjs-hidden');
};

After these edits, errors were no longer seen. The plugin works well with the VideoJS 7+

PS Sorry for my googletranslate

PPS https://github.com/BaNru/videojs-resolution-switcher/blob/master/lib/videojs-resolution-switcher.js

[pythonsan]

Very Good :-)

[masarinetwork]

My Case not work because:

// register the plugin
videojs.registerPlugin('videoJsResolutionSwitcher', videoJsResolutionSwitcher);
})(window, videojs.default);

Change to

// register the plugin
videojs.registerPlugin('videoJsResolutionSwitcher', videoJsResolutionSwitcher);
})(window, videojs);

On line 69

videojs.addClass(staticLabel, 'vjs-menu-icon');

Change to

videojs.dom.addClass(staticLabel, 'vjs-menu-icon');

[JasonCheng58]

Thank you