Popup Video in Panoramas Using Pano2VR5 beta

Q&A about the latest versions
Post Reply
aambrose
Posts: 74
Joined: Wed Sep 10, 2008 9:44 pm

I'm sure this has been discussed somewhere but I can't seem to find how to do it. I'm using Pano2VR5 beta with Tour Browser. I would like to create hotspots within panoramas in a tour that when clicked will open a video (not embedded YouTube, Vimeo, etc.) within a window with player controls such as play, pause, mute, etc. I would also like to be able to close the window. I know how to pin videos to panoramas and I know how to embed videos using embed code from YouTube, Vimeo, etc. Can someone please point me to a solution for embedding popup videos like this? Thank you!
Tony
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi aambrose,
There will be a way where you drop a video in using video mode then access it through the skin as a popup.
But for now you just have to embed the video in an HTML page for the HTML5 output. Then use an iframe in a text box to display it.

Example: The video file: short_tb.mp4

Open an basic text editor and copy in:

Code: Select all

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5 Video</title>
</head>
     <body>
           <div style="display:block; float:left; margin: 0px 0px 0px 0px; position: absolute; left: 0px; top: 0px;">
                 <video width="100%" height="100%" controls="controls" autoplay="autoplay">
                 <source src="short_tb.mp4" type="video/mp4" />

                 Your browser does not support the video tag.
                 </video>
           </div>
   </body>
</html>

Now save as video.html.
Now you can put the HTML page and MP4 video in a folder, lets call it video.
Now all you have to do is is add an iframe to a text box:

Code: Select all

<iframe width="640" height="480" src="video/video.html" frameborder="0"></iframe>
Just make sure that the text box and iframe size are the same.

You can have a button or hotspot that will on click show the text box, then also have a set text action to set the iframe to play the video.
You will need another set text action to "unload" the video as well as hide the text box.
Otherwise you will still hear the video audio when its hides.

You can of course use your own titles, so the MP4 can be called anything just as long as the HTML page can find it. Same for all other file names in this example.

Regards,
Hopki
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/
aambrose
Posts: 74
Joined: Wed Sep 10, 2008 9:44 pm

Thanks Hopki. I will try this!
Tony
aambrose
Posts: 74
Joined: Wed Sep 10, 2008 9:44 pm

Hi Hopki,
That worked but I have a couple of questions.

1. I tried it a couple of days ago and the video player had an icon to view the video full screen but now that icon is gone. Not sure why it disappeared. If I right-click the video and choose "Open video in new tab", the video opens in a new tab with the full screen icon.

2. Also, the video doesn't fill the textbox. There's a bit of space on the right and the bottom. I have the textbox sized to the correct ratio for the video at 600 x 338.

Thanks!
Tony
aambrose
Posts: 74
Joined: Wed Sep 10, 2008 9:44 pm

Update:

Still cannot get the full screen icon to appear unless I right-click the video and choose "Open video in new tab". :(

In order to get the video to fit in the textbox without scrollbars apprearing, the iframe width and height must be at least 4 pixels greater than the video width and height defined in the HTML. Also, the textbox width and height must be at least 5 pixels greater than the iframe width and height. For example, if video size is defined in HTML as 550 x 288 then iframe must be at least 554 x 292 and textbox must be at least 559 x 297.
Tony
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Tony,
In the iFrame add the fullscreen tag:

Code: Select all

<iframe width="640" height="480" src="video/video.html" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder= "0"></iframe>
Regards,
Hopki
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/
aambrose
Posts: 74
Joined: Wed Sep 10, 2008 9:44 pm

Worked! Thanks Hopki!
Tony
FPivot
Posts: 5
Joined: Tue Dec 15, 2015 2:42 pm

I looked at this post because I was trying to achieve something similar. I tested it and found it very useful.
But I'd like to modify it a bit.
What would I have to do so that when I click on the hotspot, the video opens and plays in the default video player of the mobile device or computer (rather than in Pano2VR)?
Thanks :)

Fred.
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Fred,
Just use a URL link to the video source, so the MP4 or the YouTube page.
This should open a new browser window showing the video content.
Regards,
Hopki
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/
FPivot
Posts: 5
Joined: Tue Dec 15, 2015 2:42 pm

Thanks.
It worked.
:)
Post Reply