Supported video player configuration

This article outlines the list of video players that Parse.ly supports without the need for developing a custom video strategy. Some development work may be required based on the video player of choice.

Brightcove

The standard Parse.ly tracker can automatically detect and track Brightcove videos that are embedded directly on the tracked page as <video> elements. However, by installing the Brightcove plugin, you can also track Brightcove videos embedded with <iframe> elements or inserted via the Brightcove Accelerated Mobile Pages (AMP) component.

To ensure that all necessary metadata is available from your videos, check that mediainfo is defined. In a console on your page:

var player = window.videojs("my_player_id");
player.mediainfo
{ ... } // should not be undefined

Brightcove videos must be initialized by a call to videojs(my_video_id) before the Parse.ly video tracker loads. If all of the videos on your page appear in videojs.players, the tracker can be safely loaded and the videos will be detected properly.

Note: Make sure the ID of the <video> element starts with a letter, not a digit.

JWPlayer

Since JWPlayer embeds that use <iframe> are not supported by the JWPlayer JavaScript API, the Parse.ly tracker is only able to track JWPlayer embeds that use <div>.

If you want to specify an author or section for a JWPlayer video, set custom parameters with those names in your JWPlayer video library.

mediaelement.js

The Parse.ly tracker will attempt to track any <video> or <iframe> element that includes the class mejs__player as a mediaelement.js embedded video. To ensure the necessary JavaScript API is accessible to the tracker, include the following script on the page:

<script src="https://cdn.jsdelivr.net/mediaelement/latest/mediaelement-and-player.min.js"></script>

If you want to specify a title for a mediaelement.js video without using the PARSELY.video.onPlay function described below, you can set the title attribute on the <video> or <iframe> element containing your embed.

video.js

Note to Brightcove users: these instructions are for users of plain video.js only. Use the instructions for Brightcove integrations instead.

Any <video> element that includes a class vjs-tech or video-js and does not include the Brightcove-specific data-video-id or data-playlist-id attributes will be treated as a video.js embedded video. To ensure the necessary JavaScript API is accessible to the tracker, include the following script on the page:

<script src="https://unpkg.com/video.js/dist/video.min.js"></script>

If you want to specify a title for a video.js video without using the PARSELY.video.onPlay function described below, you can set the title attribute on the <video> element containing your embed.

Note: When creating the ID of the <video> element, be sure that it is unique from other players on page and that it starts with a letter, not a digit.

Vimeo

To ensure the necessary JavaScript API is accessible to the tracker, include the following script on the page:

<script src="https://player.vimeo.com/api/player.js"></script>

Vimeo does not make video poster images available via JavaScript to Parse.ly’s tracker. If you want poster images to appear for your videos in the Parse.ly dashboard, use PARSELY.video.onPlay as described in the API reference.

Wistia

Embedded playlists must use the “API” embed type.

YouTube

To ensure the necessary JavaScript API is accessible to the tracker, include the following script on the page:

<script src="https://www.youtube.com/iframe_api"></script>

The src attribute of the <iframe> element comprising the embed must include the querystring argument ?enablejsapi=1.

If your page makes use of window.onYouTubeIframeAPIReady, you should include logic similar to the following in that function to avoid overriding the Parse.ly tracker’s usage thereof:

<script type="text/javascript">
  var existingCallback = window.onYouTubeIframeAPIReady;
  window.onYouTubeIframeAPIReady = function() {
    // do page-specific work
    if (typeof existingCallback === "function") {
      existingCallback();
    }
  };
</script>