What is interactive video?


Interactive video is a viewer-driven experience, enabling your audience to make choices or trigger actions. The result is a video experience that provides relevant content to individual viewers. Choices and actions made by the viewer can then be tracked and measured, providing you with valuable insight into your audience.


Examples of Interactivity

Overlays

Interactive overlays sit on top of linear video via hotspots which link out to websites, drive quizzes, or many other custom interactive experiences.

Branching

Interactive video turns viewers into participants as they explore interconnected content. Choices within the video combine to form a web-like experience.


Benefits

Personalized Choice Points

With “branching,” each choice point gives the opportunity to learn something about your viewer and present personalized content based on that knowledge.

Analytics

Interactive video allows you to capture deeper analytics to measure reach, engagement, click-through rates, and conversions, enabling you to ultimately demonstrate ROI.

Insights

Every interaction is an opportunity to learn about your audience. Use insights to optimize your message, improve conversions, and refine overall strategy.

API

Through Rapt’s Player API, the video can communicate with the webpage, third party analytics services, and your own back-end systems. This opens up endless possibilities to build next-level customer experiences while capturing rich analytics.

Rapt Media Composer Introduction

Uploading & Managing Media


Creating an interactive project should be easy. Uploading and managing media within the Rapt Media Composer is simple, so you can focus less on the technical and more on the creative.

Media Library

The media library is accessible throughout the application. You can reveal the library at any point by clicking the cloud icon in the upper right-hand corner of the Composer. Once clicked, the media library expands to show all of your media along with several options.

Opening the media panel

Settings

Click settings to see information about remaining storage space and online video platform (OVP) integrations.

Search through your library by filename. Be sure to use meaningful naming conventions!

Sort

Use the drop-down menu to sort media by date uploaded, name, or associated project.

View

The standard view in the media library is “thumbnail”. Choose the icon on the top right to switch to list view.


Uploading Media

You can upload both videos and images into the media library. Images are useful to storyboard out your concept, but it is important to replace them with video before the project goes into production. Live projects should only contain video. To upload, you can either click the browse button at the bottom of the Media Library or drag and drop the files from your computer into the gray box. Upload progress will show directly above the upload box. Once the upload is complete, the media thumbnail will appear at the top of your media library. A three dot animation will appear over the thumbnail while the encoding process finishes.


Frequently Asked Questions

What types of video files can I upload?

The media library accepts virtually any video file type. When you upload, we transcode the clip into all the versions needed to play across devices–even natively on iOS!

What size file can I upload?

You can upload video files up to 1GB. Files larger than this may fail the encoding process.

We recommend our default player aspect ratio, 16:9. You can use other aspect ratios, but the player will add the necessary letterboxing to your project.

Any other requirements for uploading media?

If your end project needs to be mobile-ready, all uploaded clips should have an audio track. If your video is silent, this means adding a silent audio track to the video before uploading. Audio must be present to encode properly for iOS.

Using the Path Editor


The path editor is the main editing area of the Composer. It is the first section you arrive at after clicking “edit” in the project dashboard. At any point, you can return to the path editor by clicking the corresponding icon on the left- hand side of the application:

Path editor navigation item

The path editor is made up of the node map and the editing toolbar to help build out your project efficiently.

Node Map

The node map is the main area of the path editor. This is where you will build out your interactive project. All projects begin with an empty start node that is ready to accept media.

As your project grows, the node map can be positioned to show different parts of the branching structure. You can zoom in and out using the slider in the upper left, and you can move to different areas of the project by clicking and dragging the node map itself.

Empty Node Tool

Empty nodes can be dragged onto the node map and act as placeholders as you build out your project structure.

Selection Tools

Similar to video editing software, the path editor has both pointer and marquee tools.

  • Pointer: Use this to select single nodes or branches on the node map.
  • Marquee: Click and drag over an area on the node map to select multiple nodes and branches.

Node Tools

  • Edit: Select a node and choose “edit” to bring up the node editor. Nodes can only be edited one at a time. Double-clicking on a node will provide the same functionality.
  • Delete: Select a node and choose “delete” to remove the node and any associated media from the node map. You can also select the node and press the delete key to achieve the same result.

Node Labels

Toggles the display of the names above the nodes on the node map.

Show Paths

Toggles the display of paths between nodes on the node map.

Shot List

Generates a shot list using the current project structure. Helpful during the planning phase of your interactive project. See storyboarding.

Preview

View the interactive project in its current state. This will mirror how your project is currently built in the Composer.


Creating Your Project Structure

  • Begin building out your project layout by clicking and dragging empty nodes onto the node map.

Pro-tip: it’s helpful to name the nodes something meaningful as you place them on the node map. You can edit the node name by clicking on it. This will save you time as you get deeper into the project build.

  • To create the paths of your video, hover over the right-hand side of each node and drag the arrow to the node or nodes it should connect to. You can connect the node to any other node on the node map, even itself! You can also create multiple connections from one node. Every path you create will automatically add a hotspot to the origin node that can be easily styled and positioned within the node editor.

  • Open the media library and drag your media onto the desired nodes.

  • Double-click on a node to begin editing your hotspots. See Hotspot Editing.

If you already have your media, you can skip step one and drag the clips from the media Llbrary directly onto the node map. From there you can change the node names, and create the paths between the nodes.

Hotspot Editing


