facebookpixel

Mobile Improvements to Gallery Marquee Template

CMMA Blog

As part of our ongoing improvements to Gallery, we’re releasing major improvements to the mobile presentation of our most popular template, Marquee. The Gallery team has done extensive QA on these changes, but we encourage all customers to review their sites on both mobile and desktop browsers before releasing these changes to their audiences.  

Here’s what you can expect from the upgrade.

Improved Navigation and Search for Sites with Custom Headers

For sites using custom headers, we’ve moved navigation to sit beneath the overall site header, within an area that’s accessible by pressing “BROWSE AND SEARCH VIDEOS.” The image below shows what you can expect. 

2d47dc84 a6a8 4a8b 8f40 54725b73620a

Improved Navigation and Search for Sites Using the Default Header

For sites that use Gallery’s built-in site header, we’ve added a “hamburger” menu that contains both browse and search capabilities. 

4bce7acc a13f 4722 8bad e482fa6cdd6d

Improved Presentation of Header Links

When using the default header, we’ve added prominent links to header items. This should make navigating your site far easier. 

13bfaa58 529a 4d61 bde3 a8c5c7827d88

 

“Load More” Replaces Pagination on Mobile

Prior to this update, Marquee required customers to page through categories with more than 15 videos. This worked well on desktop, but was awkward on phones. We’ve changed this behavior. Now, to load additional videos, users will press the “Load More” button. The button will then disappear, and new videos will appear below the space where the button had been.

528975e3 3f82 464b 8582 ea548a500308

Updating Your Template

To use these new mobile features, you’ll need to re-publish your site. Please make sure to use the preview feature to ensure that the changes look good on all devices that matter to your audience. This is especially important for Gallery owners who have any custom CSS or Javascript in their site. 

Enjoy the upgrade. The entire Gallery team is really proud of these improvements!
 

To view our Partner blog, click here

The Brightcove Player Toolbox

CMMA Blog

One of the missions of the core web player team here at Brightcove is to remove barriers to integration with the Brightcove Player. We aim to delight our customers with the Player’s flexibility, stability, and ease-of-use.

The fundamental architecture of the HTML5 web player has not changed much in the last five years or so. Players are managed via the Player Management API or the Studio (which uses the API), published on-demand, and hosted on our CDN at players.brightcove.net as stand-alone scripts.

In these past five years, web tooling has continued to grow more sophisticated and CDN-hosted JavaScript often does not fit into the new paradigms. Instead of pasting a tag into their web templates or CMS, web developers and other advanced users expect to be able to install a package via npm , import it as an ES module , and bundle it into their application via webpack , Rollup , or similar.

Until now, most of these advanced users have been rolling their own solutions. What that tells us is that our Player ecosystem is not fully meeting our customers’ needs and these users are forced to work around us instead of with us. In order to better serve these users, we are now offering an optional suite of free, open source tools – all available on npm – that can be used with most modern web tooling stacks.

Collectively, we’re referring to these tools as the Brightcove Player Toolbox.

Toolbox Projects

At the time of this writing, the Toolbox includes:

Player Loader

The Player Loader is our official, framework/tooling-agnostic, asynchronous script loader and embed generator for the Brightcove Player. It is independent of any specific toolchain and serves a dual purpose:

  1. It will generate any embed code with many options and support for customizations needed by some Brightcove Player plugins.
  2. It will download player scripts from our CDN asynchronously and automatically initialize any matching embeds.

This tool is entirely runtime-configured, meaning it will always download the latest player at runtime.

The Player Loader is available on npm as @brightcove/player-loader. Get started by reading the README or the Brightcove documentation .

Example

NOTE: While this example uses ES modules, they are not required – you should be able to use CommonJS, AMD, or a simple script tag as well.


  
import brightcovePlayerLoader from '@brightcove/player-loader';

brightcovePlayerLoader({
  refNode: '#player-container',
  accountId: '123456789',
  playerId: 'AbCDeFgHi',
  videoId: '987654321'
})
  .then(function(success) {
    // The player has been created!
    //   success.type will be "in-page" or "iframe"
    //   success.ref will be the player or the iframe element
  })
  .catch(function(error) {
    // Player creation failed!
  });

