How To Display Video Between Two Scenes?

Anfänger

Donnerstag, 3. Dezember 2020, 17:21

How To Display Video Between Two Scenes?

I did a bit of searching but the topics I found didn't quite match up to what we are trying to achieve.
We have two scenes, one scene is Room A and the other scene is Room B.

We would like to display a video of the user "walking down a hallway" between the two rooms when the user clicks the hotspot to go from Room A to Room B.

In a perfect world, we would like the video to fill the krpano element of the browser. The video is a standard mp4 file.We have all the assets created,
I am just at a loss as to how to setup and code this series of events/triggers.

Does krpano have something like this "built in"? Or, should I maybe handle it through custom JavaScript where we display the video on hotspot click and then actual change scenes when the video completes?

Any insight is appreciated.

Thanks!

Zum Seitenanfang

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

Donnerstag, 3. Dezember 2020, 18:58

Just add a video plugin outside the scenes with keep="true".
Before loading next scene display the video plugin, load the next scene and when video is complete hide the video plugin.

Zum Seitenanfang

mclmki

Anfänger

Beiträge: 17

Donnerstag, 3. Dezember 2020, 19:10

Thank you very much, Jerome!
This makes complete sense and is fantastically simple and straightforward.
I will give this a try in the next day or so as I have moved on to other aspects of the project.
Thanks again!

Zum Seitenanfang

mclmki

Anfänger

Beiträge: 17

Freitag, 4. Dezember 2020, 17:03

I was able to implement your suggestion and it worked great!

Thank you!

I do have a couple related questions/observations on the end result:

At the end of the video, I use loadscene() to display the next scene. However, since the video is a layer, it does not cross fade into the next scene. Is there a way that the video layer can be "part of" the cross fade? It seems layers are "above" scenes?

I tried doing a tween() to fade the video out. But, I see the next scene still loading. I know loadscene() is suppose to have a completed callback, but I can't seem to get it to work.

Thanks again for the great suggestion!

Zum Seitenanfang

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

Freitag, 4. Dezember 2020, 17:06

don't wait the video to be finished to load the next scene, start the video and load the next scene just after, when video if finished tween video plugin alpha

Zum Seitenanfang

mclmki

Anfänger

Beiträge: 17

Freitag, 4. Dezember 2020, 17:36

Once again, such a simple and straightforward solution.

Works perfectly! Thank you!

Do you know if there is a way to have the layer "cover" the pano like you can use

	Quellcode
1	background-size: cover;

in CSS?

I am currently using

	Quellcode
1	width="100%" height="prop"

for the video layer. But, if the user resizes the browser to not a 16:9 shape, you can see the scene behind the video.

Thoughts?

Thanks again for the excellent and quick solutions!

Zum Seitenanfang

jeromebg

Profi

Beiträge: 1 120

Wohnort: Angers - France

Beruf: 360 experiences creator

Freitag, 4. Dezember 2020, 17:57

You can use onresize event for that ;)

Something like

Quellcode

<events onresize="resize_video()" keep="true"/>
<action name="resize_video">
if(plugin[video].loaded,
div(screenratio, stagewidth, stageheight);
div(videoratio, plugin[video].width, plugin[video].height);
if(videoratio GT screenratio,set(plugin[video].width,100%);set(plugin[video].height,prop),set(plugin[video].width,prop);set(plugin[video].height,100%));
);
</action>

not sure about the .loaded thought, but give it a try

Zum Seitenanfang

mclmki

Anfänger

Beiträge: 17

Freitag, 4. Dezember 2020, 22:59

Yep, that logic makes complete sense.
Thanks again for all your help and suggestions!

Zum Seitenanfang

How To Display Video Between Two Scenes?

How To Display Video Between Two Scenes?

Quellcode

Quellcode

Quellcode

Ähnliche Themen