Migration guide

Migrating from Video.js to Bradmax

Video.js is one of the most widely deployed players on the web, with a plugin ecosystem that solved a decade of problems for publishers. The reason teams migrate is usually the plugin stack around the player: DRM connectors, ad integrations, analytics and TV support that each need their own owner.

A typical Video.js setup (player, sources, plugins) maps onto Bradmax configuration.

Start Free

The migration, step by step

  1. Keep your sources

    HLS and DASH manifests stay as they are. Bradmax lists them together in the source array and picks the right one per device, so the separate technology selection in Video.js goes away.

  2. Replace the player element and source tag

    A plain container element replaces the <video class="video-js"> markup, and the player source generated for your account replaces the Video.js bundle.

  3. Move sources into the configuration

    The sources array from videojs() moves into dataProvider.source. Poster images, titles and duration are configured on the same object.

  4. Replace plugins with built-in features

    Quality selection, subtitles, ads, analytics, playlists and casting are features of the player rather than separate plugins. Most plugin configuration therefore disappears instead of being ported.

  5. Configure DRM per source

    If a DRM plugin was in use, its licence URLs and authentication data move into the per-source drm object, covering Widevine, FairPlay and PlayReady together.

  6. Restyle with themes or your own CSS

    The built-in themes cover the common cases; for full control the player can be driven through the JavaScript API with your own UI, or the markup styled directly.

  7. Validate across your device matrix

    Run the free plan against your own stream, including the TV or mobile target in your matrix, before switching production traffic.

Before: the Video.js integration

<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet" />
<video id="my-video" class="video-js" controls preload="auto" width="640" height="360">
  <source src="https://cdn.example.com/stream/master.m3u8" type="application/x-mpegURL" />
</video>
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
<script>
  var player = videojs("my-video", {
    autoplay: false,
    controls: true,
    sources: [
      { src: "https://cdn.example.com/stream/master.m3u8", type: "application/x-mpegURL" }
    ]
  });
</script>

After: the same sources in Bradmax 

<!-- The source URL is generated for your account in the client panel. -->
<script src="PLAYER_SOURCE.js"></script>
<div id="player" style="width: 640px; height: 360px; background: #000;"></div>
<script>
  var config = {
    dataProvider: {
      source: [
        { url: "https://cdn.example.com/stream/master.m3u8" },
        { url: "https://cdn.example.com/stream/manifest.mpd" }
      ],
      title: "My stream"
    },
    skin: { theme: "techno" }
  };

  window.bradmax.player.create(document.getElementById("player"), config);
</script>

The same streams, with DRM configured in Bradmax

// The licence servers and authentication data you already use, moved into the
// Bradmax source object. One entry per manifest you serve.
var authenticationXmlBase64Encoded = "PEtleU9TQXV0aGVudGljYXRpb25YTUw+...";

var drmConfig = {
  provider: "default",
  widevine: {
    laUrl: "https://drm-widevine.example.com/getkey",
    customData: authenticationXmlBase64Encoded
  },
  playready: {
    laUrl: "https://drm-playready.example.com/rightsmanager.asmx",
    customData: authenticationXmlBase64Encoded
  },
  fairplay: {
    laUrl: "https://drm-fairplay.example.com/getkey",
    certUrl: "https://drm-fairplay.example.com/cert/server-cert.der",
    customData: authenticationXmlBase64Encoded
  }
};

var config = {
  dataProvider: {
    source: [
      { url: "https://cdn.example.com/stream/manifest.mpd", drm: drmConfig },
      { url: "https://cdn.example.com/stream/master.m3u8", drm: drmConfig }
    ],
    title: "My stream"
  }
};

window.bradmax.player.create(document.getElementById("player"), config);

Video.js concepts and their Bradmax equivalents

Concept Video.js Bradmax
Markup <video class="video-js"> plus a stylesheet A container element plus the player source
Player instance videojs("my-video", options) window.bradmax.player.create(container, config)
Sources sources: [{ src, type }] dataProvider.source: [{ url }], format chosen per device
Poster and metadata poster option and media metadata splashImages, title and duration in dataProvider
Tech order techOrder to force a playback technology Handled by the player
DRM A DRM plugin with its own configuration Per-source drm object: provider, laUrl, certUrl, customData
Quality selection videojs-contrib-quality-levels or a similar plugin Built-in adaptive switching plus quality API events
Ads videojs-ima or another ad plugin VAST, VMAP, VPAID, SGAI and server-side insertion
Analytics A third-party analytics plugin Built-in playback QoE, error and engagement analytics
TV and mobile Plugin or platform dependent Tizen, webOS, Android TV, Chromecast, AirPlay, Flutter and mobile WebViews

Worth knowing

  • Sources, DRM servers and ad tags are unchanged by this migration.
  • Video.js remains a good choice for web-only playback without DRM or monetization requirements; our boundary guide explains where the trade-off changes.

Frequently asked questions

Can I keep my Video.js skin or plugins?

The player has its own skin system and theme set, so a Video.js skin does not transfer. Custom behaviour written as plugins generally becomes configuration or JavaScript API calls, since most common plugins (quality selection, ads, analytics, subtitles) are features of the player itself.

Do I keep my HLS and DASH sources?

Yes, both. Where a Video.js setup needs a separate source technology per format, Bradmax lists the HLS and DASH manifests as source entries and selects the right one for the device.

What replaces the Video.js techOrder?

Nothing you have to configure: format and platform selection are handled by the player. If you need to force a specific behaviour, the JavaScript API and configuration options cover it.

My Video.js player is already working well. Why migrate?

Usually for DRM on premium content, TV or Flutter coverage, or ad insertion at volume. If none of those apply, staying on Video.js is a defensible choice. Our boundary guide explains where the line sits.

References

  • Bradmax player configuration reference Bradmax player documentation, configuration.html
  • Bradmax DRM integration reference Bradmax player documentation, DRM default provider
  • Player source and embed code generation Bradmax client panel

Where to go next

Migrate against your own stream

The free plan is enough to prove the migration on the same manifest, the same DRM servers and your own devices. If you get stuck, an engineer answers.

Start Free