React Player Loader

The React Player Loader project offers users an official React component that can be used to embed and download a Brightcove Player using the Player Loader behind the scenes.

This component takes all options of the Player Loader (with some exceptions ) and will handle disposing the player when the React component unmounts.

The React Player Loader is available on npm as @brightcove/react-player-loader. Get started by reading the README or the Brightcove documentation .

Example (JSX)

NOTE: React/ReactDOM/global are NOT required, they are only used to show a working example.

import document from 'global/document';
import React from 'react';
import ReactDOM from 'react-dom';
import BrightcovePlayer from '@brightcove/react-player-loader';

let brightcovePlayer;

// A success callback will offer two ways of accessing the underlying player
// or iframe.
const onSuccess = function(success) {
  console.log(success.ref);
  console.log(brightcovePlayer.player);
};

brightcovePlayer = ReactDOM.render(
  ,
  document.getElementById('fixture')
);

Player Loader Webpack Plugin

The Player Loader webpack Plugin is our official webpack plugin for bundling the Brightcove Player. It has a single purpose: to prepend a Brightcove Player to a webpack bundle, avoiding an extra asnychronous HTTP request.

Unlike the Brightcove Player Loader, this tool does not create embeds.

However, it can be used with the Player Loader. In this setup, the webpack plugin will pre-populate a player while the Player Loader will be used to generate embeds. The Player Loader will not re-download Brightcove Players it has already downloaded or detected in memory ahead of time, so any Players prepended to the bundle will not be re-downloaded.

The one caveat with this tool is that it will only download the player at build time. In other words, if you re-publish your player, your webpack bundle will need to be re-created before the player updates on your website.

The Player Loader webpack Plugin is available on npm as @brightcove/player-loader-webpack-plugin. Get started by reading the README .

Example

The following example code would be placed in your webpack.config.js file.

const PlayerLoaderPlugin = require('@brightcove/player-loader-webpack-plugin');

module.exports = {

  // Other webpack configuration here...

  plugins: [
    new PlayerLoaderPlugin({accountId: '123456789', playerId: 'AbCDeFgHi'})
  ]
};

Conclusion

We hope this new collection of tools is helpful to our customers working with the Brightcove Player in modern toolchains.

While the Brightcove Player is neither free nor open source, the tools that comprise the Brightcove Player Toolbox are all free and open source and they fall under the Apache-2.0 license .

In other words, they are not officially supported by Brightcove, Inc. and feedback or bug reports should not be directed at Brightcove Customer Support.

With that caveat out of the way, it’s worth mentioning that our engineers are no strangers to open source and we are committed to doing our best to be responsive to feedback, bug reports, and pull requests on GitHub.

We welcome and encourage anyone to contribute to these open source tools to make them better for everyone!

References

Repositories and Open Source Documentation 
 

Brightcove Support Documentation 
 

To view our Partner blog, click here

Why Does Brightcove Player 6 Include Video.js 7?

CMMA Blog

We have recently made a change to our version number policy in the Brightcove Player that has confused some of our customers. I’m writing to let you know what we changed and why we did it.

Overview

Changes made to Video.js when it was updated from version 6 to version 7 did not significantly alter the behavior of Brightcove Player (details below). These changes didn’t require the kind of special attention and manual opt-in we would usually require with a major version update of Brightcove Player. This is why it’s a major version update for Video.js, but not for Brightcove Player.

We recognize this now takes the Brightcove Player major version out of sync with Video.js, and we recognize this can be slightly confusing to those looking carefully at player internals. But we felt the alternative would have been much more disruptive — to release a Brightcove Player 7 requiring all customers to opt-in to a manual update.

Quick Summary

  • Changes to major version numbers (first number before the dot) indicate large changes, especially those that break compatibility.

  • Brightcove Player is a superset of Video.js, meaning Video.js forms the core.

  • Starting with version 5 we synchronized major versions to make it easier to keep track of which versions go together; Minor version numbers were never synchronized.

  • We updated the major version of Video.js to 7 because, among other things, we removed Flash support and added HLS support.

  • We decided to keep Brightcove Player at version 6 since we added back Flash support (for IE 11 on Win7) on top of Video.js 7 and since Brightcove Player has always included HLS support (this wasn’t a change).

  • With these additions to Brightcove Player we felt the changes weren’t as huge and didn’t require the kind of special attention and manual opt-in we would usually require with a major version update. This is why it’s a major version update for Video.js but not for Brightcove Player.

  • We’re sorry for the confusion this caused, but we felt keeping the major version at 6 correctly communicated the fact that we expect no disruption with the upgrade from Brightcove Player 6.

