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.

## The migration, step by step

### 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.

### 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.

### 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.

### 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.

### 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.

### 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.

### 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 from hls.js](https://bradmax.com/site/en/guides/migrate-hlsjs-to-bradmax)

- [Migrate from Shaka Player](https://bradmax.com/site/en/guides/migrate-shaka-player-to-bradmax)

- [Open source vs commercial](https://bradmax.com/site/en/guides/open-source-vs-commercial-player)

- [Start free](https://bradmax.com/site/en/signup)

### 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.