Features

Analytics

The Rapt Media Analytics Dashboard gives insight into how viewers are interacting with your video and is accessible from within a project.

You can view a project’s Analytics pane by selecting the icon at the bottom of the navigation at the left side of any project.

The Analytics pane has two main components: a general stats section and a data visualization section. In the general stats section, you’ll be able to see:

• Total project plays: Each time a viewer plays the project from the beginning

• Unique plays: Each time a viewer plays the project from the beginning, excluding repeat views

• Repeat viewers: Total number of users who have repeatedly played the project from the beginning

• Link-outs: Number of times users have clicked a link-out (a hotspot that redirects a user to an external location)

• Time on project: The average length of time that each viewer spends viewing the project during playback

• Plays per user: The average amount of plays by each viewer from the beginning of the project

• Nodes per session: The average amount of nodes visited by a viewer during each project play

In the data visualization, you’ll have access to charts displaying:

Plays

The number of plays a project has received over time.

Nodes

The number of plays each node has received over time (typically corresponds with a single media item).

Demographics

Consists of four pie charts:

• Country: Total project views by country

• Device type: Total project views by device

• Browser: Total project views by browser

• Operating system: Total project views by browser

Google Analytics integration

For users with access to our Google Analytics plugin, you can easily push data from your Rapt Media projects into an existing Google Analytics(GA) account without having to write a single line of code. By integrating your videos with GA, you can measure video performance and viewer interactions alongside the rest of your site data.

How it works

You’ll need your UA tracking number from your GA account to get started. You can find this in the admin section of Google Analytics under the ‘js tracking’ tab. Once you have that, open your Rapt Media project in the composer and navigate to the ‘project settings’ tab. Drop your UA number in the analytics tracking field, click ‘update’ and our integration will begin pushing node views as page views to your GA account with the following format: /[your_project_title].rapt#track=[node_name]*`

*node name is the name you give to the video clip on the composer canvas, so it’s important to name your nodes in a meaningful way

What can I measure with it?

Because we’re pushing data in as page views, you can see a lot of the same information that you analyze when looking at your site data. This includes:

• Total project views
• Total views per node
• Time on project
• Time on individual nodes
• Segments based on device, geolocation, etc.
• Viewer behavior flow
• …and more!

iPhone playback

Rapt Media’s patented iPhone encoding process allows your project to play back natively in mobile Safari. Due to hardware limitations, we recommend following the best practices listed below to ensure optimal playback on iOS devices:

Requirements

• Every video clip must have an audio track. If the video is meant to be silent, you can add a silent audio track to the video before upload to fulfill this requirement.

• Autoplay will not work on iPhone (or any mobile device for that matter)

Recommendations

• Keep your project size manageable. We recommend 25-30 nodes

• Use fairly short clips (< 1min). This is good for both encoding and user experience

• Minimize on-screen choices as they take up real estate–we recommend no more than three at a time

Considerations

• Plan for poor Wi-Fi and poor cellular data environments by keeping the entire page light and easy to load.

• Do not use hover states. Many sites or web apps use hover states to reveal menus or options. Because there is no “hovering” or “mouseover” on a touch device, a quick tap on a link or button on iOS devices registers as a hover if the element in question has a hover style declaration.

Custom CSS

Overview

You can customize the look and feel of the player through the use of CSS; the same style markup used to control the look and feel of web pages. Using this feature, you can style virtually any element within the video frame including player controls, loading spinner, and hotspots.

The Rapt Media player is implemented through an iframe on the host page. Generally, browsers do not allow the host page to control the style of the elements within the iframe. The CSS feature allows you to insert a custom stylesheet into the player by pointing to a specific URL through a field in the publishing settings pane.

This stylesheet is hosted by the customer and can be freely modified at any time to achieve the desired look and feel.

Requirements

• Styles for the custom controls for the Rapt Media player should be in their own CSS file. Do not include these styles in a global stylesheet being used elsewhere on the site. Global styles could inadvertently override other elements in the player.

• The stylesheet host should be production-ready.

• If your project is going to be viewed over https:// protocol, your host must have a valid SSL Certificate signed by a project over http://.

