HTML Content Creation Guidelines for Cisco Vision Dynamic Signage Director

This module provides some general guidelines for creating HTML5 content for playback on the media players in Cisco Vision Dynamic Signage Director.

Note: These guidelines should generally work for the media players in Cisco Vision Dynamic Signage Director. However, certain elements may not render as expected. Test all of your HTML content before putting it into production. For more information, see Verify HTML Content in Cisco Vision Dynamic Signage Director.

■blank.gifBest Practices for HTML Features with Hardware-Acceleration

■blank.gifContent Restrictions for HTML5

■blank.gifGuidelines for Creation of HTML5 Pages

■blank.gifHTML5 for Touchscreens

■blank.gifAnimations and Add-on Libraries

■blank.gifNetwork Latency Workaround

■blank.gifVerify HTML Content in Cisco Vision Dynamic Signage Director

■blank.gifRotated UHD Output

Best Practices for HTML Features with Hardware-Acceleration

Note: This section describes some of the hardware-accelerated features and guidelines that generally should work for the media players. There may be limitations that are not documented here.

The following features and effects are hardware-accelerated and recommended:

■blank.gifSVG graphics combined with CSS transforms

■blank.gifEffects that use -webkit-transform (preferred), or transform

■blank.gifAnimations that use -webkit-animation-* and -webkit-keyframes

■blank.gifAny CSS transitions (for example, -webkit-transition)

Note: It is not required to use the “ -webkit- ” prefix, but we recommend it as a best practice.

The following features are not hardware-accelerated and should be avoided:

■blank.gif -ms-transform, -moz-transform, or -o-transform

Note: This restriction includes avoiding other unsupported Chromium features that begin with -ms- and -moz- and -o-.

■blank.gifJavascript-based animations and effects

■blank.gifVideo only when not tagged with the hwz attribute, or hwz attribute is set to OFF.

■blank.gifAvoid loading or referencing sites that load all content into one, very large HTML page. That requires a large amount of physical and virtual memory.

Note: The video element, by default, is not hardware-accelerated and is not recommended or supported—unless you tag the video with the hwz attribute. Up to 2 video regions can be on the screen at the same time, depending on the DMP model you are using. This includes other live and local video regions from Cisco Vision Dynamic Signage Director.

Content Restrictions for HTML5

The following content restrictions are associated with HTML5 pages:

■blank.gifDo not use HTML5 content as a general purpose web browser. The media players are an HTML5 player with interactive capabilities, not a web-surfing tool.

■blank.gifThe media players do not support Flash content. Any HTML5 pages that have embedded Flash content will not display correctly. Most Flash-authoring applications, including the Adobe Creative Suite, have tools that allow you to export Flash content as HTML5.

■blank.gifThe media players do not support Media Source Extensions (MSE).

■blank.gifCertain video streaming sites use codecs that are unsupported.

Table 1 lists several types of streaming and their codecs.

Table 1 Supported Video Streaming Protocols

Type

Description

HLS (HTTP Live Streaming)

Encapsulation: MPEG2-TS for video streams (raw AAC or MP3 for audio-only streams).

Codec: H.264 (or H.265 for video streams).

UDP/RTP

UDP/RTP encoders: Exterity e3535 and Comm-Tec ProTUNE III
Encapsulation: MPEG2-TS or MPEG4.

Note: If the video stream is using RTSP to control connections between endpoints, the video must be encapsulated using MPEG2-TS.

Codec: H.264 (or H.265 for video streams).

HTTP

Codec: Any video codec currently supported (including H.265 for UHD models).

Encryption Protocols

DMPs support several video encryption protocols (via HTML).

■blank.gifThe image size on HTML5 pages is limited to 1920x1080x32bpp. The media players will fail to display pages that contain images that are larger than this restriction.

■blank.gifThe HTML canvas size is 1920X1080, even if you are using UHD video. This restriction applies to all DMP models.

■blank.gifDo not use warping animations when displaying a new piece of content.

■blank.gifWeb DB/indexed DB/local storage settings are ignored for CV-HD2.

■blank.gifCV-HD2 with micro SD card has storage of 60 GB.

■blank.gifFor external HTML pages, we do not recommend using video, especially non-streaming video.

Guidelines for Creation of HTML5 Pages

Follow these guidelines when creating HTML5 pages:

■blank.gifVerify the HTML5 page has the same aspect ratio as your signage display.

If you are displaying HTML5 content in a widget that is smaller than the screen, fit the page to the same aspect ratio as the widget.

■blank.gifUse a lead Div aligned to 0,0 when building an HTML page. This will ensure correct alignment.

■blank.gifBe aware of page refresh behavior. Every time a page refreshes, the player will retrieve all page elements again (without caching them). If the page is being hosted on a remote server, the page elements will be loaded as they arrive over the connection, resulting in poor aesthetics for pages that are frequently refreshed.

For pages that will refresh often, include code (for example, JavaScript, Ajax, other) so only dynamic elements on the page reload when the page refreshes.

■blank.gifIf you are using the web page for digital signage, consider hiding scrollbars.

To hide scrollbars, add the following snippet to your CSS code:

::-webkit-scrollbar { width: 0px; height: 0px;
background: black;}

Rendered Versions and Support

Table 2shows the web-rendering engines used with each firmware version.

Table 2 Web Rendering Engines Used

Web Rendering Engine

