Web App FAQ (Fire TV)
The following are frequently asked questions about Amazon Fire TV Web Apps.
- Q: How do I properly close a web app?
- Many apps need to explicitly close or end the application. For example, they may override the Back button behavior to show a confirmation dialog prior to closing the app, and want to ensure the window is properly closed when selected by the user. The snippet below provides a method of doing so.
window.open("", "_self").close();
- Q: Can web apps for Amazon Fire TV support digital rights management (DRM) for media playback?
- The Web App Platform supports DRM for Widevine L3. For details about DRM support for native FireTV applications, see the DRM section of the Specifications for Fire TV Devices page.
- Q: Does my web app need to disable the screen saver during video playback?
- Yes, your app should disable the screen saver on the Fire TV during video playback to allow for long running times without user interaction. When you submit your app, select the Prevent Sleep for Video Playback check box.
Otherwise, the screen saver appears after a period of inactivity, just as it would during navigation through the main menu.
- Q: Can web apps for Amazon Fire TV use HTTP live streaming (HLS)?
- Yes. HLS video playback is supported in the Web App Platform. However, be aware of the following known issues:
- Videos do not pause automatically if put in background while loading or buffering. As a workaround, use the Page Visibility API to manually pause videos. For information on using the Page Visibility API to detect focus changes, see Getting Started with Web Apps.
- Short video segments (~1-2 sec) may cause pauses and artifacts during playback.
- Seeking in an HLS stream is not supported.
- Getting the duration of an HLS video is not supported.
- When the user performs a voice search during HLS playback the video is paused, and when the playback resumes, the video starts from the beginning.
- An alternative to HLS that does not have these issues is VisualOn. Be aware though that VisualOn runs only if full-screen mode, and so you cannot use overlays or custom controls.
- Q: Can web apps for Amazon Fire TV use the Blob Interface API?
- Yes, Amazon WebView is based on Chromium Android WebView, which supports the Blob API.
- Q: Why does my web app show an unchanging duration of 1:40 seconds during audio and video playback?
- For both audio and video elements, the duration property incorrectly reports a time of 100 seconds (1:40) during the initialization period. If you set your text field at this time and do not update it, it will improperly show 1:40. The correct value is in fact made available once the media element has begun playback. The following code example shows a workaround of using the
durationchange
event to update the element with the correct duration during initialization.video.addEventListener("durationchange", function() { // when this event fires, the media duration should be available document.getElementById("duration").innerHTML = video.duration; });
- Q: How do I allow users to control video playback using the remote?
- Some HTML5 elements cannot be focused with the remote. For example, div and span elements cannot be focused with the remote. Also, if you rely on default video controls, the individual Play, Pause, Forward, and Rewind buttons cannot be focused. However, the video element as a whole can be focused and can be controlled with the remote keys.
- Q: Can I launch the virtual keyboard and tell when text has been submitted?
- The virtual keyboard appears when the user presses the Select button on an text input field. This keyboard can be used by either the Amazon Remote or the Amazon Game Controller. Currently, there is no way to launch the virtual keyboard programmatically (for example, by setting focus).
If you want to know when the user has submitted text, you can listen for the change event, as demonstrated in the following code. Note that this event does not fire if the user clicks the Back button rather than the Submit button.
<input id="test" value=""> var testInput = document.getElementById("test"); testInput.addEventListener("change", function(e){ console.log(this.value); });
- Q: Why does my app show unexpected behavior with third-party authentication pages?
- If you redirect to third-party authentication page within the same WebView, rather than using
window.open()
to create a new WebView, the authentication page replaces the original login page in history. This can cause an issue in scenarios with multiple login options (for example, Google or Facebook). The problem is that users cannot go back if they change their mind about logging in. The authentication page that replaced the app will typically just close.The following actions cause such navigation problems:
- Redirecting the window location ->
window.location.href = "google_authentication_link"
- Using the
window.location.replace()
function
Instead, use the
window.open()
function.Note: Usingwindow.location.assign()
does not work in the current WebView. - Redirecting the window location ->
- Q: Can my web app support MOV Files?
- No, currently Amazon WebView has no support for MOV files.
- Q: Can I use CSS viewport units?
- You can use the
vw/vh/vmin/vmax
units except in conjunction with the CSStranslate()
function. In the current release of AWV (v25), you cannot translate an absolutely positioned element using CSS viewport units. This is a known issue in v25 of Chromium. See Issue 137617: vh, vw units don't work in css transforms in the Chromium documentation. As a workaround, you can use the following calculation in v25 to get the equivalent viewport unit value in pixels for the unsupported CSS properties.1vw = ( window.innerWidth/100 ) 1vh = ( window.innerHeight/100 ) M vw = ( window.innerWidth/100 ) * M N vh = ( window.innerHeight/100 ) * N
- Q: How can I simulate a 720p environment for my web app?
- To simulate a 720p environment, put the following meta tag in the header of your web app page. Please note that the viewport meta tag is technically unsupported for initial release and scales pages up on 1080p displays (potentially causing page distortion). This makes the following snippet more of a workaround than a solution.
<meta name="viewport" content="initial-scale=1.5, user-scalable=no">
This meta tag sets a viewport, representing the area the web app page occupies, and sets a zoom level of 150%. The result is that the web app content looks like it would on a 720p display.
For more information, see the "Resolution and Page Scaling" section on Getting Started with Web Apps.
- Q: Can I use VisualOn for media playback?
- You cannot force Amazon Fire TV or Fire TV Stick to use VisualOn for media playback. The platform automatically chooses the best player to handle the video type.
Note: The
amazon_enhanced_hls
video attribute flag was introduced on 1.4.1 (Amazon Fire TV) and 1.0.1 (Fire TV Stick) for applications to route HLS playback to the VisualOn player. The downside of this attribute was that playback would take place in full-screen with built-in controls and the web developer did not have an option to override the controls.As of Amazon Fire TV 1.5 and Fire TV Stick 1.1, these platforms no longer support the
amazon_enhanced_hls
attribute because the platform automatically chooses the best player (native or VisualOn) depending on the video type. Pages that were authored to have theamazon_enhanced_hls
attribute will continue to load on a suitable player; however, video playback will not automatically go to full screen. The page must request to go full screen in JavaScript as needed. - Q: How can I improve scaling performance?
- When a video element gets focus, its size is often scaled up by setting the CSS property "height" and "width". This practice causes full background repaint during navigation. Use
-webkit-transform: scale()
instead for image resizing to avoid unnecessary repaints. For example, the following CSS code causes unnecessary repaints:.focused .video-element-thumb { width: 288px; height: 162px; //... }
The following CSS code avoids unnecessary repaints:
.focused .video-element-thumb { -webkit-transform: scale(1.125, 1.125); //... }
- Q: Is Web Audio supported in web apps for Fire TV
- Yes. Starting with Amazon Fire TV 1.5 and Fire TV Stick 1.1, Fire TV supports Web Audio. For more information, See Getting Started with Web Apps.
- Q: If I use the
img
tag for buttons, do I have to include alt text? - Yes. Applications using
img
tag as buttons (with onClick handlers) must have thealt
attribute to have those buttons read out in accessibility mode. Otherwise, the buttons are not accessible to users in accessibility mode. - Q: Are Known Media Source Extensions (MSE) supported in web apps for Amazon Fire TV?
- MSE is supported in Web Apps for Fire TV. As is MPEG-DASH and HLS.
- Q: What are the new security updates in Amazon WebView?
- Change in Amazon WebView v84: Chromium has updated to allow only HTTPS contents to be loaded. WebView will auto-upgrade the insecure content by rewriting the URL to HTTPS, without a fallback to HTTP if the content is not available over HTTPS. In v84, only audio and video content was auto-upgraded. The mixed-content-autoupgrades feature is enabled by default.
-
Changes in Amazon WebView v87: Autoupgrade Image Mixed Content. This feature will autoupgrade optionally-blockable mixed content (HTTP content in HTTPS sites) by rewriting the URL to HTTPS, without a fallback to HTTP if the content is not available over HTTPS. Image mixed content autoupgrades is enabled by default.
- Q: Is retrieving a user's advertising ID or ad tracking preferences supported in web apps?
- No, web apps on Fire devices don't support retrieval of the advertising ID or ad tracking preferences.
Last updated: Aug 30, 2023