Media Editor (Pano2VR)
The Media Editor is where you add video, audio and images to your project.
Contents
Panoramic Media[edit]
This section represents the left half of the Media Editor. Add your media by doing one of the following:
- Double clicking in the preview image and choosing the file from the dialog
- Drop media on to the image
- Choose, Open in the Media Settings section and navigate to the media file
When the icons are blue, they are not active. When nothing is active or no media has been placed, the Media Settings are set to Background Sound.
When an image is added, it will appear transparent for easy placement:
- Use the corner handles to change it's size.
- Click the top arrow and drag in a vertical movement to rotate the image along its X axis.
- Click the side arrow and drag in a vertical movement to rotate the image its Y axis.
- Click the center arrow drag in a vertical movement to rotate the image its Z axis
When a video is added, a transparent checkered image or poster frame will appear. The poster frame will only appear if FFmpeg is installed.
- Use the corner handles to change it's size.
- Click the top arrow and drag in a vertical movement to rotate the image along its X axis.
- Click the side arrow and drag in a vertical movement to rotate the image along its Y axis.
- Click the center arrow drag in a vertical movement to rotate the image along its Z axis
An audio file that is added within the panorama will appear with a yellow overlay that represents how the current mode will sound. A mode of Static or Surround will not have an overlay.
Media Settings[edit]
Depending on the media, the Media Type and settings will change accordingly for the pinned media.
Video Settings[edit]
Media Type: Media can be either audio, video or an image. This will be automatically selected based on the media file. However, if needed, this can be changed manually.
ID: Each media added, or element, is given a unique ID. The default is _element_0
. The number will increase with each added element.
◊ TIP: This ID can be used as a target for an action in the Skin Editor.
Filename: Add the media file here by doing one of the following:
- Drag the file to Filename
- Choose, Open. A dialog window opens where you can locate your media file
Alternative File: Use this to add an alternative file format of the main file in Filename, to ensure playback in all browsers. This is especially necessary for the HTML5 output since not all browsers support all audio and video codecs. For example, Safari supports MP3. However, as of this writing, Firefox does not, but rather supports OGG. If the first file is not supported by the browser, the Alternative file will be used. You can add up to three alternate files.
◊ TIP: Always add MP4/MP3 under Filename (as the main file) when outputting to HTML5.
◊ NOTE: Flash will always use the main file (in Filename), so make sure it's compatible with the Flash.
- Generate…: Click to have Pano2VR generate the alternative file for you. ◊ NOTE: FFmpeg must be installed and then executed within Pano2VR.
Size: This is the file's dimensions (width x height). Changing the size here will affect the media element, but it's recommended not to change this parameter.
Mode: If the video has audio, choose its sound mode. The audio will always be affected from its original location. Meaning, that if the video pops out to 180º from it's original location and has a directional mode, the sound will not be heard, but the video will continue to play. The sound does not follow the video's position.
Level: This is the volume of the video's audio. Default is set at 100%.
Loop: Determine how many times the video should repeat its playback.
- The default is
1
, and will play one time. -
0
will play back a continuous loop. -
-1
will not play the media until activated by a click action or an action in the Skin Editor.
External: These options are for preventing the files from being embedded within the output file.
- Externalize: For Flash output, select to keep the file from being embedded in the SWF. It is not available for HTML5.
- Copy file: Keep selected to copy the file over to the output folder.
Settings above the line affect the file or input.
Settings below the line affect the output.
Click Mode: Choose from the following options what will happen when a user clicks on the video:
- None: Nothing happens.
- Play/Pause: Clicking on the video will toggle playback and pausing.
- Pop out normal: Clicking will cause the video to move forward (animate) from it's pinned position and will enlarge to its original dimensions. The video will start to play once the player is loaded.
- Pop out 100%: Clicking will cause the video to move forward (animate) from it's pinned position and will enlarge to fit the player window. The video will start to play on start up.
X Rotation: Changes the element's position on the X axis. Units are in degrees. Correlates to the top arrow in the preview image.
Y Rotation: Changes the element's position on the Y axis. Units are in degrees. Correlates to the left arrow in the preview image.
Z Rotation: Changes the element's position on the Z axis. Units are in degrees. Correlates to the center arrow in the preview image.
FoV: This is the horizontal field of view that the image covers. A smaller angle will decrease the overall size; larger angle increases the size or how much the video covers the field of view.
Vertical Stretch: This will stretch the vertical dimension of the video. This is used to help assist in exact fitting of a space (like a TV Screen). Anything beyond 100% will be vertically extended and therefore distort the video. Anything below 100% will will squeeze the picture horizontally.
Image Settings[edit]
Media Type: Media can be either audio, video or an image. This will be automatically selected based on the media file. However, if needed, this can be changed manually.
ID: Each media added, or element, is given a unique ID. The default is _element_0
. The number will increase with each added element.
◊ TIP: This ID can be used as a target for an action in the Skin Editor.
Filename: Add the media file here by doing one of the following:
- Drag the file to Filename
- Choose, Open. A dialog window opens where you can locate your media file.
Alternative File: Use this to add an alternative file format of the main file in Filename, to ensure playback in all browsers.
Size: This is the file's dimensions (width x height). Changing the size here will affect the media element, but it's recommended not to change this parameter.
External: These options are for preventing the files from being embedded within the output file.
- Externalize: Select to keep the file from being embedded in the SWF in Flash output.
- Copy file: Keep selected to copy the file over to the output folder. (This will become selectable once Externalize is selected.)
Settings above the line affect the file or input.
Settings below the line affect the output.
Click Mode: Choose from the following options what will happen when a user clicks on the image:
- None: Nothing happens.
- Play/Pause: Clicking on the image will toggle playback and pausing.
- Pop out normal: Clicking will cause the image to move forward (animate) from it's pinned position and will enlarge to its original dimensions. The image will start to play on start up.
- Pop out 100%: Clicking will cause the image to move forward (animate) from it's pinned position and will enlarge to fit the player window. The image will start to play on start up.
X Rotation: Changes the element's position on the X axis. Units are in degrees. Correlates to the top arrow in the preview image.
Y Rotation: Changes the element's position on the Y axis. Units are in degrees. Correlates to the left arrow in the preview image.
Z Rotation: Changes the element's position on the Z axis. Units are in degrees. Correlates to the center arrow in the preview image.
FoV: This is the horizontal field of view in which the image covers. A smaller angle will decrease the overall size; larger angle increases the size or how much the image covers the field of view.
Vertical Stretch: This will stretch the vertical dimension of the image. This is used to help assist in exact fitting of a space (like a TV Screen). Anything beyond 100% will be vertically extended and therefore distort the image. Anything below 100% will will squeeze the picture horizontally.
Audio Settings[edit]
Media Type: Media can be either audio, video or an image. This will be automatically selected based on the media file. However, if needed, this can be changed manually.
ID: Each media added, or element, is given a unique ID. The default is _element_0
. The number will increase with each added element.
◊ TIP: This ID can be used as a target for an action in the Skin Editor.
Filename: Add the media file here by doing one of the following:
- Drag the file to Filename
- Choose, Open. A dialog window opens where you can locate your media file
Alternative File: Use this to add an alternative file format of the main file in Filename, to ensure playback in all browsers. This is especially necessary for the HTML5 output since not all browsers support all audio and video codecs. For example, Safari supports MP3. However, as of this writing, Firefox does not, but rather supports OGG. If the first file is not supported by the browser, the Alternative file will be used. You can add up to three alternate files.
◊ TIP: Always add MP4/MP3 under Filename (as the main file) when outputting to HTML5.
- Generate…: Click to have Pano2VR generate the alternative file for you. ◊ NOTE: FFmpeg must be installed and then executed within Pano2VR.
Mode: There are six modes and each one defines how the sound is heard
- Static: A sound added as a static mode will be heard regardless of the current viewing angle of the panorama.
- Surround: The surround mode will continue to play no matter where you are in the panorama. The special feature of this mode is that the sound will always sound correct in perspective. For example, a sound occurring in the left channel will change to the right channel depending on perspective.
- Directional Rectangular: This mode allows the sound to be heard in a large rectangular field rather than a small area. The center of the field (green) is always at maximum level while the sound is dissipated out from the center (yellow) through to the edge of the defined field. Adjust the Horizontal, Vertical, and Field sizes to change the size and angle of the sound field.
- Directional Circular: This mode allows the sound to be heard in a large rectangular field rather than a small area. The center of the field (green) is always at maximum level while the sound is dissipated out from the center (yellow) through to the edge of the defined field. Adjust the Horizontal and Field sizes to change the size and angle of the sound field.
- Effect Rectangular: This mode has a rectangular sound field and will only play when it reaches the center of the panorama window.
- Effect Circular: This mode has a circular sound field and will only play when it reaches the center of the panorama window.
Level: The output level of the sound. Maximum is 100% or 1.00 while the minimum is 0. Available for all modes.
Loop: Choose how many times the sound file will repeat or loop.
◊ TIP: If you do not want the sound to begin at start up, choose a loop value of -1'.
Ambient: This is the level of the sound playing outside of the defined field. This option is available for the Directional modes.
Horizontal Size: Determines the horizontal size of the center (green section) sound field. Available for the Effect and Directional modes only.
Vertical Size: Determines the vertical size of the center (green section) sound field. Available for the Effect and Directional Rectangular modes only.
Field Size: Determines the overall size of the sound field. Available for the Direction modes only.
External: These options are for preventing the files from being embedded within the output file.
- Externalize: Select to keep the file from being embedded in the SWF in Flash output.
- Copy file: Keep selected to copy the file over to the images folder within the output folder. (This will become selectable once Externalize is selected.)
Background Sound[edit]
Use this section to add a single background sound or audio that will play continuously. The background sound section appears when either no other element has been added (i.e. on first open of the media editor) or when no element is activated.
◊ NOTE: Backgrounds do not work on iOS devices (HTML5) as stand alone. You must use a button to start and stop the sound, using the skin.
ID: The background sound's ID is _background
.
◊ TIP: This ID can be used as a target for an action in the Skin Editor.
Filename: Add the media file here by doing one of the following:
- Drag the file to Filename
- Choose, Open. A dialog window opens where you can locate your media file
Alternative File: Use this to add an alternative file format of the main file in Filename, to ensure playback in all browsers. This is especially necessary for the HTML5 output since not all browsers support all audio and video codecs. For example, Safari supports MP3. However, as of this writing, Firefox does not, but rather supports OGG. If the first file is not supported by the browser, the Alternative file will be used. If using a Flash fallback, you may find it necessary to add a WEBm version.
◊ TIP: Always add MP4/MP3 under Filename (as the main file) when outputting to HTML5.
- Generate…: Click to have Pano2VR generate the alternative file for you. ◊ NOTE: FFmpeg must be installed and then executed within Pano2VR.
Mode: A background sound is inherently a Static mode and therefore cannot be changed.
Level: The output level of the sound. Maximum is 100% or 1.00 while the minimum is 0. Available for all modes.
Loop: Choose how many times the sound file will repeat or loop.
◊ TIP: If you do not want the sound to begin at start up, choose a loop value of -1'.
External: These options are for preventing the files from being embedded within the output file.
- Externalize: Select to keep the file from being embedded in the SWF in Flash output.
- Copy file: Keep selected to copy the file over to the output folder. (This will become selectable once Externalize is selected.)
See also[edit]
Using the Media Editor
HTML5 Video Browser Support
HTML5 Audio Browser Support
How to insert aligned video into a panorama
Sound Editor (Pano2VR) ◊ NOTE: The media editor replaced the sound editor in version 4.0.