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 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.

Managing media


The media library offers several ways to manage and organize your media, which is particularly useful as the number of media and projects in your account increases. Using features such as Media labeling and Sort-by-this-project, you can create efficiencies by removing the need to seek and find media within a large library.

Media labeling

Rapt Media provides an easy way to organize your media by adding labels to videos and images in your library. Labels make it simple to navigate your library and function similarly to folders in terms of organization. To use Rapt Media’s labeling feature, click the label icon Finding the label icon at the top of your media library. This will reveal the labeling pane.

Creating labels

To create a new label, click the “New label” button. Enter the name of your label in the field and press return/enter to add it to your label list. You can create as many labels as you need. We recommend using meaningful naming conventions. To reorder, click and drag each label into position in the label list.

Labeling media

There are three methods to labeling media in the composer. Media can have multiple labels, and labels can contain multiple media.

Uploading media directly into a label

Uploading media directly into the label is the easiest way to stay organized from the start. This saves you from having to retroactively apply the labels to media later on. To upload media directly into a label:

  1. Create the label by following the instructions above.
  2. Click to select the label
  3. Upload media into the media pane by dragging it into the upload box or by clicking “browse” and selecting media through your finder/explorer.

Adding media to labels

You can click and drag media onto existing labels to associate the video or image with that particular label. The label will briefly flash “Labeled!” to indicate that the operation is successful. You can apply a label to multiple media by holding down the cmd or ctrl key and selecting the videos and images you wish to label. Then, click and drag the selected media onto the desired label.

Adding labels to media

Conversely, you can click and drag a label onto the media. The label will briefly flash “Labeled!” and the number on the right of the label will increment by one to indicate success. Adding a label to media that already has the same label will result in no action.

Modifying labels

You can modify labels by clicking on the three-dot menu icon that appears when you hover over a specific label. This will reveal three options:

  • Change label color: Choose from six colors to apply to the label.
  • Rename label: Change the name of the label.
  • Delete label: Delete the label.

Filtering by labels

Simply click the label you wish to filter by to show all media with that label. You can filter by multiple labels at a time. The current label is indicated both in the label list and under “filtered by” above your media. To remove the filter, click the close button next to “filtered by” or next to the label itself.

Removing labels from media

To remove a label, click on the media’s options menu, which is displayed on hover, to see a list of assigned labels and click on the “x” next to the label you want to remove.

You can remove a label from multiple media by holding down shift, selecting the media, and clicking on the label icon in the bottom of the media pane. Click on the “x” next to the label you want to remove.

Sorting

You can find sorting options within the drop-down menu at the top of the media library. Use these options to reorder or filter the media in the media library, making it easier to find videos or images.

  • Newest: sorts by date uploaded. The newest files will appear at the top of your library.
  • Oldest: sorts by date uploaded. The oldest files will appear at the top of your library.
  • Alphabetical: sorts by ascending alphabetical order. Numerical values appear first.
  • This project: filters by project. Only clips in the current project will appear in the library. If used while not in a project, it will have no effect.

Media replacement

Many times a particular media will be used across multiple projects. The media replacement feature allows you to replace a video or image across projects. It’s important to note that the old media will no longer be available and that the new media will replace every instance of the old across projects.

To replace a media:

  1. Double-click the thumbnail of the media you want to replace in the media library. This will bring up the media editor.
  2. Scroll to the “replace media” section under the media information.
  3. Click “browse” to open your file finder/explorer window and select the media file you wish to replace the original with. With the media selected, click “open.”
  4. Confirm that the filename above the “replace” button is the filename you wish to replace the media with. Click “replace” to update the media.

Tips for effective media management

Upload media directly into a label

Uploading media into a label is the easiest way to stay organized from the start. Simply add a label, select it and then upload your media. For more detailed instructions, see “Media labeling” above.

Easily apply a project label after upload using filters + multi-select.

In the event you want to add a project label to media after upload, using filters and multi-select can make this task simpler.

  1. Open the project if you aren’t already in it.
  2. Create a label. Be sure to name it something recognizable.
  3. Select “This project” from the sorting dropdown at the top of the media library.
  4. Click the first thumbnail in the media library (upper left).
  5. Hold shift and click the last thumbnail in the media library.
  6. Click and drag the selected thumbnails onto the newly created label.

