Setting up Bradmax Player with CDN77

Log in to your Streaming Portal. You can do that by clicking your name in the CDN panel on the top right and choosing "Login to Streamflow".

Navigate to "VIDEO PLAYERS" on the left-hand side of your CDN77 Streaming Portal.

1. If you have not yet created a video player, click on "create new".
2. When the player has been generated, proceed to customise it. For instance, you can edit the many colours of the UI, such as the playback button, the text colours, or completely change the player's skin.
3. Once you are happy with the customisations, click on "save changes".
4. Proceed to click "yes, generate files".

Now it is up to you how you wish to integrate the video player within your project.

1. Click on "Download" if you want to host the video player files yourself.

The benefit of the downloadable player files is that you are able to make changes in your code as you deem necessary based on Bradmax documentation. It is, therefore, more customisable compared to the iframe player. On the other hand, the iframe player is an ideal solution if you are looking to easily share your videos with the world within a few clicks.

2. If you have decided to go with the "embed code", proceed to customise the code as you wish within the "Player embed code generator" page.

The "Media URL additional fallback format" field allows you to add a backup link to your video in case the first link does not work or is not supported by the device.

The "splash image URL" field refers to the image that you can see in the video player before the video itself starts playing. We recommend uploading a picture of your choice to your CDN Storage and adding the link to it through a CDN Resource URL.

Skin customisation

Bradmax player is highly customisable. For instance, the skin configuration on Streamflow allows you to change the setup colours as well as adding your logo and social media buttons.

Skin configuration

In this section, you can choose to change from three different settings:

Skin and Color

• Autoplay setup: When “Show skin on player initialize” is enabled, this option allows the player skin to be visible after player setup without any user interaction (click, tap, hover with the mouse over the player).
  
  The “Show Picture-in-Picture button” is an important feature that allows you to enable an additional button in the player’s skin. This button allows the enabling or disabling of Picture-in-Picture mode. When PIP mode is enabled and the browser supports such a feature, the player is detached from the browser. The user can watch the video as a floating window while browsing other websites or interacting with other application.
• Skin & Color setup: You will be able to change the skin and the player’s colour scheme according to your preference and the suggested choices.

Brand and share

• Share buttons setup: Enabling this feature allows you to add a share button to the player for social media (Facebook, Twitter, LinkedIn, etc.). Also, you can add an “embed” button that lets the users embed your stream elsewhere.

• Logo setup: You can upload your own logo a PNG to make the player more harmonious with your brand.

End splash

• Splash setup: You can choose between splash views (countdown, reload, social, tiles) to use at the end of your stream.

Player configuration

In this section, you can find two of the highly recommended features to have in an HTML5 player:

• Autoplay video on initialize: Enabling this feature allows the player to start playback just after setup. Otherwise, the user has to click the “play” button for playback.
• Autoload subtitles name: These options would enable you to automatically load subtitles or audio files to be automatically played alongside the video stream.

Embedding Bradmax Player

There is one more key element that should be specified within the “Player embed code generator”. It is the “Media ID”.

Media ID is an identifier for the media, and it is a required parameter for the proper functioning of Bradmax content analytics and statistics within your Streamflow panel. It is a string, so it can be very customisable.