VideoBox Src change, depending on Form Factor

Ask the community
1

I am creating a splash page, wherein there’s a video playing on autoplay. I am currently using a VideoBox to play this video on a loop, and the video is set to play automatically. I’ve used the interface to select the video I want to play, and the no-code editor so it plays automatically.

Now I am writing code so that when the form factor switches to mobile, I want the VideoBox to play a totally separate video. The problem is that because using the no-code I selected a certain file, this video is the only video that will play, even if the code understands that it’s supposed to be switching files.

What can I do?

Here is my code —

import wixWindow from 'wix-window';
import wixWindowFrontend from 'wix-window-frontend';
// ...
wixWindow.openLightbox("LightboxName");
$w.onReady(function have() {
    let videoSrc = $w("#myVideo").src;
    $w("#myVideo").
    console.log("Here is the video: " + videoSrc);
    let desktopvideo = "wix:video://v1/f028b0_2fd63df8d642414e8db86d28def86837/_#posterUri=f028b0_2fd63df8d642414e8db86d28def86837f000.jpg&posterWidth=1920&posterHeight=1080";
    let mobilevideo = "wix:video://v1/f028b0_76d1a867cdbf4914b74470abf9f7f9a0/_#posterUri=f028b0_76d1a867cdbf4914b74470abf9f7f9a0f000.jpg&posterWidth=1920&posterHeight=1080";
    let formFactor = wixWindowFrontend.formFactor;
    console.log("Form Factor: " + formFactor)
    if (formFactor === "Desktop"){
        videoSrc = desktopvideo;
    } else if(formFactor === "Mobile"){
        videoSrc = mobilevideo;
    }
    console.log("Here is the video: " + videoSrc);
    
});
1 Like
2

The code above has an issue where it’s not setting the $w("#myVideo").src. You’ll want to change the if/else statements:

    if (formFactor === "Desktop"){
        $w("#myVideo").src = desktopvideo;
    } else if(formFactor === "Mobile"){
        $w("#myVideo").src = mobilevideo;
    }

Also note that this code doesn’t consider the "Tablet" value that formFactor can also have. May want to adjust to account for that as well.

Lastly if this doesn’t entirely fix it maybe disable the autoplay in the no code editor and control it directly in code instead?

1 Like
3

Great advice anthony! I was wondering how to specify the quality of the video src depending on desktop or mobile?? Currently the videobox seems to downgrade the quality to 360p or 480p making it look very blurry.

4

Apologies for the delay. I’m not sure if this will work but there is a way to set video width and height, perhaps this will help influence the playback quality?

A video from the Media Manager. URL Format: wix:video://v1/<video_uri>/<filename>#posterUri=<poster_uri>&posterWidth=<width>&posterHeight=<height>

1 Like