Brightcove Player 5 to 6 Migration Guide

Overview

While backward-incompatible changes in Video.js 6 are documented on the Video.js wiki, this document can be used for additional migration guidelines specific to the Brightcove Player 6 that don’t apply to migration from Video.js 5 to 6.

A significant piece of the Brightcove Player 5 was the compatibility plugin, triggered by the player configuration value:

"compatibility": true

This configuration is on by default for 5.x players. Its effect is to include a plugin that will “shim” the Video.js 4 API, which allowed more customer plugins and integrations to work seamlessly in the automatic update to Brightcove Player 5.

As of Brightcove Player 6, this shim is no longer a part of the player. Anyone who wants to update from 5 to 6 should ensure that their code is compatible with the Video.js 6 API by following the aforementioned documentation on the Video.js wiki. The following sections document changes you will need to consider when updating.

player.tech

In version 6 of Brightcove Player, player.tech is a function that returns the current playback technology, not a property of the player as in version 5. The shim mapped some properties from the tech object onto the tech function so code expecting player.tech to be the tech object wouldn’t throw errors.

Player sizing

In Video.js 4, the player was sized via JavaScript. Video.js 5 introduced a new CSS based sizing scheme that caused some issues with player dimensions. The shim rolled these changes back, such that they behaved more like they did in version 4.

In practice, when using Brightcove Player v6 the height and width on the video tag are measured in pixels only. In fact, you do not enter any units at all for the height and width attributes:

width="480"

You could set the width and height to 100% in version 5, this no longer works in version 6. You can accomplish this using CSS in two different ways:

• Using a style attribute in the video tag.

  <video-js data-video-id="5622718636001"
    data-account="1507807800001"
    data-player="default"
    data-embed="default"
    data-application-id=""
    controls=""
    style="width: 100%;height: 100%"></video-js>
  <script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>

• Using a style tag.

    ...
    <style>
        .video-js {
          height: 100%;
          width: 100%;
        }
    </style>
    ...
    <video-js data-account="1752604059001"
      data-player="H1xW7NWcz"
      data-embed="default"
       data-application-id=""
       controls=""></video-js>
    <script src="https://players.brightcove.net/1752604059001/H1xW7NWcz_default/index.min.js"></script>

Component constructors

In Video.js 4, and version 5 via the shim, component constructors (such as Player and ControlBar) were available as properties of the videojs function:

 videojs.${ComponentName}

This is no longer the case. The videojs.getComponent function should be used instead:

var ControlBar = videojs.getComponent('ControlBar');

SliderHandle component

This component was not in the 5.x player, but was restored via the shim for those users who were extending it. It is now removed entirely.

Properties/Methods and alternatives

The following are a number of Video.js properties from 4.x were copied to 5.x by the compatibility shim. They are no longer present in 6.x, but alternatives are supplied:

Creating a custom plugin

In version 5 of Brightcove Player when you created a custom plugin the first line of the plugin used the videojs.plugin() method. For example:

videojs.plugin('scrollIntoView', function() {
  var myPlayer = this,
    isAdPlaying = false;
  ...

You should now use the videojs.registerPlugin() method instead. For example:

videojs.registerPlugin('scrollIntoView', function() {
  var myPlayer = this,
    isAdPlaying = false;

Although videojs.plugin() is deprecated in version 6, if used it will not error but you will see a warning in the console. You cannot use videojs.registerPlugin() with version 5 players.

IMA3 plugin

After upgrading to Brightcove Player 6, you will need to manually reinstall the IMA3 plugin using Studio. See the Step-by-Step: Implementing Advertising document for details.

If you are comfortable using the Player Management API, you can also upgrade the IMA3 plugin using curl. Specifically, here is the API reference to Update a player. Note that this can be done in the same Player Management API call that you use to actually upgrade the player.

Flash HLS and crossdomain.xml

In some special cases when using a Brightcove Player release 6.13.0 and later, you will need to use a crossdomain.xml file. This will be required when:

• You are using your own CDN(s).
• You are using Brightcove Player in such a way that it must use Flash. See the Determining Which Rendition Will Play document for when this could occur.

If these criteria are met, you will have to use a crossdomain.xml file at the root domain from where the media is being served. For example, if you are serving content from

https://www.domain.com/media/video.m3u8

then a crossdomain.xml file must exist on

https://www.domain.com/crossdomain.xml

Since the player swf is hosted on players.brightcove.net, it is recommended to use *.brightcove.net. An example crossdomain.xml appears as follows:

<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*.brightcove.net" />
</cross-domain-policy>

You will need to supply the proper domain(s). For more details, see Quick Tip: A Guide to Cross Domain Policy Files.

Working with HTTPS

When you are loading an HTTPS asset from an HTTP page or vice versa, you need to include the secure attribute with a value of false as follows:

<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*.brightcove.net" secure="false"/>
</cross-domain-policy>