Is there a way to add a higher resolution image before the video plays?

[ColoradoWebGuy]

Issue description:

Hi @nk-o,

First off, just wanted to say that this plugin is fantastic! Thanks for making this available, and all the hard work into maintaining it.

Here's my issue: I've been using the "Background Vimeo Parallax" lately, and I haven't figured out how to add my own high-res image before the video plays. I know I can change the thumbnail of the video under Vimeo, but when the page loads, the thumbnail gives the parallax a blurry effect.

Is there an easy way for me to make it so that this plugin can default to a higher resolution image before the plugin plays the video?

Version used: 1.10.3

Code to reproduce the issue (HTML blocks + JavaScript initialization)

<!-- Including Jarallax - Version 1.10.3 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.10.3/jarallax.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.10.3/jarallax-video.min.js" type="text/javascript"></script>

<!-- Background Vimeo Parallax -->
<div id="video-header" class="jarallax" data-jarallax-video="https://vimeo.com/256674898" data-speed="0.50">
</div>

<script>
    jarallax(document.querySelectorAll('#video-header'), {
        disableParallax: /iPad|iPhone|iPod|Android/,
        disableVideo: /iPad|iPhone|iPod|Android/
    });
</script>

[nk-o]

Hi @ColoradoWebGuy,

You can set the image like in simple jarallax. In this way the thumbnail will not be loaded from the Vimeo video.

<div id="video-header" class="jarallax" data-jarallax-video="https://vimeo.com/256674898" data-speed="0.50">
    <img class="jarallax-img" src="<background_image_url_here>" alt="">
</div>

And it will be parallaxed depending your data-speed value. If you don't need to parallax background image, I think you can only use custom script and work with video events (https://github.com/nk-o/video-worker#events).

[ColoradoWebGuy]

Ok, that's helpful. Thank you.

Unfortunately though, sometimes it still shows the vimeo thumbnail shortly after the jarallax-img before the video plays. Is there another way to keep the video from showing the thumbnail before playing?

[ColoradoWebGuy]

Until there's a better solution, here's a work around for me: (updated it as of 09/23/2020 to support versions greater than 1.10.7)

<script>
      var tmpCanInitParallax = jarallax.constructor.prototype.canInitParallax;
      jarallax.constructor.prototype.canInitParallax = function(callback) {
        // Intercept the set call for the video object and manually set the image
        var imageHandler = {
          set(target, prop, value) {
            target[prop] = value;
            if (prop == 'video') {
                value.videoImage = " ---- INSERT IMAGE URL TO REPLACE HERE ---- ";
                value.userEventsList['started'][0] = function () {

                    self.image.$default_item = self.image.$item;
                    self.image.$item = self.$video;

                    // set video width and height
                    self.image.width = self.video.videoWidth || 1280;
                    self.image.height = self.video.videoHeight || 720;
                    self.options.imgWidth = self.image.width;
                    self.options.imgHeight = self.image.height;
                    self.coverImage();
                    self.clipContainer();
                    self.onScroll();

                    // hide image
                    if (self.image.$default_item) {
                        self.css(self.image.$default_item, {
                            'transition': 'opacity .25s ease-in-out',
                            '-moz-transition': 'opacity .25s ease-in-out',
                            '-webkit-transition': 'opacity .25s ease-in-out',
                            'opacity': 1,
                        });
                        setTimeout(function () {
                            self.image.$default_item.style.opacity = 0;
                        }, 500);
                    }
                };
            }
            return true;
          }
        };

        // Use a proxy'ed JS object
        var self = new Proxy(this, imageHandler);
        self.defaultInitImgResult = true;
        self.image.bgImage = "url( ---- INSERT IMAGE URL TO REPLACE HERE ---- )";

        // save default user styles
        var curStyle = self.$item.getAttribute('style');
        if (curStyle) {
            self.$item.setAttribute('data-jarallax-original-styles', curStyle);
        }

        // set new background
        self.css(self.$item, {
            'background-image': self.image.bgImage,
            'background-position': 'center',
            'background-size': 'cover',
            'transition': 'opacity .25s ease-in-out',
            '-moz-transition': 'opacity .25s ease-in-out',
            '-webkit-transition': 'opacity .25s ease-in-out',
            'opacity': 1,
        });

        // Now actually call the method against the proxy object
        return tmpCanInitParallax.apply(self);
      }
</script>