Skip to main content

Working with 360º Video

Did you know Pano2VR has supported 360º video since 2007? Of course it’s not a full-fledged video software and we don’t try to be. But sometimes your clients ask for a bit more than just a few still panorama images. You can integrate the videos in a tour or create a full 360º video tour.
Pano2VR does not stitch the videos.

Create an Interactive 360º Video

  1. Add your stitched equirectangular 360º video panorama to Pano2VR by doing any of following:

    • Drag the video to File in the Input Video section of the Properties panel.
    • Click the folder icon next to File in the Input Video section to navigate to the video.
  2. (Optional) Add alternative files. Here, you would add different resolutions of the main video. This way, the browser will go through the list and play the first video it can play back.

  3. Add a poster frame.

  4. Set the default view.

  5. (Optional) Add a skin. You can use, for example, the Seekbar element so you can scrub through the video.

  6. Output it with HTML5.

Create a Poster Frame

The poster frame provides two things. Once it’s published, and the browser can’t play back the video, it will show the interactive still instead. The other purpose is that, to create a tour in Pro, a still image is needed to represent the video. Plus it helps to have a visual cue.

There are a few ways to create a poster frame. One way is to export a still frame from the stitcher or your NLE (Premiere, Final Cut Pro). Another way is to open the video in any player (QuickTime, VLC, etc.), make sure no controls are seen and take a screen shot.

On a Mac:

  1. Open the video in QuickTime Player.

  2. Click in the video to hide the controller and filename.

  3. Hold down SHIFT+CMD+4 and then hit the space bar.

  4. Add the frame to Pano2VR as a you would for any panorama.

Creating a 360º Video Tour

Pano2VR Pro

In this example, we will create a basic 2-node tour.

  1. In the Properties panel, add a 360º video in the Input Video section.

  2. (Optional) Add alternative files. Here, you would add different resolutions of the main video. This way, the browser will go through the list and play the first video it can play back.

  3. Add a still image to represent the video. This can be a frame from the video or a matching still, or something completely different.

    Pano2VR uses the still images as preview images. If the browser can’t playback the video for some reason at least you’ll have the still images instead of a black/blank screen.

  4. Add the second video, following the same steps (1-3).

  5. Create the tour. You build the tour in the same manner as for still panoramas.

    For this project, we will manually add hotspots that link to each other.
    Learn more about building tours.

  6. Select the starting video and activate the Point Hotspot Mode and add a hotspot.

  7. In the Properties panel, find Type, and choose Tour Node.

  8. For Link Target URL, select the second video.

  9. Select the second video node and follow steps 6-8. Just make sure to choose the starting node for the Link Target URL.

  10. Save the project.

  11. Open the Output panel and choose the HTML5 output.

  12. Add something like the simplex skin so you have nice graphics for the hotspot icons.

  13. Click the gear to output the project.


See also

2017-03-14 14:39:28