What Changed?

As of version 6.20 we have now incorporated Video.js 7 as a dependency. In versions 5 and 6 we kept the major version of Video.js and the Brightcove Player the same. Now they’re out of sync again.

Our Objective

Our objective with the Brightcove Player is to provide customers the best user experience with the latest fixes and improvements with the least disruption. Our automatic update system is designed to make sure each version we release has the highest quality and continues to work on our customers’ web sites. We try hard to make every update compatible with existing implementations so our improvements can have the greatest positive impact for our customers.

What Major Version Numbers Mean

We use changes in major version numbers (the first number before the dot) to indicate major changes, especially changes that make our player incompatible with existing integrations. A change to the major version number generally means our customers should take note and special care with the upgrade. For example, with the update from version 5 to 6, we decided we would not automatically upgrade any players — we required customers to opt-in to the change. Since version 5, we have also tried to keep the major version of Video.js the same as the corresponding Brightcove Player version, which we felt made it somewhat easier to track, although minor version numbers (the rest of the version numbers after the first dot) have never been synchronized.

Video.js 7 in Brightcove Player 6

In Video.js 7 we made several major changes including removing Flash support and support for all browsers that require Flash support (older versions of IE). We also added HLS playback support to the core player. These are major changes for Video.js that could have a significant impact on integrations and plugins, which is why we changed the version number.

Brightcove Player is a superset of Video.js, meaning we start with Video.js and add other components to make it easier to use, especially for Brightcove Video Cloud users. As we released Video.js 7 we asked if there was a way to make the improvements in that version available to current Brightcove Player customers without introducing breaking changes that would require an opt-in or other disruptive update. Since Brightcove Player has always had HLS support included by default, the addition of HLS in Video.js 7 was not a change for Brightcove Player 6. Also, by adding Flash support (for IE 11 on Windows 7) in the Brightcove Player superset bundle we determined we could produce a Brightcove Player that was 100% compatible with Brightcove Player 6.

In effect, this means that what is a major, potentially breaking set of changes in Video.js is not nearly as major or potentially breaking for the Brightcove Player. We felt keeping Brightcove Player at version 6 was an accurate way to indicate this and to communicate that there is no reason to take special note or to change integration code.

We recognize this now takes the Brightcove Player major version out of sync with Video.js, and we recognize this can be slightly confusing to those looking carefully at player internals. But we felt the alternative would have been much more disruptive — to release a Brightcove Player 7 requiring all customers to opt-in to a manual update.

I hope this provides you some insight into our decision and why we’re including Video.js 7 with recent Brightcove Player 6 versions. Our goal remains to provide the best user experience with the least disruption with each new version update.

To view our Partner blog, click here

Improvements in Brightcove Player 6.22

CMMA Blog

Last week, we pre-released the Brightcove Player 6.22. This version beings some useful API changes that customers and integrators may be interested in.

Expanded Autoplay Configurations

As part of Video.js 7.1.0 , we’ve made the autoplay configuration more powerful.

Currently, this configuration can be either true or false, which is similar to setting the autoplay attribute (or not) on the element. When it’s true, the player will attempt to autoplay and, if the browser prevents it, will display the so-called Big Play Button.

However, there are cases where customers might want to improve their chances of autoplay succeeding. The expanded autoplay configuration can now accept several new string values (in addition to the existing boolean values).

any

Adding the configuration, {"autoplay": "any"}, will cause the player to call play() on the loadstart event. If playback fails, the player will mute itself and call play() again. If playback still fails, the previous state of muted will be restored.

This value offers the most complete solution – when non-muted autoplay is preferred, but muted autoplay is acceptable.

muted

