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!

  • 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!

  • 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!

  • 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

    Code
    background-size: cover;

    in CSS?

    I am currently using

    Code
    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!

  • You can use onresize event for that ;)

    Something like

    Code
    <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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!