Working with Multiple Video Resolutions

Due to the limitations of smartphones and their browsers, high resolution video panoramas struggle to play back. Follow this workflow to learn how to build a project that provides playback support for both high resolution video panoramas (greater than 3840×1920) and low resolution video panoramas (3840×1920 and under).

Single 360 video panorama node

This method is used for a project with only one video panoramas. In our example, we will use 1 video panorama that has an 8k (8000×4000) and a 4k (3840×1920) resolution versions.

A still node will be the starting node and a skin will be used to add a button to start the video based on the device.

Creating a mixed project of video and still panoramas is outlined in the section below.

1. Create multiple resolutions of your video panorama, for example:

   • 8k
   • 4k

   8k videos will struggle to playback on smartphones and older devices (and possibly some desktop computers). 5.7k (5760 × 2880) may also struggle. However, 4k videos should playback without issue on a majority of devices. For our example, we’ll use an 8k version and a 4k version.

2. Drag all versions to Pano2VR’s Tour Browser. When you do this, Pano2VR will create a still frame of each video if FFmpeg is installed.

3. Add a still frame of the panorama for the opening video to the Tour Browser and make it the starting panorama (right-click and choose Set as start panorama).

   You’ll find the still that Pano2VR created in the same folder location as the image file.

4. Add a Web output and add an skin.

Next, we’ll add buttons to play back the video based on device.

Set up to play the 8k video

In the skin,

1. Add a text box that will act as a button to play the 8k video. (An image will work too!)

   • Give it a meaningful ID: Play 8k
   • Place it in the canvas and anchor it. We placed ours in the center of the canvas and anchored it there
   • In the Appearance paramters, apply a Logic Block: Trigger = isMobile; Comparison = =; Value = true. Visible = false. This will keep the button hidden unless the device is not a mobile device

2. In the Text parameters add text like, Play Video.

3. Add the following actions to open and play the 8k video and then hide button after clicking:

   • Source = Mouse Click; Action = Open Next Panorama; URL = the 8k video.
   • Source = Mouse Click; Action = Visibility > Hide Element; Target = self.

Set up to play the 4k video

1. Copy and paste the 8k textbox.

   • Give it a meaningful ID: Play 4k
   • In the Appearance parameters, deselect Visible and add a Logic Block: Trigger = isMobile; Comparison = =; Value = true. Visible = true. This will keep the button hidden unless the device is a mobile device.

2. Edit the following actions so the button opens and plays the 4k video, then hides itself after clicking:

   • Source = Mouse Click; Action = Open Next Panorama; URL = the 4k video.
   • Source = Mouse Click; Action = Visibility > Hide Element; Target = self.

3. Finally, save and output the project.

Multiple Nodes

To add more video panoramas to the project, follow the same process as outlined above. However, it’ll make sense to use point hotspot templates. In this example we create 2 hotspot templates. One for 4k and one for 8k.

Create Multiple Point Hotspot Templates

In the skin:

1. Add a Point Hotspot Template for 4k.

   • Give it the ID ht_node_4k

2. Give it an icon graphic. Use a text box, your own graphic, or one of the built in graphics in the Component Toolbox. Go to the Icons tab and find an icon. Icons are available for Feather and Material categories. Learn how to add custom hotspot graphics.

3. Make the icon a child of the hotspot template.

4. Position the Text Box over the hotspot template. Anchor it to the center. Double-click Position to set the position to 0,0 so it’s centered to the template.

5. Select the hotspot template and open the Visible parameters:

   • Deselect Visible
   • add a logic block to the Visible parameter: Trigger = Player > isMobile; Comparison = =; Value = true. Visible = true. This will keep the hotspot hidden unless the device is a mobile device

6. Give it the following action:

   • Source = Mouse Click; Action = Open Next Panorama; URL = Hotspot URL.

7. Copy and paste that point hotspot template to create a template for 8k playback.

   • Edit the ID to ht_node_8k.
   • Change the logic block for visible to: isMobile; Comparison = =; Value = false. Visible = true.

8. Save the skin. We recommend saving it to the project folder.

To add hotspot to return to the start node, you can use a regular tour node hotspot. Use a component or create one that uses: Source = Mouse Click; Action = Open Next Panorama; URL = Hotspot URL.

Apply the Point Hotspots

Back in Pano2VR main screen:

1. Drag a pair of nodes (4k and 8k versions) to the starting panorama to create Tour Node type point hotspots.
2. Give one the Skin-ID of ht_node_4k and the other ht_node_8k. You’ll find these in the Skin-ID list.
   

   

3. Repeat for all the nodes. Making sure each node is linked to it’s appropriate video.

Consider checking the transitions. In the case of using different transitions between nodes, add an action to change the transition. Transitions are global, so you’ll also need to set it back to the default or desired transition for the next node. Transition actions are found in Player Settings.

Finally test the output. Use the Integrated Web Browser to test the output on mobile.

See also…

• Working with 360º Video

• Building a Tour

• Custom Hotspot Images

• Using the Integrated Web Server

• Panoramas for a Head Mounted Display

• Creating a Little Planet Video from Ricoh Theta

• Skin Editor