From SpinetiX Support Wiki
"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
Displaying video or streaming content from sites like YouTube and Vimeo, is possible on the HMP400 using the Web Page layer. This method doesn't work though for HMP350 and HMP300 models because the webkit process dealing with web content has limited resources allocated and lower priority - not enough for real-time rendering of that web page. A possible workaround is to download those video(s) locally (using browser add-ons, extension etc.) and then import the video into your Elementi project or upload it onto the player web interface.
Display a web page
Usually, web pages are designed to be opened and used interactively within a browser - the user will scroll and click within the content to get to the information is looking for. Because of that, in most cases, web pages are not suitable to be shown on a digital signage screen, where people are just passing by and usually don't have any way to interact with the DS screen. 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 players previous to the HMP400 don't have a built-in web rendering engine.
But, can a web page be displayed by the player? Well, it depends on the player model.
This feature requires DSOS Kiosk or DSOS Systems activation licenses.
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.
An example of such 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, available starting with Elementi 2015 for HMP300 and HMP350 models, respectively Elementi 2020 for HMP400.
Display complex web content
- If the web page displays in Elementi, make sure to test it on the player as well because the player has limited resources comparing to the PC running Elementi. Video content is only supported on HMP400 and HMP400W.
- 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.
- 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.
- 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 for frames embedded into the web page.
The Web Robot default purpose is to automatically fill up and submit authentication forms on websites, using the credentials stored on the player under “Saved passwords”, respectively “Network Credentials” in Elementi.
Here is a summary of what happens if a saved password exists for the URI of the web page to be displayed:
- The Web Robot tries to find a
<form>field 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 optional.
- Given these 2 or 3 HTML elements, it will fill the password in the field which is of type “password”, if a username field was found it will fill the username inside and then it will click on the submit button.
- 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 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.
- If the automatic authentication fails because non-standard fields are used on that page or the process requires multiple steps, the Web Robot engine can be "taught" what to do to pass the authentication, as well as to perform other actions like: navigate, scroll, zoom on content of interest, and/or click through consent popups on HTML5 pages. For such cases, please contact our Professional Services Team at email@example.com.
Display data from a web service
If you want to display data from social networks, web services, APIs or similar sources, you can use the data feed feature - the HMP can connect to most data sources from the web using the data-driven widgets from 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