The label text will show “Labeled!” and the number of clips will increment to show the new total.

Use version labels in addition to project labels as you iterate

If your project will likely go through several iterations, consider creating additional version labels and applying them to media associated with your project label. This will help to organize the media within the project.

Easily check to see if media is in use

There are instances where it’s helpful to know what media is currently in use by the project. To check this, click the marquee selection tool Finding the marquee tool above the path editor and click and drag over the entire interactive project. This will select all nodes on the canvas. All media in the library associated with the selected nodes on the canvas will show a green check mark in the upper left.

Keep your media library tidy by removing unused media

Once you’ve finished iterating on your project, consider removing all media that didn’t make it into the final version. There is an easy way to do this while ensuring you don’t remove any final media:

  1. Select your project label.
  2. Using the method above, select all the nodes on the path editor.
  3. Select all the media in your library with green check marks in the upper left. You can hold command on Mac or control on PC and click on each to select multiple.
  4. Create a new label titled “final” and drag the selected media into the label.
  5. Select the “final” label.
  6. For each thumbnail in the “final” label, remove all other version labels by clicking the three-dot menu on each thumbnail and clicking on the “x” by each version label.
  7. Remove the filter for the “final” label.
  8. You can now filter by each version label and delete its contents. Remember to delete the label itself afterward.

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.

Canvas default state

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 zoom tools in the upper left, and you can move to different areas of the project by clicking and dragging the node map itself. Additionally, there are buttons below the zoom controls that enable you to quickly center your project or center the start node, respectively.

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.

Renaming a node in the canvas

  • 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.

Connecting nodes in the canvas

  • 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 & skins


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 three options in the “action” drop-down menu:

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

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

  3. 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.


Hotspot skins

Hotspot styles can be saved as custom skins which can be added to other hotspots within the same interactive project. Using the hotspot skin feature can significantly reduce the amount of time spent styling your interactive project.

Creating a new hotspot skin

By default, all hotspots are set to ‘No skin’ upon creation. Once you’ve applied styles to your hotspot, select ‘Create new skin…’ from the ‘Skins’ dropdown menu. You’ll be prompted to add a name for this skin; we recommend using meaningful naming conventions. Click ‘Create’ and your new skin will be saved. The ‘Skins’ dropdown will now show the hotspot skin along with a thumbnail of the skins background color.

Applying an existing skin to a hotspot

Once you have a custom skin created, applying it to other hotspots is simple. Just select the hotspot from within the node editor and use the ‘Skins’ dropdown to select your desired skin.

Updating an existing skin

Skin styles can be updated and applied to all hotspots with that specific skin, giving you a powerful way to make changes to multiple hotspots throughout an entire project. To update a skin, select a hotspot that has the skin style already applied and make your desired changes to the hotspot styles. Two new options will be available under the ‘Skins’ dropdown: ‘Save’ and ‘Revert’. If you choose to save, you’ll be prompted to confirm this decision. By confirming, the new style will be applied to this skin. All hotspots in the project that share this skin will be updated to the new styles.

If you’ve made changes and you do not want to apply them to the skin, simply choose revert and the hotspot will return to the previous style.

Updating a hotspot style without updating the skin

In some cases, you may wish to change the style on a hotspot that has a skin applied but not update the skin across the project. In order to do this, you’ll need to select the hotspot, change the style and choose either ‘No skin’ or ‘Create new skin…’ from the ‘Skins’ dropdown.

Deleting a skin

To delete a skin, simply click the ‘x’ next to the skin under the ‘Skins’ dropdown menu. You’ll be prompted to confirm that you want to remove the skin. Deleting the skin will remove it from all hotspots using that skin. The hotspots will remain styled, but they will no longer be associated with the deleted skin.

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

Choosing a player version

We are beginning to roll out a new version of our player. It is Rapt Media’s path forward, meaning it’s where we plan to focus most of our player-related feature development efforts over the coming months. However, recognizing that it’s a significant departure from past versions, we are “soft” releasing it by enabling users to opt in or out of the new player on a project-by-project basis during a beta period while we collect feedback regarding any issues. Please let us know if you have feedback, concerns, or encounter issues.

Overview

