Download and unzip the attached project. Publish out the project then in the output folder add a sub folder called "video".
Now copy the short_tb.mp4 video into this.
What you will see is two hotspots and two buttons that open a local video, the mp4 and also a Youtube video, the Pano2VR 5 Promo video.
Please note for the externally hosted video I'm using an iframe and for the local mp4 video a video tag.
How this works:
Im using variables and logic blocks.
As I have two videos I have set a numbered variable called "video" and its init value is 0.
Open the skin.
If you click in an empty part of the skin you will see the variable iv set, video, Number, 0.
Looking to the left and the tree you will see I have made a video_popup which has a text box, this has the ID popup_video.
If you select the text box, "popup_video" you will see there is a variable set next to the text area, hi lighted in orange.
If you open this you will see three possible outcomes.
0 =
no text
1 =
Code: Select all
<video width="100%" height="100%" controls autoplay >
<source src="video/short_tb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Code: Select all
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/evh3ipa7GNM?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>Now we have set variables we can control all the elements with them, the popup, screen tint and close button.
So looking at the close button properties, starting with visible it has a logic block that states it will be visible if the variable value is either 1 or 2. If you had more videos you would extend the logic and add, or 3, or 4 etc. The Stop button has the action set variable value to 0 to stop the video.
The screen tint has the same variable value for visible as the close button.
The video_popup also has the same logic block for its viability.
So just setting a variable value of 0 will cause all the elements to hide and the text box to clear the text, thus unloading the video.
The two play buttons, the one on the left plays the local video and the one on the right plays the YouTube video.
So all they have is the action to set the variable vale to either 1 or 2.
Point hotspots.
In the skin editor you will see a hotspot template with the ID ht_video.
Now to add the required action you need to select expert mode and then enter:
Source: Mouse Click
Action: Set Variable Value
Variable Name: video
Operation: 0
Value: $hd
The reason for this is because the variable number will be stored in the point hotspot modes description text box..
That said go to the hotspot mode and select the point hotspot on the right.
The ID is not important
Skin-ID should be the ID of the hotspot template so ht_video
Title, speaks for itself
Description, is 1
Select the next point hotspot and you will see the title and description has changed, now the description is 2.
This will set the variable value to 1 or 2 depending on which hotspot has been clicked.
Things to note, the video popup is sized using percentage so its fully responsive.
Both iframe and video tags use 100% so will resize to the scaling window.
All the videos are entered in the same place, the text box logic block.
This makes management very easy.
Regards,
Hopki