Brightcove Player 5 to 6 Migration Guide

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Topic(s)
General Info
Legacy Migration
Player API References

In this topic, you will learn about issues when migrating from Brightcove Player version 5 to version 6.

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
      class="video-js"
      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
        class="video-js"
        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:

Removed Alternative
vjs videojs
videojs.JSON JSON
videojs.USER_AGENT window.navigator.userAgent
videojs.EventEmitter videojs.EventTarget
videojs.obj.isArray Array.isArray
videojs.round(num, digits) Number(num.toFixed(digits))
videojs.trim(str) str.trim()
videojs.util.mergeOptions videojs.mergeOptions

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.

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 wish to view videos in Internet Explorer on the Windows 7 platform.
  • 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>