Our video player is the most visible and highest traffic part of any interactive video experience. In redesigning it, we prioritized reducing the overall impact the player has on actually using an interactive experience. To that end, we consolidated the behavior of the player on mobile and desktop so that no matter what device, operating system, or browser you’re viewing on, the player works and behaves the same way. Additionally, we simplified many of the video controls by moving them to an overlay while the video is paused. This helps to keep them out of the way while viewing an interactive experience, and returns the emphasis to the content and its interactivity.

New player benefits

  • New API: The new player has a new version of the API that, although similar in some ways, is a clean break from the previous API. To learn more, refer to the API Documentation.

  • Improved UX for authors: Designed from the start to provide ample real estate for hotspots, the controls do a better job of staying out of the way, making it that much easier to create hotspots that feel great.

  • Custom hotspot styles: Only available for the new player, we’re providing more hotspot styling options within the node editor. Now, as a project author, you can choose to ‘Switch to CSS editor’ in the hotspot properties pane to open up a mini CSS editor. This enables you to attach CSS to any hotspot and, if you need to reuse these styles for other hotspots, you can choose to save them as a hotspot skin.

  • Custom fonts: In addition to the new hotspot CSS editor, you can also now use Google Fonts within your project. In the Composer’s project settings pane, you’ll find a new section that allows you to enter a Google Fonts embed code, adding the defined fonts to the project. You can then reference them within your hotspot CSS, as described above.

  • Improved playback UX and visual design: With an updated visual design, by default the controls look far more appealing than with the previous version. Now, aside from the minimized progress bar, most of the controls are hidden until the viewer taps or clicks on the video surface to pause and reveal the controls.

  • Improved mobile UX: The new controls are far less prone to issues during mobile device orientation changes. Also, mobile viewers can now touch and drag anywhere on the video to scrub forward and backward, making the controls feel that much more responsive and forgiving.

  • Better foundation: As our path forward from this point on, the new player provides a more solid foundation for future features and improvements.

New player considerations and potential drawbacks

With the improvements outlined above, plus with the understanding that this is our path forward for feature development, for the majority of new projects we believe the new player is the clear choice. That said, it may not be the right choice for every project. Before choosing to use the new player, here are some things to consider:

  • Existing projects: For existing projects — especially ones that use external stylesheets or previous versions of the API — we recommend having a discussion with our customer support team before opting into the new player. If you’re using an external stylesheet to style the player controls with the legacy player, these styles will no longer have any effect on the new player.

  • New API: As mentioned above, if you have an existing project that is relying on the old API, you may not want to immediately opt in to the player since the new API is clean break from the old. Please refer to the player API documentation to see how your existing code will be impacted before opting in.

  • Custom player controls: The new player controls no longer accept CSS customization. You can either continue to use the legacy player controls, or roll your own custom controls using our player API.

  • New embed code: The new player’s embed code is different from the legacy player’s. If you’ve already released your project with the legacy embed code, you will need to update the embed code wherever it’s used.

  • No controls position options: The legacy version provides the option to display the controls on top of or below the video. The new controls don’t yet provide any display options.

  • Images are no longer supported: The new player doesn’t support image media. If you have an existing project that’s using images, you may not want to opt-in to the new player right away. In fact, for an existing project with image media, you won’t be able to opt in to the new player until you’ve replaced any image media within your node map. You can, however, easily convert images to video. Now, when you upload an image to your media library, it will be automatically converted to video. You can then manually replace the original image with the new video within any node it appears.

  • No share code: The project share code is no longer available for the new player. An existing project that is share code protected will not provide the opt-in functionality. If you remove the share code, the option will be made available. If you need to use the share code functionality for a new project, we advise against using the new player for that project.

  • Seamless transitions between nodes: Although not a critical consideration for the majority of project types that our authors create. Under normal circumstances, the black screen that may appear between nodes is very brief and non-disruptive; however, it currently occurs more often than with legacy player version. If, during playback, it is important that your viewers experience a seamless experience between nodes, you may want to avoid opting in to the new player for now.

How to opt in and out of the new player

You can opt in or out of the new player at any time during the new player beta. In any project’s settings pane (open a project, then choose ‘Settings’ in the left sidebar navigation), you’ll find the opt-in options. To opt in, check the ‘Opt in to new player’ checkbox, then press ‘Update.’ You’ll also To opt back out, check the ‘Opt out of new player’ checkbox, then press ‘Update.’