Creating hotspots on your Rapt Media video is the primary way to add interactivity to your project. Hotspots are contained in the interactive layer of our player and are primarily used to trigger new clips, URL link-outs, and API events.


Creating Hotspots

There are two ways to create hotspots in the Rapt Media Composer.

  1. Link the video to other nodes on the node map. This dynamically generates hotspots for each connected node. These will be stacked in the upper left-hand corner when you double-click into the node editor. You can edit and delete these app-generated hotspots.

  2. Manually add the hotspots to your video. You can do this by double-clicking a node on the node map and using our hotspot tools to draw or duplicate hotspots. To draw, just click the add hotspot icon and click and drag the hotspot onto the video.

Adding hotspots


Copy/pasting hotspots is simple as well. Select the hotspot you wish to copy, and then either click the duplicate icon in the toolbar or use the familiar controls cmd + c to copy and cmd + v to paste. You can also use the keyboard shortcuts to copy and paste hotspots across nodes!


Changing Hotspot Appearance

Adding or changing text

You can double-click within the hotspot to add or edit text.

Size and Positioning

Hotspot properties

You can control the position of the hotspot by clicking and dragging to the location that you’d like it to appear. To resize, select the hotspot and choose any of the eight handles to click and drag. For added precision, both of these attributes can be controlled at the pixel level in the properties pane on the right-hand side of the screen.

You can add guides within the node editor to help maintain the same hotspot positioning across your experience. Click the ruler to add guides to your nodes, and click on the “x” to remove. These guides persist across nodes until you close them out, refresh your browser, or begin a new user session by logging out and back into your account.

Appearance

There are several options in the properties pane that help you create awesome-looking hotspots. Color pickers are available for the text and hotspot backgrounds, enabling you to select any color or add color through Hex and RGBA. To make your hotspots transparent and create clickable overlays, you can enter “0” in the A field or move the opacity slider over to the left.

Other options available to style your hotspots are: text pixel size, text style, background roundness, and hover state toggle.

For even more flexibility around hotspot appearance, check out our CSS feature documentation.

Changing button behavior

Options under the behavior section of the properties pane answer the question “what happens when the hotspot is clicked?”

There are four options in the “action” drop-down menu:

  1. Instant jump: Instantly jumps to the node listed in the destination field

  2. Delayed jump: Waits until the end of the node is reached and then jumps to the selected node

  3. Pause video: Pauses the video when the hotspot is clicked. This is useful when using API Event or URL in the fields below

  4. No action: Useful for adding text to your video or in parallel with API Event below

Other behavior options include API Event and URL (link-outs). For information about our API feature, check out our API Documentation. You can set the hotspot to fire a new tab and load a specific webpage by entering a URL in the last field under behavior. The video will pause and the viewer can explore related information without missing any video content. Please follow this format: http://www.example.com

Timing

Lastly, you can control when the hotspots appear and disappear during video playback. Each hotspot has a corresponding timeline below the video. The anchors on the left and right of these timelines are draggable. To have the hotspot appear later in the video, press the play button underneath the video and pause it where the hotspot should appear. Drag the left anchor to the red line that descends from the playhead. You can change when the hotspot disappears by following the same steps using the right anchor.

Publishing and Distribution

The publishing pane of the application contains settings related to the appearance, privacy, and sharing of your interactive video project.

Publishing navigation item


Publishing

Once you’ve built your project and are ready to go live, click the publish button. The initial publish will do two things: allow the video to be viewed through the embed code, and create a public-facing URL, or “Play Page,” to demonstrate how the project will look when embedded.

If changes are made to the project after the initial publish, the publishing component will contain three options:

  1. Republish: Makes all changes made to the project live within 45 minutes (see CDN)

  2. Unpublish: Makes the project no longer viewable through the embed or on the Play Page

  3. Discard changes: Discards current changes, keeping the project in its current live state

Publishing dialog

↓

Republishing and unpublishing dialog

If you’re a member of an organization, you can lock the project so that only you or an admin can publish by clicking in the upper right-hand corner of this component.


Play Page

The play page is a public URL generated on publish that allows you to see how your video looks when embedded on a page and gives you an easy way to share a project in development. This component is only available on in the publish pane if the project is currently published.

How to access the Play Page


Embed Code Builder

The embed code is how you deploy your Rapt Media interactive video to your webpage. Use the embed code builder to customize your player, then copy the embed and paste it into your website.

Embed code builder

  • Video size: Controls the size of your video/player. We recommend sticking to a 16:9 aspect ratio.

  • Controls position: Choose whether controls are placed over the video with auto-hide or below.

  • Fullscreen: Allow users to view video in full-screen in select browsers.

  • Autoplay: Video begins playback automatically when page loads on desktop. Autoplay isn’t available on mobile devices due to browser constraints.


Misc Project Settings

Publishing project settings

  • Poster frame: The image displayed in the player before playback begins. The application chooses a random frame for this by default. You can upload a custom poster frame by selecting “choose file”. Recommended aspect ratio is 16:9

  • Security: These settings help you control who can see your video. Choose from the following:

    • Public: Can be viewed through the embed code and the play page

    • Private: Can only be viewed through the embed code

    • Share code protected: Can only be viewed by those who have the share code

  • White labeling: Turn on to remove the Rapt Media branding from the player. This is an enterprise-only feature and is enabled by default for enterprise accounts

  • Custom CSS: Available to clients who have purchased our CSS feature