Video transition

Q&A about the latest versions
Post Reply
momocoua
Posts: 15
Joined: Wed Jan 11, 2017 12:55 pm

Hello everyone!
The question is how you can make a video transition. There are 4 flat pictures and you need to insert 4 video transitions between pictures. Scheme 1 picture (panorama) - hotspoint - video - next panorama.
Thank you for your reply.
momocoua
Posts: 15
Joined: Wed Jan 11, 2017 12:55 pm

If no one answers, then I explained poorly.
I will try again.
The task is the House, I want to make a 360-degree rotation.
object2vr tried a hard project.
I will think of doing this 4 facades of the house (total 120 frames (00,030,060,090 are the facades of the house.) + Video transition (001 to 030 is a video in mp4 (rotation of the house from 001-030).
The question is where you can watch a lesson or read a tutorial on how to do this. Or who already has a solution.

Thanks for the help and answers
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

HI,
It is achieved with a combination of a video element, text variable, and a hotspot.

The hotspot will have the video file name in the description text field, examples will be vid1.mp4, vid2.mp4, etc.
The point hotpot will have actions to set the URL to the text variable, as an example var_url.
It will also have the action to set the value to the video element using $(hd) so will set, vid.mp4 to the video element.
It will also have the action to show the video element.

The vided element will have the action, media end, open next panorama, and the URL will be the variable, $(*vat_url).
Followed by the action, Media end, hide, self.

This has been used many times for golf course tours, pano at the T, drone video down to the green, then pano of the green.
Of course, these tours also have a video to come back if required.
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
momocoua
Posts: 15
Joined: Wed Jan 11, 2017 12:55 pm

Thank you for your reply! I'll try tomorrow
mbb
Posts: 276
Joined: Mon Oct 19, 2009 11:42 pm

I am needing to do this now and am finding your explanation to be confusing to follow because of the way it is written. Can you please clarify? Thanks.
Hopki wrote: Thu Jan 28, 2021 4:27 pm
The hotspot will have the video file name in the description text field, examples will be vid1.mp4, vid2.mp4, etc.
The point hotpot will have actions to set the URL to the text variable, as an example var_url.
It will also have the action to set the value to the video element using $(hd) so will set, vid.mp4 to the video element.
It will also have the action to show the video element.

The vided element will have the action, media end, open next panorama, and the URL will be the variable, $(*vat_url).
Followed by the action, Media end, hide, self.
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Add all your videos to assets, for example, vid1.mp4, vid2.mp4
Add points hotspot to link all the nodes.
In the hotspot's description text field, enter the video that should be played for the transition from that hotspot, as an example vid2.mp4.

In the skin add a point hotspot, for example, add the component, Node Hotspot Silhouette.
It will already have the action to change nodes.

Then add a video element, make its size is 100% and set Alpha to 0.
Under CSS Styles Inner Element add the CSS:

Code: Select all

object-fit: cover; overflow: hidden;
This will expand the video to fit the screen, so make sure the action is in the centre of the screen.
Also, make sure the video element has Auto Play selected.
Now give the video element the action,

Media End, Change Element Alpha to 0, so it fades out.

Going back to the Hotspot Template you need to add the actions.
Mouse click, Set Value, assets/$(hd), video element.
Mouse Click, Set Element Alpha, 1 video element
Make sure these new actions are above the Open Next pano action.

So what will happen is on mouse click of the point hotspot the video element will show.
It will then start to play the video listed in the point hotspots description text field
And in the background, it will change nodes, which will be hidden by the video element.

When the video finishes, Media End, the video element will face out revealing the next node.
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
mbb
Posts: 276
Joined: Mon Oct 19, 2009 11:42 pm

Thanks very much for clarifying.

There are still issues however-

1. There is a momentary blank screen before the video loads (because of no preload?)
2. Your implementation has the video fade out but not fade in.

I am looking to have the video fade in as well as fade out, and also start without delay and not show the next node before the video has started fading in.

Is this possible?

EDIT: There was a setting to "optimize the video for network" in Apple compressor that has now reduced the initial loading delay, but there is still a short delay. I applied "Change alpha" to fade the video in which appears to be working (odd because I thought I tried that on a video element before and it did not work- would only fade in if starting alpha had a tiny value like ".01" instead of zero)
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi mbb,
As the node was changing at the same time as the video element was being called, I felt to show the video was better than fade it in as you may have seen the node change.
But if not and working then all good.
I tend to use Handbrake as this also has Optimise for web and also does a really good job of compressing the file without any noticeable quality change. Optimised for web puts the MP4 headers at the start of the video so starts streaming faster.
As an FYI, I also use the AC3 codec as this corrects any out of audio sync issues with Safari and iPhones/iPads.
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
mbb
Posts: 276
Joined: Mon Oct 19, 2009 11:42 pm

So basically, it's not possible to have a smooth seamless fade-in transition bidirectionally between videos and panoramas? That's unfortunate.
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

You can use a timer,
The attached project uses a modified Point Hotspot component and a timer.
The Hotspot transfers the node data to two variables in the skin and after a few seconds, the node will change when the timer deactivates.
The hotspot also fades in the video element.
The video element has the action to fade out the video after the media has ended.

So the node change is held until the video fades in.
Then while the video players the nodes change in the background.
When the video ends the video element will fade out revealing the new node.

Each point hotspot has the file name of the video it should play in its description text field.|
The attached project's videos are a little long but show how it works.
Regards,
Attachments
project.zip
(5.9 MiB) Downloaded 204 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
mbb
Posts: 276
Joined: Mon Oct 19, 2009 11:42 pm

I will give this a try, thank you!

Btw- I think "Video Transitions" would be a good candidate for new built-in feature for P2VR
Post Reply