Multiple Embedded Video with static png background


#1

I am a new user seeking first use assistance. I have looked at the videos and tutorials and some forum discussions. I have now reached a point where I need some assistance mainly with scoping and calling of functions.

Regarding embedded vs linked via videoplayer. I do not have a server and I would prefer not to load my videos up onto you tube etc. I believe this leaves me with the embedded video option - please correct me if I am wrong.

My first project:

Has a total of 10 short video clips each approximately <5mb in size.
Participants will first zap a poster
The first video should autoload and run
The second to ninth videos- the user can optionally select one video and watch at a time.

My experimentation:
I have uploaded a useful show and tell OCT 17 from margaux (team zapper) “Set an embedded video to play full screen in Studio”. Which appears to solve the screen layout etc.

To do the second to ninth videos, I have experimented with a png file as a background and put one icon overlaying for each person on the images.

I am getting caught up with scope and calling of show and hide events.

What would be ideal for my learning curve:
I would greatly appreciate a quick embedded example that has the background png, 1 autoload video and 3 on-click icons to trigger 3 other embedded videos. As these videos end, I want to return back to the png background file to allow the user to select another icon.

I would also like if possible to use a single script file and make calls from that script file rather than have multiple script files. Is that possible?

Other technical issue: Load time.

Thanks once again to the Zap team. I look forward to a long association.

Regards

K


#2

Hi @kristin.carson-chahh,

One thing I would bear in mind when using multiple locally hosted videos is the end download size of the experience. We aim to keep them below 5MB, which can be tricky when working with internally saved videos.

Firstly you can follow the Video in the 3D view docs to learn how video can be added to a scene and played. If you want a video to play as soon as the experience is run then you can add the .start() function to a ready event (right-click root node > script > ready).

// Runs when ready occurs on the parent node
parent.on("ready", () => {
	
   // Play the video
    Video.start();
});

You can use controllers and states to determine which video or background is active and visible. As only one state can be active at a time, you setting it up like this will mean that only one video will ever be shown at a time.

image

You can then listen for a finish event on all of the videos, so when they have finished, activate the background or default state where the user can then choose which video to watch.

// Runs when finish occurs on the Video_mp4 node
symbol.nodes.Video_mp4.on("finish", () => {

	// Activate the Background/Default state
	symbol.controllers.Video_Controller.elements.Background.activate();
});

Give it a go and let me know if you would like me to clarify any of this. :slight_smile:

Thanks.

George


#3

Thanks George for your reply. I am on a steep learning curve, therefore my response may be way off as I may not be grasping clearly your comments.

First regarding file size. Each of my videos are 5 mb in size. The reference you gave me at the bottom suggested I could call each mp4 into the project as I needed them rather than move them across to the hierarchy - I could not get this to work. I am also having significant trouble trying to hide and show the background programmatically: Here is the code for the pointerdown event for one png file (Pets_png) with a related mp4 video.

const display_shown = symbol.controllers.display.elements.shown;
const display_hidden = symbol.controllers.display.elements.hidden;
const Background_png = symbol.nodes.Background_png;
const Pets_png = parent;

parent.on(“pointerdown”, (e) => {

// Hide the Background
Background_png.visible (false);
Pets_png.visible (false);

//Video
const Pets_mp4 = symbol.nodes.Pets_mp4;
const videoPlane = symbol.nodes.videoPlane;

//Set the screen aspect ratio
let screenAspectRatio = 1;
let videoAspectRatio = 1;

function updateVideoSizing() {
if (screenAspectRatio > videoAspectRatio) {
videoPlane.scale([videoAspectRatio,1,1]);
}else{
videoPlane.scale([screenAspectRatio, screenAspectRatio/videoAspectRatio,1]);
}

}
// Start the video, control the screensize
Pets_mp4.start();
Pets_mp4.on(“aspectratio”, (ratio) = > {
videoAspectRatio = ratio;
updateVideoSizing()
});

Z.screen.on(“resize”, (w, h) = > {
screenAspectRatio = w / h;
updateVideoSizing()
})

//On finish show the Background with the Pets icon
Pets_mp4.on(“finish”, () =>{
Background_png.visible(true);
Pets_png.visible(true);
})

})