Adding the configuration, {"autoplay": "muted"}, will cause the player to mute itself and then call play() on the loadstart event. If playback fails, the previous state of muted will be restored.

This value is the most likely to succeed on the first attempt – when muted autoplay is preferred.

play

Finally, adding the configuration, {"autoplay": "play"}, will cause the player to call play() on the loadstart event.

This has a similar chance of succeeding as setting autoplay: true.

Catalog Plugin Improvements

NOTE: For the time being, these features will only be available via the catalog plugin methods – not via configuration or data- attributes.

Standardizing the API

The biggest change we made to the catalog plugin is part of an effort to standardize a library API that has grown over the years to have minor inconsistencies between its methods.

The core of this effort was to add a common get() method that works for all request types and takes a single argument: a conventional catalog parameters object (described below). The get() method will return a Promise object.

For example, fetching a video with the common get() method could look like this:

// Request a video from the Playback API.
player.catalog.get({
  type: 'video',
  id: '123456789',
  adConfigId: 'abc123'
})

  // The request succeeded, load the video data into the player.
  .then(function(data) {
    player.catalog.load(data);
  })

  // The request failed.
  .catch(function(err) {
    videojs.log.error(err);
  });

Additionally, this effort includes backward-compatible changes to the pre-existing methods – getVideo, getPlaylist, getSearch, getSequence, and getLazySequence. These changes are:

  • getVideo, getPlaylist, and getSearch can now take a catalog parameters object as their first argument as an alternative to their current implementations.
  • The third argument to all methods, adConfigId, is now deprecated. Use a catalog parameters object with an adConfigId property instead.
  • Each method still expects a second callback argument and returns an XMLHttpRequest object. If a Promise is preferred, use the common get() method.

It’s important to note that these changes are all backward-compatible. No existing code needs to change!

For example, the above video request could still be made in the old style:

// Request a video from the Playback API.
player.catalog.getVideo('123456789', function(err, data) {

  // The request failed.
  if (err) {
    return;
  }

  // The request succeeded, load the video data into the player.
  player.catalog.load(data);
}, 'abc123');

Catalog Parameters Objects

This is a convention that we hope to use as the basis for describing requests to the Playback API from the Brightcove Player going forward.

It is supported as the first argument to all get* methods.

All values should be strings.

Name Description
type The type of request to make. Must be one of 'video', 'playlist', or 'search'.
accountId The account ID from which to get data. This will default to the account ID of the player.
policyKey The policy key for this account. This will default to the policy key of the player.
id A video or playlist ID or reference ID prefixed by 'ref:'. Required for video and playlist requests!
q A search query. Required for search requests (except where id is used in its deprecated form), ignored for others.
adConfigId A Video Could SSAI ad configuration ID.
tveToken An optional TVE token to be sent as a query string parameter.
limit Supported for playlist and search types only. Limit the number of videos returned.
offset Supported for playlist and search types only. The number of videos to skip.
sort Supported for search type only. How the videos should be sorted for searches.

NOTE: For backward-compatibility, there are two additional, deprecated uses of the id parameter. For search types, the id parameter is supported as a search query instead of q. For search types and sequences, the id parameter can contain a sub-object, which is also a catalog parameters object.

Playlist Limit and Offset

As a consequence of this standardization, we added support for limit and offset query parameters for playlists. This allows customers to implement longer playlist sizes as well as pagination through their playlists. These can be implemented in the getPlaylist() function like this:

// Request a playlist from the Playback API.
player.catalog.getPlaylist({
  id: '123456789',
  limit: '25',
  offset: '0'
}, function(err, data) {

  // If there is an error object, the request failed.
  if (err) {
    return;
  }

  // The request succeeded, load the playlist data into the player.
  player.catalog.load(data);
});

Conclusion

We are pretty excited about these new features in Brightcove Player 6.22. This version is currently in pre-release status, but we’ll be shipping it out to all auto-updating players very soon!

To view our Partner blog, click here

Dealing with DRM – Understanding DRM and How to Produce Protected Content

CMMA Blog

DRM: an acronym that strikes fear into the hearts of CTOs and developers alike. Digital Rights Management (DRM) is a method of securing digital content to prevent unauthorized use and piracy, and it has become a requirement for many streaming video platforms as more premium content is delivered via the public Internet. 

