The final piece of the MSG Jigsaw is Video. Creating Video popups is similar in configurations to Text and Web.
In this tutorial we will create a number of different Video only popups with Youtube, Vimeo, Vimeo 360 and Local files.
Project Overview
In this tutorial, we will add and configure the project by;
Step 7 - Publishing & Testing Local Video
Note: Click on any image to enlarge it
Step 1 - Configuring a Point Hotspot as a YouTube Popup ⇑
1. Open the MSG_Web.p2vr project
2. Save the project as MSG_YouTube.p2vr
3. In the Viewer window add a new Point Hotspot
4. In the Properties - Point Hotspot panel add the following;
ID: Youtube (this can be anything you like)
Type: Video
Source: YouTube
Skin-ID: msg_gallery_tmp
Title: The History of Notre-Dame (this can be anything you like)
YouTube ID: https://www.youtube.com/watch?v=wvtoJ7Dyj1A (select return to add the link)
Target: video
Pan/Tilt: I’ve set 15/0 (you can choose any position) (figure #3)
Figure #1: New hotspot and updated properties - point hotspot for YouTube popup
5. Populate the Custom Properties
Popup Responsive: false
Popup File Extension: youtube
Popup Hide Sidebar: true
Popup Image Shadow: true
Popup Border: true (figure #4)
Figure #2: Custom Properties for YouTube popup
11. Save the project
Step 2 - Publishing & Testing the YouTube Video Popup ⇑
1. Publish the project
The video hotspot is visible and when clicked the popup opens with the YouTube video. (figures #3 & 4)
Figure #3: YouTube Point Hotspot
Figure #4: Youtube Popup
Step 3 - Configuring a Point Hotspot as a Vimeo Popup ⇑
Note: In this example we are going to provide a text description of the video context in an visible overlay ontop of the video. The overlay prevents the video from being played until it is hidden. The initial visability of the overlay can be set to True or False.
1. Open the the MSG_Youtube.p2vr project
2. Save the project as MSG_Vimeo.p2vr
3. In the Viewer window right click on the YouTube Hotspot and select ‘Copy Active Point Hotspot’
4. In the Viewer window right click and select ‘Paste Point Hotspot’
5. In the Properties - Point Hotspot panel add the following;
ID: Vimeo (this can be anything you like)
Type: Video
Source: Vimeo
Skin-ID: msg_gallery_tmp
Title: Notre Dame Cathedral with Inge Laino (this can be anything you like)
Vimeo ID: https://vimeo.com/101999451?fl=pl&fe=sh (select return to add the link)
Target: video
Pan/Tilt: I’ve set 15/-15 (you can choose any position) (figure #5)
Figure #5: New hotspot and updated properties - point hotspot for vimeo popup
6. Populate the Custom Properties
Popup Responsive: false
Popup File Extension: vimeo
Popup Hide Sidebar: true
Popup Body Copy: Paris Muse Director Inge Laino tells the fascinating story of two Parisians—featured on the facade of the cathedral—who embody the determined spirit of the city's residents.
<br><br>
Learn more about the cathedral's 850-year history on our Notre Dame tour. You and your private guide will decipher the profound messages of the cathedral’s sacred geometry, rich sculpture, innovative architecture and stunning stained glass windows. For families, we offer Stories in Stone, a unique interactive program that presents the cathedral to children as a storybook in stone.
Popup Body Copy Overlay: true
Popup Image Shadow: true
Popup Border: true (figure #4)
Figure #6: Custom Properties for Vimeo popup
Step 4 - Publishing & Testing Vimeo Popup ⇑
1. Save the project as MSG_Vimeo.p2vr
2. Publish the project
The new Vimeo hotspot is visible and when clicked the popup opens and the video is shown with the overlay copy. Clicking on the “i” button toggles the overlay copy on and off allowing the video to be played. (figures #7, 8, 9 & 10)
Figure #7: Vimeo Point Hotspot
Figure #9: Vimeo with overlay hidden and video controls available
Figure #8: Vimeo Popup with active overlay
Figure #10: Vimeo playing
Note: the Globe icon opens the website in a new tab.
5. Vimeo 360˚ ⇑
In this example we are going to copy and modify the Vimeo video hotspot by swapping out the video for a 360˚ video, changing the copy as well as adding an audio file.
Note: YouTube supports 360˚ video on their platform but unfortunately in their recent updates they have removed the ability to embed them and actual view them in 360˚. Fortunately Vimeo still supports it.
1. Open the. MSG_Vimeo.p2vr project
2. In the viewer copy and paste the Vimeo Point Hotspot
3. In the Properties - Point Hotspot panel add the following;
ID: Vimeo 360 (this can be anything you like)
Type: Video
Source: Vimeo
Skin-ID: msg_gallery_tmp
Title: Balloons Over Bagan (this can be anything you like)
Description: 360
Vimeo ID: https://vimeo.com/449555536?fl=pl&fe=sh (select return to add the link)
Target: video
Pan/Tilt: I’ve set 15/15 (you can choose any position) (figure #11)
Figure #11: New hotspot and updated properties - point hotspot for vimeo 360 popup
4. Update the Vimeo Custom Properties by changing/modifying the following:
Popup Gallery ID: balloons
Popup Title: Balloons Over Bagan
Popup Body Copy: A 360 degree view of the launch site shot from inside the balloons basket shot on a Theta X camera. The Balloons over Bagan experience is renowned for its safety, professional pilots, and unforgettable views, making it a must-do for visitors to Myanmar.
Popup Audio Files: balloons-bagan
Popup Enable Audio: true (figure #12)
Figure #12: Custom Properties for Vimeo 36o˚
5. In the Tutorial folder open the To_Upload folder > gallery
6. Create a new folder and name it notre-dame (all lower case) (figure #13)
7. Copy the notre-dame .mp3 files into the notre-dame folder (figure #14)
8. Save the project as MSG_Local_Video.p2vr
9. Publish the project
The new Vimeo 360 hotspot is visible and when clicked the popup opens and the 360˚ video is shown behind the overlay copy. Clicking on the “i” button or in the video screen toggles the overlay copy on and off allowing the video to be played. (figures #15, 16, 17 & 18)
Figure #13: 360˚ Point Hotspot
Figure #15: 360˚ with overlay hidden and video controls available
Figure #14: 360˚ Popup with active overlay
Figure #16: 360˚ video playing
6. Local File ⇑
In this final video example we are going to use a local video file (mp4). The video doesn’t have an audio track so we will add an audio file to the hotspot.
1. Open the. MSG_Vimeo_360.p2vr project
2. In the viewer copy and paste the Vimeo Point Hotspot
3. In the Properties - Point Hotspot panel add the following;
ID: Local File (this can be anything you like)
Type: Video
Source: File
Skin-ID: msg_gallery_tmp
Title: Notre-Dame Cathedral (this can be anything you like)
Vimeo File: ../Tutorial_Assets/6. Video/notre-dame.mp4 (select return to add the link)
Target: video
Pan/Tilt: I’ve set 0/15 (you can choose any position) (figure #17)
Figure #17: New hotspot and updated properties - point hotspot for local video file popup
4. Update the Local File Properties by changing/modifying the following:
Popup Gallery ID: notre-dame
Popup File Extension: file
Popup Title: Notre-Dame Cathedral
Popup Audio Files: balloons-bagan
Popup Enable Audio: true
Popup Audio Video Play: true (figure #18)
Note: As the video doesn’t have any audio, setting Popup Audio Video Play to true will automatically start, pause and stop the video when the audio buttons are selected.
Figure #18: Custom Properties for Vimeo 36o˚
5. In the Tutorial folder open the To_Upload folder > gallery
6. Create a new folder and name it notre-dame (all lower case) (figure #13)
7. Copy the notre-dame .mp3 files into the notre-dame folder (figure #19)
8. Save the project as MSG_Local_Video.p2vr
9. Publish the project
The new Local Video hotspot is visible and when clicked the popup opens and the video is shown. Clicking on the video starts the video playing or clicking on the Audio play button plays the audio and starts the video. (figures #20, 21, 22 & 23)
Figure #20: Local Video Point Hotspot
Figure #22: Video playing
Figure #21: Local Video Popup
Figure #23: Audio playing and triggered Video playing
Summary ⇑
This concludes the tutorial. When you are building your own project you can easily create MSG Popups by copying the sample Point Hotspot, pasting it into your project and then updating the Hotspot Data.
