Plugin not working correct with the latest videoJs

[tonykor]

Plugin not working correct with videoJS v. 5.13.2

• after changing resolution while video playing, video stops and do not automatically starts, when preload=none

• button label not changed after changing source

[DerekZiemba]

In the player.currentResolution function find these lines:

// 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
// 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)
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);
player.one(handleSeekEvent, function () {
    player.currentTime(currentTime);
    player.handleTechSeeked_();
    if (!isPaused) {
        // Start playing and hide loadingSpinner (flash issue ?)
        player.play().handleTechSeeked_();
    }
    player.trigger('resolutionchange');
});     

And delete and replace it with:

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

Basically bypass all the logic it was doing and just use the 'loadedmetadata' event that the comment says flash has a problem with.

[UralZima]

Hello. Thanks for your solution, @DerekZiemba, it fix resolution change but not fix label update, when using dynamicLabel. Is there any way to fix it?

[DerekZiemba]

I decided to put in a pull request: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/81

Here's my fork: https://github.com/DerekZiemba/videojs-resolution-switcher/tree/master/lib

I ran auto format on it which converted the spaces to tabs, so GitHub highlights the whole file as being changed. If you want to compare my changes and ignore whitespace, add "&w=1" to the querystring.

Currently videojs(5.14.1) doesn't work properly on iOS 10 devices. You may find the following CSS useful if iOS controls are overlaying the videojs controls.

video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-panel-container,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-volume-slider-container,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-current-time-display,
video::-webkit-full-page-media::-webkit-media-controls-panel,
video::-webkit-media-controls-timeline-container,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-seek-back-button,
video::-webkit-media-controls-seek-forward-button,
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-rewind-button,
video::-webkit-media-controls-return-to-realtime-button,
video::-webkit-media-controls-toggle-closed-captions-button,
video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

This snippet may prove useful as well:

var vjsPlayer = videojs.getComponent('Player');
videojs.registerComponent('Player', videojs.extend(vjsPlayer, {
    constructor: function (videoElem, options, readyCallback) {
        vjsPlayer.call(this, videoElem, options, readyCallback);
        this.on('loadedmetadata', this.handleLoadMetadata.bind(this));  
        this.on('resolutionchange', this.handleLoadMetadata.bind(this));    
    },
    /** Forces videojs to show controls and display video length immediately */
    handleLoadMetadata: function(){
        this.player_.addClass('vjs-has-started');
        this.trigger('timeupdate');
    }
}));

Also be sure to disallow Fullscreen mode if you detect iOS 10. Once a user exits a fullscreen video iOS Safari will straight up freeze and require force close. I'm not sure if there has been any progress in this area. When I was working on this over a month ago, it was easiest to disallow it in favor of a custom "fullwindow" mode.

[UralZima]

@DerekZiemba, thank you very much for your contribution. It is sad, that the plugin is not updating anymore. It is very hard situation with video players, most of them are commercial sh*t and work normal only in premium mode. The only choice was videojs and this plugin. And even this plugin doesn't support such easy feature, like change quality when going fullscreen.

I am using 5.17 version of videojs. If you interested to have an updated fork of this project, you may also include somewhere such code:

player.on('fullscreenchange', function() {
    if(player.isFullscreen())
    {
        label='720p';
        if(screen.width>1280)
        label='1080p';              
        player.currentResolution(label);
    }
    else
        player.currentResolution('240p');
});

it is draft for creating such feature (hq fullscreen).

[computersrmyfriends]

Is this added on the fork? Any update on this?

The label isn't getting updated

`VIDEOJS: ERROR: TypeError: Cannot set property 'innerHTML' of undefined
    at constructor.ResolutionMenuButton.updateLabel (videojs-resolution-switcher.js:108)
    at Player.bound (video.js:22751)
    at HTMLDivElement.bound (video.js:22751)
    at HTMLDivElement.data.dispatcher (video.js:22542)
    at Object.trigger (video.js:22664)
    at Player.trigger (video.js:1522)
    at Player.handleLoad (videojs-resolution-switcher.js:196)
    at HTMLDivElement.bound (video.js:22751)
    at HTMLDivElement.func (video.js:22711)
    at HTMLDivElement.data.dispatcher (video.js:22542)`

[msdev20]

Just change below lines

ResolutionMenuItem.prototype.handleClick = function(event){
      MenuItem.prototype.handleClick.call(this,event);
      this.player_.currentResolution(this.options_.label);
};

with

ResolutionMenuItem.prototype.handleClick = function(event){
      MenuItem.prototype.handleClick.call(this,event);
      this.player_.currentResolution(this.options_.label);
      this.player_.trigger('updateSources');
};

to change button label