In a nutshell, DRM ensures that video content is stored and transmitted in an encrypted form, so that only authorized users and devices can play it back. Before it is streamed,  video content must be encrypted and packaged, often using multiple DRM schemes for greater device compatibility. When a user attempts to play back a video, the video player requests a key from a license server. The server determines whether the user and device are authorized, before issuing a license response with a decryption key. The player can then decrypt and play back the content for the user.

The figure below illustrates this process. In this series of posts, we’ll dive into the details of setting up a DRM-protected streaming system like the one pictured, starting with an overview of some of the available protection schemes and how to encrypt and package content for each with static delivery. Then we’ll cover how DRM packaging is applied with Dynamic Delivery. 

Flow chart of streaming video workflow with DRM.

If you’re using a full-featured online video platform, like Video Cloud , supporting DRM may be as simple as upgrading your account and configuration to enable it. If you’ve customized your player or built out a custom streaming workflow, you’ll need to update and add some components to support DRM.

Enabling DRM requires changes to at least three components of your streaming workflow:

  1. Content – your assets must be transcoded, encrypted, and packaged in formats compatible with the DRM systems you need to  support.
  2. Player – your video player must be able to request a key from a license server and decrypt the video; this may require different players on different platforms.
  3. License Server – your video player will request decryption keys from a license server every time a piece of content is requested; the license server authenticates and responds to these requests.

Though there are many DRM systems available to protect video content, we only need to worry about The Big Three for supporting the most popular web browsers, devices, and set-top boxes:

  • Google’s Widevine – Widevine-protected content can be played in Chrome and Firefox web browsers, as well as Android and Chromecast devices.
  • Apple’s FairPlay – FairPlay-protected content can be played in Safari on OS X, as well as iPhones, iPads, and AppleTVs.
  • Microsoft’s PlayReady – PlayReady-protected content can be played in IE11 and Edge browsers, Windows Phone, Xbox, and other platforms via SDKs.

This compatibility chart shows a sampling of popular platforms and their compatibility with these DRM systems. See here for more details.

Platform

Widevine
Modular

FairPlay PlayReady
Chrome 17694a1c 1bc7 4bca 8af3 7b2329f6ca78    
FireFox 17694a1c 1bc7 4bca 8af3 7b2329f6ca78    
Internet Explorer 11     17694a1c 1bc7 4bca 8af3 7b2329f6ca78
Microsoft Edge     17694a1c 1bc7 4bca 8af3 7b2329f6ca78
Safari     17694a1c 1bc7 4bca 8af3 7b2329f6ca78  
Android 17694a1c 1bc7 4bca 8af3 7b2329f6ca78    
iOS    17694a1c 1bc7 4bca 8af3 7b2329f6ca78  
Chromecast / AndroidTV 17694a1c 1bc7 4bca 8af3 7b2329f6ca78   17694a1c 1bc7 4bca 8af3 7b2329f6ca78
Roku     17694a1c 1bc7 4bca 8af3 7b2329f6ca78
AppleTV   17694a1c 1bc7 4bca 8af3 7b2329f6ca78  
Fire TV     17694a1c 1bc7 4bca 8af3 7b2329f6ca78
PlayStation     17694a1c 1bc7 4bca 8af3 7b2329f6ca78
Xbox One     17694a1c 1bc7 4bca 8af3 7b2329f6ca78
Samsung Smart TV     17694a1c 1bc7 4bca 8af3 7b2329f6ca78

Packaging Content
To prevent content from being copied or played back by unauthorized players or devices, DRM requires content to be encrypted. It must also be packaged in a compatible format, generally MPEG-DASH or HLS. This can be done as part of the transcoding process, or assets can be encrypted and packaged after the fact. Some platforms and CDNs also support just-in-time encryption and packaging of assets as they are requested by players.

Widevine and PlayReady both support Common Encryption (CENC) and MPEG-DASH , which means you can encrypt and package your content once and decrypt those assets using either DRM system. FairPlay uses SAMPLE-AES encryption and HLS packaging, which means you will need to encrypt and package your content twice if you need to support all three systems. Zencoder allows you to transcode your content once, and transmux that content to both MPEG-DASH with CENC encryption and HLS with SAMPLE-AES encryption, all in one operation.

