HTML5 Content

Broadsign supports the display of dynamic HTML5 content on Broadsign Control Player. To enable this content, we provide some tools and configurations:

  • Chromium
  • JavaScript variables
  • Transparency effects
  • Content caching

Whether you use a Windows or Linux operating system, to use HTML5 content in Broadsign Control Products, you will need to use the Chromium browser.

You can enable Chromium in the Products section of your player configuration profile. See The HTML Tab.

Note: As of Broadsign Control v11.1, Chromium will not work on WinXP (though it will work on v11.0 and earlier). If you try to use Chromium on WinXP (Broadsign Control v11.1+), you will receive the following error message: "[2018-08-01T15:29:51](message) Frame [YourFrameID]. Could not play ad copy id [YourAdCopyID]. Could not find an appropriate codec."

Note: As of v11.1.0, Broadsign updated the version of Chromium we use with Broadsign Control Player. If you are updating to Broadsign Control v11.1.0+ from v10.3.0-v11.0.0, and use Chromium, you will need to create a new configuration profile for v11.1.0.

Broadsign Control Products can run content that pulls variables and customize behaviours on-the-fly.

When displaying HTML5 content, you can pull JavaScript variables at the level of ad copies, display units or players.

For more information, see Content Variables.

You can render HTML5 content semi-opaque or completely transparent.

Transparency will provide effects similar to the following image:

For details about system requirements and configuring Broadsign Control Administrator, see Transparency.

Once you enable the Chromium browser, you enable our Chromium caching mechanism, by default.

As a result, if there is no network connection, or if the document takes a few seconds to fully load and you do not want customers to see an incomplete page on screen, Broadsign Control Player will use content from the cache.

For more information, see The HTML Tab.

Note: If your HTML Package contains a video that should start when the Ad Copy is displayed on screen, use the BroadSignPlay() function. This function is called at the same moment the Ad Copy is displayed on screen, allowing you to pre-buffer the content and control its starting time. For more information, see BroadSignPlay().

You can retrieve data from the Internet by using your HTML Package in two ways:

  • Directly, such as displaying a video.
  • Indirectly, such as fetching information through an API to then decide what to display on the screen.

The origin of an HTML file executed outside of a web server is "file://". By default, many servers will prevent requests from said origin to be executed, as an ongoing process to prevent XSS (cross-site scripting) attacks.

If you are managing the remote server to which your HTML file is pointing, make sure that the header Access-Control-Allow-Origin is set to "*". This will allow the origin of the requester to be anything. Doing so, however, may introduce a security risk, so Broadsign suggests to add custom headers in your request that will allow the remote server to authenticate the requester as legitimate. The custom header can be a token that the remote server will verify and either accept or refuse the connection.

If your web redirect ad copy produces an HTTP error -- whether client (4xx) or server (5xx) -- the player will skip to the next item in the loop. Skipping the content ensures that neither error messages nor black screens appear on your monitors.

If you are using the Chromium web browser, and nothing is drawn on the screen at playback time even if the HTML file is not empty, the Ad Copy is discarded.

For more information, see HTTP Errors and Incidents.

Due to security reasons, the HTML player does not receive the focus by default. As a result, if the HTML5 page requires any keyboard input, the keystrokes do not reach the page unless the HTML page calls the JavaScript function BroadSignObject.requestFocus();.

When calling that function, the HTML page grabs the player focus and any keystroke are then sent to the HTML page.

We recommend not calling the requestFocus() function before the HTML page is displayed. To ensure that the function is called at that point, place the call inside the BroadSignPlay() function .

Copy 
function BroadSignPlay(){
    BroadSignObject.requestFocus();
}

BroadSignPlay() is called only when the HTML page is shown on the screen, so the keystrokes are sent to the page only from that moment.