Resizing a video

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

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

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!

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

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.

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?

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.

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

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.

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

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.

Within Studio unclear…
I can crop the size of the video on Joyoshare Media Cutter though. Simply open the editor and drag the fram will do.

If you want to have a complete visual overview of how will the video’s sizes look like before starting the Preview, you need to do the following:

  • Open the Video Player symbol from the right Symbol definitions tab
  • Open the show script
  • Edit line 111 as follows: Z.tagCall("resizer", "scale", [1, 1, 1]);

This turns off the automatic aspectRatio changes

  • Now in your project, set the precise aspect ratio of the video you want to display (in Properties -> Scale)

Note, that this will deform the look of the video player’s controls. I’m using this for the videos, which have the controls hidden.

I use the TunesKit AceMovi, if you have no video editor, it would great for you, it’s easy-to-use to creat and edit high-quality video, it can help you to resize a video efficiently.

There are not so many video editors that might satisfy you. I think sometimes you can try to be a little creative. I post some of my videos on twitch and then edit them with my favorite joincombo.com. Somebody might not like this method, so try to find videos on YouTube of people who know much about video editors; I think their suggestions will always be the best as they are not just talking about a product but showing it off and explaining how it works. Their videos are not just an ad but also full instruction. I hope my idea will be useful for you, don’t be afraid and try a lot to find what you need.