Adding Video and Audio to Your Layout

Note: All audio and video files placed in a layout must be linked to an InDesign object that sits on either the A- or B- layers. 

Two new frames are created which are the same size as your selected InDesign object:

• A Hotspot frame gets created on the "C-Clickable Areas" layer
• A Media frame gets created on the "D-Media Areas" layer

You can move and resize this frame to match the dimensions of the media file you are playing or to have it play in a specific location on your exported Vertical.

Note: Do not change the Ref. Object ID or Media ID fields for frames on the "D-Media Areas" layer unless you are an expert with the Mag+ system. These fields are filled out automatically by the Mag+ InDesign Plugin when creating a media object.

Options for Content Type and Source

• Content Type
  • Inline Movie: This plays the movie without any standard video-player controls within the bounds of the frame on the D-Media Areas layer. The frame will be placed on the same layer as the original reference object (A -or B- or Overlay) so that it moves with other content on that layer. The video can be played or paused by clicking tapping the Clickable Area.
  • Pop-Up Movie: This plays the movie in a floating pop-up window the size of the frame on the D-Media Areas layer and dims the content behind it. There will be no video-player controls, but a close button allows the user to close the window and return to the layout. Clicking outside the video window will also close the video.
  • Full-screen Movie: This plays the movie in a full-screen window with video-player controls and a "Done" button to return to the layout. The window will also auto-resize when the device rotates, even if the Vertical is locked to one orientation.

Note: If you set your Mag+ app to be locked to a particular orientation, the Full-screen Movie will not auto-rotate.

• Audio: This type lets you add an audio source file and enables the "Add to Playlist" checkbox.
• Sound Effect: This is a second audio file that can play over the top of an existing audio file. You can, for instance, add a sound effect that plays over background music.
• Source Type
  • File: This embeds the audio or video file into the exported Vertical. The media can then be played without an Internet connection but will result in a larger MIB size for the user to download. The "File" button lets you browse to the location of the video or audio file.
  • URL: This streams the video or audio file from a standard URL. Because of this, the media cannot be played without an active Internet connection but will result in a smaller MIB size.

Note: The URL option must be a standard web link to a video or audio file. To embed a YouTube video, you can use a Web Link or a Mag+ HTML object. To learn more about HTML objects, read the article "Adding HTML Objects to Your App".

For more information on supported video types and optimized platform settings, refer to the article "Tips - Video Best Practices".

Playback Settings

• Auto-start: This checkbox automatically starts the video or audio file according to the condition set in the drop-down menu:
  • On Load: Plays the source file when the Vertical loads -- note that if the video is placed down low in the Vertical, it may start playing before the end-user can see it
  • In View: Plays the source file whenever the media Hotspot comes into view
  • In View per Vertical: Plays the source file only once when the Hotspot comes into view on the current Vertical
  • In View per Issue: Plays the source file only once the the Hotspot comes into view within the entire Issue

Note: Leaving "Auto-start" unchecked requires user to play the media file manually.

• Hide Media at End: When checked, a video will disappear when it is done playing, showing the layout behind it; if the user taps the video Hotspot again, the video will reappear and play again. If left unchecked, the video will remain on the last frame until it is played again.
• Add to Playlist (audio files only): This checkbox adds the audio file to the Mag+ Playlist menu, accessible in the upper-right corner of the app

Note: The Mag+ Playlist lets the user control the track (including starting and stopping) from the top bar menu. Audio files added to the Playlist will continue playing in the background as the user scrolls between Verticals in the Issue.

• Loop: This checkbox forces the video or audio file to loop repeatedly until the user navigates away from the current Vertical.
• Restart on Toggle: This checkbox forces the media file to start from the beginning when it is toggled from off to on. Default behavior is to have the media simply continue from where it was stopped.

Whenever a media frame is created via the Mag+ Objects Panel, a Hotspot frame is also created on the "C-Clickable Areas" layer. This Hotspot represents an area that is tappable in your app and that will trigger the video or audio file to play (provided the "Auto-start" checkbox is not checked). You can move or resize the Hotspot frame as you like, but there is nothing in the Mag+ Objects Panel that needs to be changed.

Hotspots can be triggered in a variety of ways and the behavior is set in the Mag+ Object panel in the dropdown menu called Trigger (Label 1). By default, the Trigger will be when someone taps the Hotspot area but other options include:

• On Tap: The Hotspot will be triggered when a user taps on the Clickable Area box.
• In View: The Hotspot will be triggered when the Clickable Area box comes into view on your layout.
• Out of View: The Hotspot will be triggered when the Clickable Area box exits view on your layout.
• Shake: The Hotspot will be triggered when the Clickable Area box is in view on your layout and the user shakes the device.
• None: There is no user-accessible trigger. The Hotspot will only be triggered by another Link.

Note: Do not change the Ref. Object ID or URL fields unless you are an expert with the Mag+ system. These fields are filled out automatically by the Mag+ InDesign Plugin when creating a Hotspot for a media object.

You can also trigger videos and audio with dedicated play and pause buttons, called Control Images. Read more about Control Images.