Been asked how to have a popup video in HTML5 until we have a better way of doing it in the skin.
1) You need to get hold of some video converters, please see the start of this post: http://gardengnomesoftware.com/forum/vi ... =HandBrake
You need to output .mp4 and .webm video formats to play in the different web browsers.
+++Edit+++ Version 4.5 has now a built in video converter so you only need one format then process within Pano2VR for the other format.
2) Prepare an html page to embed the videos. The code for the page is:
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="464" height="352" controls="controls" autoplay="autoplay">
<source src="short_tb.mp4" type="video/mp4" />
<source src="short_tb.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</div>
</body>
</html>3) Open Pano2VR build and output your HTML5 project. Once created move the folder containing the videos and html page in the output folder if you have one. If not just make sure the file path to the video folder is correct in the hotspot editor.
4) Open the Hotspot Editor and place a hotspot where you want the video. In the Title add the name of the video, not file name. Then in the Target text box add the iframe code that will open the video html page. Example:
Code: Select all
<iframe width="800" height="600" src="videos/tb.html" frameborder="0"></iframe>5) Now open the attached project and copy the skins elements that makes up the popup video window and paste them in your own project.
Tweaking the skin: The video_player text box is what displays the video. It is important that it is the correct size of the video. In the case of the attached example the video is 464 x 352 so this text box needs to be the same size. Note that the iFrame code describes a larger window size, this is to stop scroll bars appearing in the video_player text box once published. The video_player text box has no text as it gets it from the Hotspot Editors Target text field and is dynamically written in using a place holder in the hotspot template with the ID hotspot.
This also writes the title of the video when the popup is opened. The Close button removes the text so unloading the video ready for the next.
Enjoy
Hopki
