Resizing a video


#1

Can anybody help?
I am able to import a video on Studio, but when it plays it is wider than I would like. Is there a way within Studio of altering the aspect ratio or cropping the size of the video?
Thanks


#2

Hi There,

Can you tell us what type of video you are trying to resize, is it a streaming video using the video player or an embedded OGV or MP4?

Thanks,
Mark


#3

Hi Mark,

It’s a streaming video. I’m able to embedded if that’s easier to change the size? Quite new to all this, so just following tutorials for instructions at the moment!


#4

The easiest way by far would be to edit the video in video editing software before bringing it into Studio though you can alter the scale of the plane that you are displaying the video on.

If using the video player symbol to stream video then the plane in question is ‘Plane0’ within the subsymbol, however this plane is scaled during runtime to the aspect ratio of the video. You will need to, in script, listen for the resize event fired by the video to know when this change has happened, in order to successfully resize the plane afterward.

This will, however, squash/stretch the video as it is simply rescaling it, there are no options for cropping video within Studio.

Thanks,
Mark


#5

thank you for explaining this @Mark -

Two questions:

  1. is it possible to write an example code that wil listen to this resize event and then makes it smaller again so that it matches the size i want it to be? Which should be the size of the videoplayer simbol.

  2. i can edit the video in editing software, but how do we know which size is the one being used in the AR ?

It’s too bad the docs don’t have real use case code examples on the events pages, that would make learning a lot easier! :slight_smile:


EDIT :

In the video symbol i literally took out the resizing code from the show script (going through this script is actually a good learning on how events and listeners are used :slight_smile: ).

myvid.on("aspectratio", (a : number) => {
        symbol.emit("video:aspectratio", a);
        Z.tagCall("resizer", "scale", [a, 1, 1]);
        seekLeftEdge.position([-0.8 * a, 0, 0]);
        seekRightEdge.position([0.8 * a, 0, 0]);
        seekBar.scale([0.8 * a, 0.003, 0]);
    });
    
    myvid.on("resize", (w: number, h: number) => {
        symbol.emit("video:resize", w, h);
         console.log("RESIZE! " + w.toString() + " x " + h.toString());
    });

this solved the resizing issue. It’s up to the creator (me) to at least make a proper videoframe in the AR experience. But saves a lot of work of re-doing what this snippet does.


#6

Hi, I am having the same issue when the video does not fit correctly in the video player when published. Where do I find the seekLeftEdge and seekRightEdge positions?


#7

is there an easy way to fit a 16:9 video in the Videoplayer symbol? For some reason after sizing my videoplayer to fit an area, the video that I linked is not scaled within the player and instead it just overlaps the whole player.


#8

Hi @vu.v.lam,

When a video player symbol is added to the scene, the specified video will be displayed within the height of the plane. The width however, will be scaled automatically to maintain the video’s original aspect ratio.

Hope this helps.

All the best,
Seb


#9

Thank you Sebastian, yes I was able to figure that out through painful trial and error. I wish the video player was an actual video container with options for normal controls similar to YouTube. It is very difficult to guestimate the position of the video when you have no preview or idea what your video size is.


#10

Hi @vu.v.lam,

Constraining the video to the plane’s dimensions would result in a squashed and/or stretched video, something which is, more often than not, unwanted behaviour. Maintaining the video’s original aspect ratio prevents this.

Also, a visual representation of the video’s dimensions within Studio is quite tricky, as Studio’s scripts are run at runtime i.e. when the experience is launched in the Zappar app. This means that the dimensions of the video at the specified URL aren’t known while in the Studio environment.

It’s definitely an interesting suggestion though, which I’ve mentioned to the team :slight_smile:

All the best,
Seb


#11

Hi Sebastian,

Instead of resizing the video on the container, I was hopping to keep its same aspect ratio within the video player if that makes any sense.