HTML5 Application Running Methods
This explains how to run developed HTML5 applications and AV media files on the monitor.
There are three methods: via monitor built-in storage, via network, or via USB drive.
Launching from Built-in Storage
Required monitor settings
HTML5 Application Registration and Management
You can configure certificate registration and HTML5 application display orientation.
Procedure: [Pro settings]→[HTML5 platform]
Updating the Firmware to the Latest Version
Update the monitor firmware to the latest version to ensure HTML5 application performance and access the latest features.
Procedure: [Settings]→[System]→[About]→[Device name]
Enable [Install web app]
This is a required setting to launch HTML5 applications on the monitor.
Procedure: [Pro settings]→[Charge USB during standby mode]
To assign the [Home] button to the HTML5 application
Enable by selecting [Web app].
Procedure: [Pro settings] → [Home key behaviour]
After configuration, verify that the URI specified in the startup_uri property of autorun.txt is reflected in [Pro settings] → [HTML5 platform] → [Web app].
Launch with Monitor Power
Enable by selecting [Start-up app].
Procedure: [Pro settings] → [Initial input source]
After configuration, verify that the URI specified in the startup_uri property of autorun.txt is reflected in [Pro settings] → [HTML5 platform] → [Web app].
Installation method
This explains how to install to the monitor’s built-in storage. A USB drive is used for transfer. HTML5 applications can be installed using the copyapp property in autorun.txt.
autorun.txt Configuration
Example autorun.txt configuration for installing HTML5 applications. The copyapp property can also specify installation behavior.
For details, see autorun.txt properties.
{
"action": "copyapp",
"auid": "<app ID>", // Application ID to launch
"copyapp": {
"app": "<app ID>", // Application ID to install (same value as auid)
"startup_uri": "<app ID>" // Optional. Specify when using power-linked launch
}
}After creating the folder, insert the USB drive into the monitor to automatically run the installation. A confirmation dialog may appear on the first installation only.
Content update method
The method for updating content stored in the monitor’s built-in storage varies depending on the save location during installation.
Updating Content Saved in doc Folder
Update files in the /doc/ folder and specify the copyapp property in the action of autorun.txt, the same as the initial installation. Insert the USB drive into the monitor to overwrite the HTML5 application in built-in storage.
Updating Content Saved in media Folder
To update files stored in built-in storage, modify the /media/ folder on the USB drive and specify the update method in the media property of autorun.txt. No need to replace the HTML5 application folder (/sony/apps). There are two update methods (media values): sync and copy. sync performs complete synchronization and deletes differences. copy only overwrites files from the USB drive and adds differences without deleting. Use according to your needs.
1. “sync” (Complete Synchronization)
When the media property is set to sync in autorun.txt, all files saved on the monitor will be completely synchronized with the /media/ folder on the USB drive. Files that do not exist in the /media/ folder will be removed from the monitor.
{
"action": "copyapp",
"auid": "<app ID>",
"copyapp": {
"app": "<app ID>", // Application ID to install
"media": "sync"
}
}2. “copy” (Update, No Removal)
When the media property is set to copy in autorun.txt, files in the /media/ folder on the USB drive will be copied to the monitor. Files that exist on the monitor and not in the /media/ folder will remain.
{
"action": "copyapp",
"auid": "<app ID>",
"copyapp": {
"app": "<app ID>", // Application ID to install
"media": "copy"
}
}Remove method
To uninstall an HTML5 application from the monitor, set the action property in autorun.txt to removeapp. The removeapp property can also specify uninstallation behavior. For details, see autorun.txt properties.
Example
{
"action": "removeapp",
"auid": "<app ID>",
"removeapp": {
"app": "<app ID>",
"media": "remove",
"mode": "confirm"
}
}Launch from External Web Server
Required monitor settings
HTML5 Application Registration and Management
You can configure certificate registration and HTML5 application display orientation.
Procedure: [Pro settings]→[HTML5 platform]
To assign the [Home] button to the HTML5 application
Procedure: [Pro settings] → [Home key behaviour]
After configuration, verify that the URI specified in the startup_uri property of autorun.txt is reflected in [Pro settings] → [HTML5 platform] → [Web app].
Launch with Monitor Power
Enable by selecting [Start-up app].
Procedure: [Pro settings] → [Initial input source]
After configuration, verify that the URI specified in the startup_uri property of autorun.txt is reflected in [Pro settings] → [HTML5 platform] → [Web app].
Launch method
For HTML5 applications on an external web server, the HTTP/HTTPS URL is specified in the web_urlproperty of manifest.json. The USB drive is used to register and launch the application URL to the monitor.
How to Create a Transfer Folder
1. Place Files on USB Drive
Download the “Display Website” sample for convenience. Copy the sample’s /sony/ directory to the USB drive root.
Example “Display Website” Sample
USB:/├ /sony/ ├ autorun.txt ├ apps/webapps/manifestjson_weburl/app/manifest.json ├ manifest.json
2. Create autorun.txt
No changes are needed if using the sample as-is. For a custom application ID, specify the same value as the auid in manifest.json.
Example autorun.txt auid of sample
{
"auid": "net.sony.tv.sample.manifestjson_weburl"
}3. Specify HTTP/HTTPS in “web_url”
Configure the web_url property in manifest.json.
Example Displaying “http://example.com/” at HTML5 Application Launch
{
"name": {
"default": "en_US",
"en_US": "<app display name>"
},
"auid": "net.sony.tv.sample.manifestjson_weburl",
"version": "1.0",
"manifest_version": "1.0",
"app": {
"launch": {
"web_url": "https://example.com/" // Change to URL to display
}
},
"minimum_web_platform_version": "1.0"
}4. Insert the USB drive into the Monitor
Insert the USB drive into the monitor to automatically launch based on autorun.txt and display the website specified in web_url.
Note:
- A confirmation dialog may appear on first launch.
- When specifying web_url as “https“, note the following. May not work if the monitor time is incorrect.
- Confirm the monitor’s date and time settings are accurate.
- Use a properly issued server certificate.
- Import the root certificate to the monitor via [Pro settings] → [HTML5 platform]
Launching from USB Drive
When launching HTML5 applications via USB drive, please refer here.
Required monitor settings
HTML5 Application Registration and Management
You can configure certificate registration and HTML5 application display orientation.
Procedure: [Pro settings]→[HTML5 platform]
Launching HTML5 Applications via USB Drive
Enable Launch web app
This is required when storing and launching an HTML5 application on a USB flash drive.
Procedure: [Pro settings]→[USB drive auto run]→[Launch web app]
Connecting the Application to a Network
Configure the required settings according to your environment.
SSID and Security Settings
Procedure: [Pro settings]→[Wi-Fi access point]
Synchronizing with an NTP Server
Procedure: [Pro settings]→[NTP Server]
To assign the [Home] button to the HTML5 application
Enable by selecting [Custom menu].
Procedure: [Pro settings] → [Home key behaviour]
After configuration, verify that the URI specified in the startup_uri property of autorun.txt is reflected in [Pro settings] → [HTML5 platform] → [Web app].
Launch with Monitor Power
Enable by selecting [Start-up app].
Procedure: [Pro settings] → [Initial input source]
After configuration, verify that the URI specified in the startup_uri property of autorun.txt is reflected in [Pro settings] → [HTML5 platform] → [Web app].
Launch method
Download the “Launch Local Application” sample for convenience. Copy the sample’s /sony/ directory to the USB drive root.
1. Place Files on USB Drive
Place static files such as HTML, JS, CSS, and images in the /doc/ folder.
Sample Folder Structure
USB:/├ /sony/ ├ autorun.txt └ apps/webapps/manifestjson_localpath/ └ app/ ├ manifest.json └ doc/ └ index.html // Launch page (sample)
Tips:
- The “Launch Local Application” sample’s index.html references video.mp4 as a playback target, but video.mp4 is not included. Place any video file in the /doc/ folder.
- For large AV media files such as videos, create and use the /media/ folder. The monitor can be accessed via file://localhost/media/.
For details, see here.
2. Configure manifest.json
No changes are needed if using the “Launch Local Application” sample as-is. For custom files, specify the path in the local_path property of manifest.json.
Sample manifest.json
{
"name": {
"default": "en_US",
"en_US": "<app display name>"
},
"auid": "net.sony.tv.sample.manifestjson_localpath",
"version": "1.0",
"manifest_version": "1.0",
"app": {
"launch": {
"local_path": "file://localhost/doc/index.html" // Path to HTML file to launch
}
}
}3. Display the Monitor
Insert the USB drive into the monitor to automatically launch based on autorun.txt and display the page specified in local_path.
Content update method
To update content, update files in the /doc/ or /media/ folder depending on which files you want to update.