George, I am getting confused because the steps you appear to be suggesting are non programming and are based on conforming to the controller which is resource hungry. I hade in mind using scripting without duplication i.e. using calls to functions. I envisaged have one code script file in the root rather than have separate script files for each png/video.

The aim is to have a single block of code that can be called that controls screen aspect ratio’s, a single block of code to call perhaps an if or case statement to control the clickable videos. It is possible I am missing something.

I sincerely appreciate your assistance

K


#4

What @George was meaning is that when the zapcode is scanned it downloads your code and plays it in the app. The size of your coding will affect your download time. Bigger file the longer download times. 5-10 mb file size is what is recommended. If you have 4 video files @ 5mb each your download would be over 20mb with everything. You are going to want to host your video files and stream them. The only time you wouldn’t is if the video file is very small.

As for the other coding your code isn’t right. I will try to make you a demo code. Right now my office has no power. (Looks like half of the city is out) so I dont know how soon I’ll get it up.

Steve


#5

Hi Steve,

Yes I thought that was the case about embedding mp4’s. i was thrown by the last segment on the guide George highlighted. I assume the implementation will therefore use video player and require a host. Ie:YouTube or own web server. Your comments also suggest that working with controllers significantly reduces need for Code and this reduces overhead which is why George suggested that route. On looking at Georges comments, I did not gain this impression - mainly because I was using lots of screen control code on each video pointer down event. What I am suspecting is I just need one or two lines of code and then use tick options on the controllers. I assume the onboard controllers can also control screen display or I can setup a screen display controller.

Looking forward to your example. It will be of immense value to see how an expert zapper structures it

I am most grateful to both h you and George providing this advice
K


#6

Sorry about getting this to you so late. After the power came back on we got hit with a lot of calls.
Looking back at what you asked for - 10 videos with the first one autoplaying. Then the backdrop photo with 3 play buttons for the first 3 videos. Then next 3 play buttons and so on.

Because of this you will need to do some coding to track if the first 3 buttons have been pressed and so on. If you didn’t need that you could have done it with less coding.

As for hosting videos the URL needs to link directly to a video file as opposed to one uploaded to a video hosting site such as Vimeo or YouTube. In my demo I used one of Zappar’s videos for Zapbox and my hosted videos for the Sipsmith comp.

The first played video is set up in the videoplayers properties under References and Video Url. The rest are under the Script code. I have all the coding in one place like you asked for.
You can edit the VideoFile line with your hosted file name.

Steve

Ps. To anyone trying to play my videos after Jan 2020 thay may not work but you can still get an idea from the coding.

Multiple Embedded Video Help.zpp (1.4 MB)


#7

Hi Steve,

Just had a look at your design and code. Thank you so much It is pretty much what I need to come to grips with the structure and understanding how the components interact.

I will have a decent look and absorb. Once again thank you for taking the time to do this. It is an excellent learning resource for this type of work.
Cheers
K


#8

Your welcome!

Steve


#9

Hi George and Steve,
Thank you once again for your assistance.
I have been working with the zpp Steve provided and gained much basis knowledge.

Steve, I decided to bring all the buttons under one group, thus I removed the case statements. I also added the Z.device.playFullscreenVideo onto the “VideoFile” pointerdown events to force full screen. For the autostart 1st video (parent.on) I could not get full screen implemented if I ran it through the Video Player menu, so I removed it from the menu and incorporated it into the parent.on script in the script file, allowing me to use Z.device.playFullScreenVideo. I assume this to be correct.

The backdrop, I am still having issues with screen aspect ratio. As it is embedded, I cannot find an option to make this respond like the Z.device.playFullScreenVideo option i.e. full screen, and I could not find an anchor option to ensure that the pointerdown event buttons are positioned appropriately on any device. They appear appropriate on my iPhone but I am not controlling aspect ratios. I also could not get the flexibility of Z.device.playFullScreenVideo orientation option (not that it would be useful in this situation)

I had a look at the UI controller instruction videos, but I could not see how I can anchor the background so that I did not get camera vision on the left and right sides.

Any ideas about handling the background other than via script?

K


#10

What your looking for is relativeTo Z.screenLeft or Z.screenRight.
UI Coordinate Systems

Steve