Hiding Poster Image

[muhammad-ali-confiz]

I am facing a problem in this plugin Whenever I change the resolution the poster image is displayed for some time. Is it possible to hide poster Image whenever I change resolution?

I tried to hide poster image in player initialization code in resolution click handler method.

// Change the source and make sure we don't start the video over        
player.src( player.availableRes[this.resolution] ).one( 'loadedmetadata', function() {

    player.currentTime( current_time );

    player.posterImage.hide();

    if ( ! is_paused ) { player.play(); }
});

[dominic-p]

Hmm, that's an interesting issue. I don't think simply hiding the poster image will solve the problem. In my testing, the poster image shows for a time, then the first frame of the video shows, and then play resumes.

Perhaps we could preload the video and metadata in some way when a resolution change is requested. Then, once the metadata has loaded we can switch the src for the video. I'll have to play around with it a bit. If you want to put together a pull request that could help.

Also, if you could put together a jsfiddle test case, that would help as well.

[dominic-p]

I implemented a preloading system in the most recent commit. Check it out to see if it solves your problem.

[dominic-p]

Had to rollback the preloading system. Did not work well in production testing. This issue is still unsolved.

[indieveed]

Any progress on this issue?

[dominic-p]

No new progress at this time. I'm open to suggestions on how to improve the UX during a resolution change.

[indieveed]

@dominic-p I was facing this problem and the only solution I came to was to put a canvas on top of the video. So before source changing I draw current frame to this canvas, then change source, wait for loading and then hide this canvas. So it looks like on youtube. Seems like youtube is a good example of UX.

[dominic-p]

That's an interesting solution. Thanks for sharing it. Maybe you could post a jsFiddle or something like that so we could see it in action? I'm curious to see how you implemented the CSS for the canvas element.

[indieveed]

@dominic-p currently I have stopped working on this feature, but I could try to make a fiddle this weekend. The css was very simple - absolute positioning and z-index: 1 to place it on top of the video. But there is a problem with fullscreen mode, because we need to calculate where to place canvas in this case. Otherwise it will be stretched to whole viewport. Right now I can post a diff:

diff --git a/static/source/libs/videojs/plugins/video-quality-selector.js b/static/source/libs/videojs/plugins/video-quality-selector.js
index c64d235..1f3a058 100644
--- a/static/source/libs/videojs/plugins/video-quality-selector.js
+++ b/static/source/libs/videojs/plugins/video-quality-selector.js
@@ -198,6 +198,8 @@
            available_res = { length : 0 },
            current_res,
            resolutionSelector,
+           canvas = document.createElement("canvas"),
+           ctx = canvas.getContext("2d"),

            // Split default resolutions if set and valid, otherwise default to an empty array
            default_resolutions = ( settings.default_res && typeof settings.default_res == 'string' ) ? settings.default_res.split( ',' ) : [];
@@ -325,20 +327,45 @@
                || ! player.availableRes
                || ! player.availableRes[target_resolution] ) { return; }

+           player.pause();
+
            // Make sure the loadedmetadata event will fire
            if ( 'none' == video_el.preload ) { video_el.preload = 'metadata'; }
+
+           // Hide bigPlayButton
+           player.bigPlayButton.hide();
+
+           canvas.width = player.width();
+           canvas.height = player.height();
+
+           ctx.width = canvas.width;
+           ctx.height = canvas.height;
+
+           ctx.drawImage(video_el, 0, 0, canvas.width, canvas.height);
+           canvas.style.zIndex = 1;
+           canvas.style.position = "absolute";
+           player.el().insertBefore(canvas, player.el().querySelector(".vjs-poster"));
+
+           // player.el().querySelector(".vjs-poster").style.backgroundImage = "url(" + canvas.toDataURL("image/jpeg") + ")";
+

            // Change the source and make sure we don't start the video over
-           player.src( player.availableRes[target_resolution] ).one( 'loadedmetadata', function() {
+           player.src( player.availableRes[target_resolution] )
+           .one( 'loadedmetadata', function() {

                player.currentTime( current_time );

+               if ( ! is_paused ) { player.play(); }
                // If the video was paused, don't show the poster image again
                player.addClass( 'vjs-has-started' );

-               if ( ! is_paused ) { player.play(); }
+               // Update the classes to reflect the currently selected resolution
+               player.trigger( 'changeRes' );
            });

+           player.one( 'loadeddata', function() {
+               canvas.remove();
+           });
            // Save the newly selected resolution in our player options property
            player.currentRes = target_resolution;

@@ -361,8 +388,7 @@
                }
            }

-           // Update the classes to reflect the currently selected resolution
-           player.trigger( 'changeRes' );
+
        };

        /*******************************************************************