Create a selection at tour start

[Dreamfoot]

I want to create two buttons at tour start. One where a video can play (where the pre-recorded version of tour plays) and other button when clicked, the tour loads (The first pano autorotate starts). How can I do that?

[Hopki]

Hi Dreamfoot,
Need to check my understanding.
When you say video you mean an MP4 created from the Animation editor.
What should happen after the video has ended?
Will you make the video so that you are taken forward and backwards through the tour or from the last node jump to the first node or after it has finished, the video just hides?
Regards,

[Dreamfoot]

Hello Hopki,

The pre-recorded MP4 is not created in animation editor. It is a video custom produced by us and uploaded using videofile element.
We want that the tour doesn't load. It first asks for a selection with two buttons. Option 1- Check out Guided tour - which should play the video and option 2 - which should start the tour.
If button 1 is clicked means user has selected to view the video. After video completes, video popup should be closed and Again the first screen with selection should appear.

What I mainly need is
1. How to create popup with buttons (such that the tour doesn't autostart) and person can select what to do at start
2. In option 2 which Action to use for a button such that it can start the tour like it currently starts with autorotate etc. (like a normal tour)- https://vtour.cloud/p4gb21/5s0gqax6/?ts=1871038

[Hopki]

Hi Dreamfoot,
How I would go about this would be, first disable auto rotate as this will take up resources, this can be activated later.
Then in the skin add a rectangle that covers the skin, so 100% x 100%.
You would have two buttons which can be text boxes, one would change the Alpha for the rectangle so fade it out. Then have a Start Autorotate action, this button would be the one to see the tour.

The other button would show the video element, again 100% x 100% and also have a set value action to show the video.
You can use CSS in the video element, Styles Inner Element, to make the video fill the video element, note it will fit to the shortest edge.

Code: Select all

object-fit: cover; overflow: hidden;

As an option, you can also give the video element a deactivate action to hide and show the tour when done.
Regards,