Embedding a self hosted video

Q&A about the latest versions
Post Reply
Exposición
Posts: 78
Joined: Thu Jul 26, 2012 2:08 pm

Hi,

here comes my second question regarding videos in panoramas:

i want to embed a video in a html5 panorama, starting by clicking on a hotspot. the video should play inside the pano (if possible with video controls like play, pause,...) amd must be hosted on my own server.
how can i do that?

Thanks for helping!
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Of course you have already viewed this

http://ggnome.com/wiki/Using_the_Media_Editor
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
Exposición
Posts: 78
Joined: Thu Jul 26, 2012 2:08 pm

yes, i have viewed the media editor video. But i don't want to ad a pinned video. Sorry, may be i decribed nor exactly what i want to do:
I want to have hotspots in the panorama. If i click on it a box with my video should open. The video should be stored on my own server, not on youtube, vimeo or others. And is it possible to have control elements for that video like play, pause, timeline buttons?
Thanks!
User avatar
hum@no.id
Posts: 945
Joined: Sat Sep 09, 2006 10:35 pm
Location: Dark side of the Moon
Contact:

You can use any one you like embedded video player. In the panorama connected via iFrame

like as
http://mooplay.challet.eu/
http://mediaelementjs.com/
http://www.videojs.com/
http://dplayer.drivecast.eu/
http://openvideoplayer.sourceforge.net/html5video/

and other... many more
Gumir J | VR Panoramic Photographer | mobile: +77055717171 | skype: gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj
Exposición
Posts: 78
Joined: Thu Jul 26, 2012 2:08 pm

Thanks Hum for answering!

i'm afraid i don't understand, i'm no coding guy.
All i want is to upload a video (may be mp4 or another format). How can i install the player? May be there is a tutorial for that?

Thanks for patience!
Exposición
Posts: 78
Joined: Thu Jul 26, 2012 2:08 pm

After testing a little with the video.js HTML5 player i have following question:

I get two code blocks, one for the head:

Code: Select all

<link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.3/video.js"></script>
<style type="text/css">
  .vjs-default-skin .vjs-control-bar { font-size: 86% }
</style>
and one for the body of the html page:

Code: Select all

<video id="my_video_1" class="video-js vjs-default-skin" controls
 preload="auto" width="640" height="264" poster="my_video_poster.png"
 data-setup="{}">
 <source src="my_video.mp4" type='video/mp4'>
 <source src="my_video.webm" type='video/webm'>
</video>
Is it correct to paste the head code into the head of the html page P2VR generates (by html editor)?

How to handle the body code? This is not a html page i could embed via iframe!
Please could anybody help?! I don't know about coding stuff!

Thanks!
User avatar
hum@no.id
Posts: 945
Joined: Sat Sep 09, 2006 10:35 pm
Location: Dark side of the Moon
Contact:

make HTML for this code

for example - video.html
include this page to panorama HTML5 via iframe
Gumir J | VR Panoramic Photographer | mobile: +77055717171 | skype: gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj
User avatar
Chu
Posts: 97
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

Exposición wrote:How to handle the body code?
I may be talking out of turn, and I haven't looked into self-hosting video embeds... yet!

...in terms of placing the code, i would be tempted (depending on your version of P2VR), to do the following:
  1. View your settings in P2VR
    Select the second 'FILE' tab (along the top)
    Select the second 'FILE' tab (along the top)
    screenshot_00096.png (19.61 KiB) Viewed 8732 times
  2. Note the 'Template Directory' setting - you may want to select it and COPY (Ctrl-C)
  3. Navigate to the corresponding directory from the note above, on your station (not by hitting the CHOOSE button within the settings above)
  4. Find the template that you are referencing in the Flash/HTML5 output settings - HTML tab
    Ensure that you are ticking Enable HTML, and select the preferred template (or duplicate)
    Ensure that you are ticking Enable HTML, and select the preferred template (or duplicate)
    screenshot_00098.png (32.39 KiB) Viewed 8732 times
  5. Make a copy of the .ggt (shows 'normal.ggt' above) file and rename it to something useful, such as MP4.ggt
  6. Edit the new .ggt file and include the snippets for your head and body in there
  7. Resave
  8. Reassign the template in the Flash/HTML5 output settings - HTML tab
  9. Create output file
Hopefully that should help
Using:
Pano2VR PRO 6.1.15 pro 64bit
build 18116/5.12.2

Windows 10 x64
Human Brain v1.3

Image

est.1971
Exposición
Posts: 78
Joined: Thu Jul 26, 2012 2:08 pm

Thanks Hum and Chu!

I have testet Hums way by embeding the video in a html page. Works fine! Thanks!
But now i have another "problem": All content within an iframe has a thin white line on the left border of the iframe. Look here:
screen.png
screen.png (501.61 KiB) Viewed 8714 times
The html page itself is absolutly borderless. It seems to be a problem of Pano2VR because the map iframe has the same issue.
Is this a knowen issue? Any idea to correct that?
User avatar
Chu
Posts: 97
Joined: Tue Jan 10, 2012 1:59 pm
Location: London, UK
Contact:

Exposición wrote:Thanks Hum and Chu!
No probs
Exposición wrote:Any idea to correct that?
CSS issue perhaps? Something like:

Code: Select all

iframe {border: none 0;}
Using:
Pano2VR PRO 6.1.15 pro 64bit
build 18116/5.12.2

Windows 10 x64
Human Brain v1.3

Image

est.1971
Exposición
Posts: 78
Joined: Thu Jul 26, 2012 2:08 pm

I solved my problem. For the text box was the background still activated.
Thanks again for your help!
Post Reply