For each asset that you want to serve with DRM, you’ll need to generate an encryption key, an asset ID, and a key ID. Both CENC and FairPlay use an AES 128-bit key to encrypt content. For FairPlay, you’ll also generate and provide an Initialization Vector (IV) . You can generate these keys and IDs yourself, or use the tools provided by your license server to generate them automatically. 

You’ll ingest these keys and IDs into your license server so that it can be sent to the player, which will use the key to decrypt the content. It’s important to also store this key securely within your platform as a backup; you’ll need access to these keys if you move to a different license server in the future.

The keys and IDs, along with a few other parameters, are also used to encrypt and package the content. The following Zencoder example job illustrates how to encode, encrypt and package content for all three DRM systems, with further description below:

.gist {width:500px !important;} .gist-file .gist-data {max-height: 300px;max-width: 500px;}

This job has three mp4 encodes (mp4-1500k, mp4-1000k, and mp4-500k), which are then used as the source for both the HLS and DASH outputs. The HLS outputs specify the FairPlay DRM method, the encryption_key, the encryption_iv, and the encryption_key_url. For FairPlay, the encryption_key_url is actually a reference to the asset ID, and the format of this URL will vary depending on your license server’s implementation.

The DASH outputs specify the CENC encryption method and the Widevine and PlayReady DRM systems, as well as a few more fields:

Parameter Definition
content_id asset ID (user-defined string)
content_key AES 128-bit encryption key
key_id usually 16 Base64 encoded bytes (user defined or automatically generated)
license_acquisition_url URL of the license server’s Widevine or PlayReady endpoint
provider name of the license server provider

Once your content is encrypted and packaged, it needs to be transferred to your origin server or CDN for streaming to your users. This can also be done as part of a Zencoder job. Stay tuned for the next part of this series, when we’ll dive into how DRM packaging is applied with Dynamic Delivery. 

 

*Post updated on July 17, 2018 by JD Russell. 

To view our Partner blog, click here

Out with the Old, In with the New

CMMA Blog

Yesterday, we pre-released version 6.20.0 of the Brightcove Player, marking the first release using Video.js 7 !

Video.js 7 includes two major changes.

First, it bundles the Video.js HTTP Streaming library into Video.js, adding HLS playback support and experimental DASH playback support to the default Video.js library. The Brightcove Player has long bundled HLS playback support, so this aspect of the update does not significantly affect Brightcove customers.

However, the second change does affect Brightcove customers and it’s one we’re really excited about: the removal of support for Internet Explorer (IE) versions 9 and 10. Going forward, we will only support IE11 and versions 6.20.0 and higher of the Brightcove Player will not function properly in IE versions before 11. The full details of this policy change can be found in the Brightcove Player System Requirements document.

How is Removing Support for Something a Good Thing?

This is a sensible question!

As of June 20th, IEs older than 11 accounted for a mere 0.07% of our Player traffic. However, every quarter we have expended effort to support these outdated browsers. This includes the human effort of running manual tests and debugging potential issues as well as the machine effort of running automated tests. Every hour we spend testing and chasing issues with these browsers is an hour we can’t spend doing work that’s more valuable for the Brightcove Player and our customers.

Further, removing support for old IEs from both Video.js and the Brightcove Player has reduced the size of the default Player from 166KB to 159KB. In other words, after updating to 6.20.0, each Player download from our CDN should send roughly 7KB less data over the wire!

Now, 7KB doesn’t sound like much, but consider it in aggregate. We only need to deliver around 142,857 players from our CDN to save of one gigabyte of bandwidth!

And this savings doesn’t just affect us here at Brightcove. The most important beneficiaries of this change are our customers’ users. They will be consuming less bandwidth from their limited mobile data plans.

What if I Want IE9 or IE10 Support?

If customers need to retain IE9/IE10 support, they can opt out of automatic Brightcove Player updates either in the Studio or via the Player Management API .

Customers still on versions 5.x don’t need to do anything. But we strongly recommend upgrading to 6.x to get all the latest and greatest improvements!

To view our Partner blog, click here