support Contact Support | system status System Status
Page Contents

    Brightcove Player 5 to 6 Migration Guide

    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.

    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:

    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>

    Page last updated on 13 Oct 2020