Web content
Introduction
"Can web content be displayed by the player?" is definitely one of the frequently asked questions we receive. The answer would be yes, although it is not as straightforward, as it depends on the player model, plus "web content" can mean a lot of things, such as:
- an image from a certain web page
- a video from sites like YouTube, Vimeo, etc.
- an entire web page
- some data from a social network site or web service
Furthermore, the players' rendering engine has been optimized for SVG (Scalable Vector Graphics) content, which is generally better suited for displaying typical digital signage content than HTML is, and the player models before the HMP400 don't have a built-in web rendering engine.
Display media from a web page
If you want to display an image/video from a web page, you have two options:
- Download that image / video on your PC, then import it into your Elementi project or upload it onto the player web interface.
- Display that image directly from the web - for that, find the image address, add a media layer from the Edit panel and enter the image address as the layer URI. This is not recommended for videos.
Display web streaming content
The HMP400/W, iBX410/W, iBX440, and third-party DSOS players can display streaming content from websites such as YouTube, Vimeo, or other HTML5-based video platforms.
See the full article on "Web video streaming".Display a web page
Displaying web pages on a digital signage screen is usually not a good idea, because these are mainly designed to be opened and used interactively within a browser — the user will scroll and click within the content to get to the desired information, while in the case of digital signage screens, people are just passing by and usually don't have any way to interact with the screen. Furthermore, with public pages, there's no control on what the page content might actually be, nor on the server reliability.
But can a web page be displayed by the player? Well, it depends on the player model, as detailed below.
Notes:- The SVG (Scalable Vector Graphics) content generated on SpinetiX platforms is generally better suited for displaying typical digital signage content than HTML is. Because of that, the players' rendering engine has been optimized for displaying SVG.
- If the web page displays in Elementi, make sure to test it on the player as well because the player has limited resources compared to the PC running Elementi.
- Web pages requiring basic authentication can be displayed, if the proper credentials are added into Elementi / HMP, if the URL is not redirected to another page. This doesn't apply to frames embedded into the web page.
- Web content can only be used on a single screen when creating a multiscreen project.
By player model
Full support
These players feature an HTML5 rendering engine based on Chromium, with support for hardware-accelerated video decoding and WebGL — most of the web pages can be displayed, including embedded video content.
This feature can be activated with a KIOSK or SYSTEMS Feature Set.
Partial support (deprecated)
These players use a pseudo-HTML engine based on PhantomJS — only static and semi-static web pages can be displayed, while complex web pages would probably not work. Embedded video content is not supported.
Warning:No support
The DiVA and legacy players don't support displaying web pages.
By content type
Display static HTML content
If you want to display a static HTML page (like simple presentational websites), the best is to use the original file from your design application (e.g., Illustrator, Photoshop) and export it to SVG or save the graphical assets as PNG / JPEG images.
Static content can also be displayed using the Web Page layer.
An example of such a static HTML page is this one: https://download.spinetix.com/content/elementi/weblayer/ .
Display semi-static HTML content
For semi-static websites, which combine HTML code, JS / CSS animations, and eventually simple Ajax calls, the solution is to use the Web Page layer.
Display complex web content
Displaying highly dynamic websites, like those where all the content is generated through JavaScript, including the animations, through the Web Page layer should work on HMP400/W and iBX players, but might not work on the HMP300 and HMP350 ones, because of the limited support and resources required in the process.
Web Robot
Displaying protected web pages on digital signage screens usually requires connecting a USB keyboard and entering the credentials manually, which is not very practical. Fortunately, the HTML5 engine on the HMP400/W and iBX players features a Web Robot that can automatically fill up credentials and submit authentication forms on websites, meaning that such protected web pages can be displayed without needing human intervention to handle the login part. This works only when the login process is relatively standard (i.e., a simple form with username/password input fields and a submit button) and the credentials are stored on the player under “Saved passwords” (respectively under “Network Credentials” in Elementi). Here is a summary of what happens in the background:
- The Web Robot checks whether a saved password exists for the web page to be displayed.
- If so, it tries to find a
<form>field on that web page with at least one<input>field of type “password”, and a submit button (or similar element). It also tries to locate another<input>field before the password field that could credibly be of a username or email address; having a username field is, however, optional. - Given these 2 or 3 HTML elements are found, the Web Robot fills the saved password in the field which is of type “password”, the username or email in the other field, and then it clicks on the submit button.
Notes:- If loading a web page triggers a redirect to another page that handles the authentication, when entering the credentials, the server URI must match the address of the authentication page. For instance, the target page might be a protected Power BI dashboard (https://app.powerbi.com/...), but you need to enter your Microsoft account credentials for https://login.microsoftonline.com/ instead, as that's where the sign-in is actually handled.
- The built-in Web Robot cannot handle a complex login process, like non-standard form fields, credentials that must be passed over multiple steps (like the login to Office 365), two-factor authentication, etc. In such cases, you can either enter the credentials manually using a USB keyboard or ask the SpinetiX Professional Services team to customize the Web Robot to pass the authentication (note that for two-factor authentication, human intervention is still required!), as well as to perform other actions like: navigate, scroll, zoom on the content of interest, and/or click through consent popups on HTML5 pages. If interested in this service, please contact your local SpinetiX Partner or SpinetiX for a quote.
PhantomJS
The HTML engine on HMP350 and HMP300 players is based on PhantomJS, a JavaScript library supporting the most common HTML5 features.
- An extensive list of supported HTML5 features when rendering a web page can be found in this screenshot. Be aware that this is only the result of the web page rendering test; the HMP350/HMP300 fully support natively all SVG rendering features, including video and audio using media layers.
- Phantom.js 2.1.1 version is used starting with firmware 4.1.x and Elementi 2016. Phantom.js 1.9.8 version is used within firmware 4.0.x and Elementi 2015.
- The rendering speed of the web page is approximately the same as for an iPhone 4.
Warning:Display data from a web service
To display data from social networks, web services, APIs, or similar sources, use the data feed feature - the player can connect to most data sources online via the data-driven widgets in Elementi.
You might want to check these tutorials as well:
- RSS ticker tutorial to see how to display Google News as a ticker;
- JSON data feeds tutorial to see how to connect to a REST API based on JSON.
Display data from a web page
If you want to display data some data from a web page and the data you are looking for is included into the page as pure text (and not generated upon rendering), you can use the data feed widgets from Elementi (or write some jSignage/JavaScript code if page is more complex) to retrieve the text content of the entire page, parse it (i.e. remove all the HTML tags and keep only the needed information) and display the results on the screen. The HTML table widget is an example of such customization of the existing data feed widgets.