Firmware Version

DSD Release Version

Chromium 69

8.1.69

Cisco Vision Director Release 6.3

Chromium 65

8.0.x

Cisco Vision Director Release 6.2

Chromium 45

7.1.x, 7.0.x, 6.2.x

Cisco Vision Director Release 6.1.x, 6.0.x

Chromium 37

6.1.x, 6.0.x

StadiumVision Director 5.0.x

WebKit

5.1.x, 5.0.x, 4.8.x, 4.7.x

StadiumVision Director 4.0.x

Caution: Performance is not guaranteed or tested for external web content. External web content can negatively impact the operation of your DMPs. Test external web content.

HTML5 for Touchscreens

For proper touchscreen operation with HTML5 pages, verify your touchscreen devices are human interface device (HID)-compliant and use standard HID drivers.

Note: Some manufacturers claim support for HID but use custom drivers. Verify standard HID drivers are used.

Animations and Add-on Libraries

This section provides some general rules about support for animations and add-on libraries for the WebKit or Chromium engine on the media players, including:

■blank.gifVector Animations

■blank.gifBitmap Animations

■blank.gifCSS Transforms

■blank.gifAdd-on Libraries

■blank.gifNetwork Latency Workaround

Vector Animations

Use the SVG protocol to specify vector animations.

Bitmap Animations

Bitmap animations display smoothly when they are 1/3 or less of a 1080p HTML canvas. Setting the canvas size to 720p allows for larger high-quality animations to occupy the screen.

CSS Transforms

All CSS transforms should be specified as WebKit transforms. When performing a transform on a <div> or graphics element, we do not recommend specifying the transform in-line.

Animations that use the “top” and “left” properties are rendered using the CPU. We recommend using the translate() and translate3d() methods instead, to offload work onto the GPU, ensuring smoother animations.

The following code shows an example of an effective CSS transform:

<style>
.flipme{
-webkit-animation-name:flipon;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count:1;
-webkit-animation-duration:2s;
}
@-webkit-keyframes flipon
{
0% {-webkit-transform:rotateY(0deg);}
30% {-webkit-transform:rotateY(-90deg);}
100% {-webkit-transform: rotateY(360deg);} image
}
</style>

Add-on Libraries

The jQuery and Prototype libraries are supported on the media players. As a general rule, any add-on libraries for animation will work if they use WebKit-based transformations. To verify if a certain library is compatible, look at a non-minified version of the library to see if it uses WebKit-based transforms.

Network Latency Workaround

When the media player loads HTML content from a URL, there might be a delay based on network latency. Add a preloaded image to lessen this issue.

Verify HTML Content in Cisco Vision Dynamic Signage Director

Best practice: always test your content with Cisco Vision Dynamic Signage Director and the DMP.

■blank.gifAlthough you can choose to test your HTML content independently of the Cisco Vision Dynamic Signage Director system, performance varies from browser to browser.

■blank.gifResults that you get from independent testing on your laptop is not a guarantee for expected results within Cisco Vision Dynamic Signage Director.

Your computer has virtual memory and physical memory beyond the capacity of the DMP, as well as differences in graphics processing.

To do high-level testing of renditions only to test basic functionality of HTML features, consider the following guidelines:

■blank.gifInstall a version of Chromium browser software on your laptop that matches the DMP firmware for your release.

■blank.gifThe version of Chromium varies by DMP firmware release.

DMP firmware for Cisco Vision Dynamic Signage Director Release 6.3 uses Chromium version 69.

Rotated UHD Output

■blank.gifThe CV-UHD2 and CV-UHD DMPS can output portrait HD video (1080x1920) at 60p. Multiple portrait video windows are supported (up to 60p for both the source file and the output), but the total area of all video windows should not exceed 1080x1920.

■blank.gifDisplaying an HTML page and rotated video while using a UHD output mode will cause the video to flicker. This is the case even if the video is not part of the HTML page.

Rotated HD Output

■blank.gifThe CV-HD2 and CV-HD DMPs can output portrait HD video (1080x1920) at 60p. The frame rate of the source video should not exceed 30p.

Time Localization in JavaScript

The JavaScript toLocaleTimeString() call does not retrieve localized time formats (i.e. 24-hour vs. 12-hour clock). Instead, the hour/minute clock defaults to 24-hour time on the media player. The below code provides a workaround in JavaScript to display time using a 12-hour clock:

1.blank.gif Create the following function:

function format12Hour(date)
{
var zero = '0';
hh = date.getHours();
mm = date.getMinutes(); ss = date.getSeconds() if((hh % 12) == 0) hh = 12; else
hh %= 12;
// Pad zero values to 00 hh = (zero+hh).slice(-2); mm = (zero+mm).slice(-2);
ss = (zero+ss).slice(-2);
return hh + ':' + mm + ':' + ss + ' ' + ((date.getHours()
< 12) ? 'AM' :
'PM');
}
 

2.blank.gif Optionally, to not display seconds information, replace the above “return” line with the following:

return hh + ':' + mm + ' ' + ((date.getHours() < 12) ? 'AM' : 'PM');
 

3.blank.gif Implement the function in the HTML script as follows:

var dateString = (startJSDate.getMonth() + 1) + "/" + startJSDate.getDate();
if (!startDateTime.isDateOnly()) {
dateString += " -- " + format12Hour(startJSDate);
}