Attaching custom styles

• To attach your stylesheet, enter the protocol-relative URL of your file to the CSS field in the publishing pane of your project.

• Click update. Due to CDN caching you may have to wait up to 45 minutes for the file to be included in your project.

• Initially, the file referenced by the URL can be blank, and you can iterate on the file to see your changes in real time (assuming your browser cache is cleared).

Implementation

Player controls

Although this stylesheet is called last, the specificity of the style declarations in the existing player stylesheet will override any non-specific declarations in your styles. To ensure that your styles have precedence, they should be scoped to:

.iframe-body .vjs-default-skin 

For example, to change the play button in the control bar to be red, do:

.iframe-body .vjs-default-skin .vjs-play-control {color: #f00;} 

Modifying all buttons

The buttons in the player are li.projectbutton with anchor tags inside them. The majority of the styles for the button are at the li level.

For example, to change all buttons to zoom on hover, do:

li.projectbutton:hover {transform: scale(1.25);}

Modifying specific buttons

You can add a specific class to the li.projectbutton element within the Rapt Media Composer. To do this, select the button you wish to style from within the node editor and enter a class name into the CSS field.

For example, if a button is classed with .menu_button, it could be modified like this:

li.projectbutton.menu {background-color: rgba(128, 37, 45, 0.5)}

Referencing images

When referencing images, you must use the full absolute URL.

For example:

li.projectbutton.menu {background: transparent URL(http://hostname.com/images/img.jpg) no-repeat}

Custom fonts

Most browsers will not allow cross-origin font calls, so loading custom web fonts from your server will not work in most modern browsers.

You can embed custom fonts in the stylesheet using base64 encoding, which circumvents the cross-origin restriction. This comes at a cost, however, since it could greatly increase the size of the stylesheet. Also, be sure that any fonts that are included in this manner allow this type of inclusion in their license.

Recommended timeline

• Depending on your front-end development resources, you should allow for about a week to customize the player and test those customizations. NOTE: Because browsers and devices differ in their support of specific styles, testing should be completed across all target browsers and devices.

• Apply CSS once the following are completed and approved by both parties:

  • Project(s) are completed within the editor

  • Project(s) are published in editor

  • Project(s) are mobile optimized

• If CSS is enabled before the requirements listed above are met, then CSS should be turned off before the implementation of the player on the customer’s page. CSS may be turned back on once QA testing is complete and the player is approved as functional after implementation.

• Because custom CSS can affect every aspect of the player, Rapt Media cannot respond to support requests until custom styles are disabled on the project.

Customer support

• Rapt Media does not provide support for custom styles. For example, if the player functions incorrectly on some or all devices/browsers after custom styles are applied, the customer must troubleshoot their own styles. Rapt Media can consult on custom styles; consultation time can be purchased (if not included in your subscription).

• If a customer reports an issue that can be reproduced when custom styles are disabled, Rapt Media will support that request in keeping with the customer’s SLA.

Media labeling

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.

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.

Click through mode

Click through mode allows authors to step through an interactive project from directly within the node editor, rather than exit the editor and rely on preview to view new changes. This enables you to explore, refine and polish your project much more seamlessly by entering click through mode, navigating to another node, and switching back to edit.

You’ll need to be in the node editor to use click through mode, which can be found by double-clicking any node on the editing canvas. The main purpose of this area is to add, style, and adjust the timing and behavior of hotspots. To enter click through mode, simply click the toggle in the upper right of the node editor. The editing and timeline panes will gray out, indicating that they are now inactive. From here, you can click to play and navigate the interactive video.

Once the interactive video is displaying the node you wish to update, exit click through mode to resume editing. You will now be editing the most recent node seen in click through mode. This node will also be highlighted on the editing canvas upon exiting the node editor.

CDNs

What is a CDN?

A CDN is a global network of servers used to deliver web content to users based on geographic location. The servers cache versions of content locally and distribute it to users who are closest to that particular server, minimizing load times and delivering better performance. Generally, the server cache is set to refresh periodically, updating to the latest version of the webpage or content.

Does Rapt Media have a CDN?

Yes. Rapt Media uses AWS Cloudfront to ensure that projects playback seamlessly regardless of geographic location.

Why doesn’t my project immediately update after I publish changes?

You may notice a delay between the time you publish changes to your project and when those changes are reflected in your live video. This has to do with the CDN and the frequency with which the cache is refreshed. Projects update every 45 minutes, so depending on when you republish, it could be anywhere from zero to 45 minutes before the live version shows the updates. For example, if you republish your changes 30 minutes after the cache refreshed, it will be 15 minutes until your project updates. It’s important to know that your current project will continue to be available to viewers during this period, so there is no downtime.

Contact your client services representative if your changes haven’t appeared within 45 minutes of republishing.

Adding a custom poster frame

A poster frame is the image that viewers see in the Rapt Media player before they initiate playback. The composer selects a frame from your video to use for this image by default. You can choose to select a custom poster frame instead by following the steps below.

Follow these steps to customize the poster frame

1. Upload your image to the media library. We suggest a 16:9 aspect ratio to conform to the player size.
2. Navigate to the publishing pane.
3. Use the dropdown under ‘Choose a new poster’ to select your image
4. Click ‘Update’

The poster image thumbnail will update to show your new image. There may be a slight delay between updating the image and when it appears live on your project due to cdn caching.

Captions

Captions, typically known as closed captions or subtitles, allow viewers to toggle on readable text for sounds and dialogue while watching your project’s media. Our player allows references to WebVTT (.vtt) files to handle captioning, and our composer provides functionality to upload these files, link to valid WebVTT URLs, or request captioning from 3rd party services.

Captions management

To get started, navigate to your media’s edit page by double clicking (or clicking “Edit” from the media’s menu) a media in your library. Next, click the closed captions icon on the right of the edit media navigation.

This will bring you to a page that allows you to upload and submit new WebVTT files, as well as manage existing captions for the video. Below will show the management area, and describe the functionality.

• Adding media by upload: Click the browse button, then select a valid .vtt file. The file will be uploaded and reflected in your media’s caption list.
• Adding media by url: Input a valid HTTP URL that references a .vtt file then click submit. The file will be linked and reflected in your media’s caption list.
• Changing a captions language: Once uploaded or submitted by URL, captions will need to have their language changed if they are not English. Do this by finding the caption item in your list, and using the language dropdown to select the correct language code.
• Edit existing URL caption: If your previously submitted URL caption happens to change, click the pencil icon to edit its URL value to the new .vtt file.
• Deleting a caption: Should you need to delete a previously added caption, just click the trashcan icon to permanently remove it from the media.

Note: Adding, updating, and deleting captions will not be reflected during project playback until the project with the associated media is republished.

3Play captioning

A third captioning option as previously mentioned, is provided by an external transcibing service that is integrated with our composer. This service is provided by 3Play Media. In order to use this service you must have configured a 3Play account and registered the addon through our composer. Once those steps are completed, you will notice a new option in your captions management screen for your media. This new option will explain the 3Play process, and allow you to request that the media be sent to 3Play to be transcribed and turned into captions for the media (this process may take a few days).

Organization accounts

Rapt Media users can be grouped together under a single organization account, enabling them to collaborate on projects and share media. Organization accounts are created by the Rapt Media services team and are provisioned with a set number of seats. Users then designate organization administrators, who have the ability to invite and remove other team members from the organization.

Managing your organization

Users with the organization account feature enabled and administrative privileges can add other team members to the account. Organization options can be found in the account section of the platform.

From here, you can update your organization name and manage users. To add a team member, enter the email address in the ‘Invite new member’ field and press update. Your team member will receive an emailed invitation with instructions on how to sign up. You’ll see your team member’s email address appear under the member management section. The text will be a lighter gray until they finish the sign up process. The number of seats used will immediately increment. Please contact our client services team if you need to add seats to the account.

Once members appear in the organization, admins can hover on the three dots to the right to reveal the following management options:

• Make admin-gives the member administrative privileges (ability to add/remove users). There is no limit to the number of existing members who can have admin rights.
• Reset password-sends a password reset email to the member.
• Remove user-removes the user from the organization. All media and projects created by the user remain as part of the organization.