Web 应用常见问题解答


Web 应用常见问题解答

以下是有关 Amazon Fire TV Web 应用的常见问题解答。

问: 如何为 Web 应用自定义亚马逊遥控器后退按钮的行为?
“后退”按钮不会引发标准键事件。此按钮的默认行为是导航回历史记录堆栈中,直到 WebView 位于根页面,并且一旦后续有按下后退的操作,则将关闭应用而不通知 Web 应用。作为一种解决方法,您可以使用历史记录 API 通过推送到 OnLoad 事件中的历史记录堆栈来捕获“后退”按钮。

请注意,Chromium v25 中有一个错误,它在页面加载时触发 onpopate 事件。这增加了以下解决方法的复杂性。有关此错误的信息,请参阅针对问题 63040 的 Chromium 文档: 添加 window.history.state,这样在加载后就不会触发 popstate。

使用历史记录 API 时有两种可能的解决方法。只需要其中一种解决方法。以下示例是首选的解决方法。它使用状态来确保它作用于正确的 popate 事件。

window.addEventListener("load", function () {
    window.addEventListener("popstate", function () {
        if (window.history.state !== "backhandler") {
            // 将后端处理程序代码放在这里
            window.history.pushState("backhandler", null, null);
        }
    });
    window.history.pushState("backhandler", null, null);
});

第二种非首选的解决方法设置一个超时,以延迟注册 onpopate 事件,直到加载之后。这是可行的,但依赖于计时器,因此不是主要建议。

    window.addEventListener("load", function() {
    setTimeout(function() {
        window.onpopstate = function(event) {
            showConfirmDialog();
            window.history.pushState(null, null, null);
        };
    }, 0);
    window.history.pushState(null, null, null);
});
问: 如何正确关闭 Web 应用?
许多应用需要显式关闭或结束应用。例如,它们可能会覆盖“后退”按钮行为,以便在关闭应用之前显示一个确认对话框,并希望确保窗口在被用户选择时正常关闭。下面的代码段提供了一种执行此操作的方法。
window.open("", "_self").close();
问: Amazon Fire TV 的 Web 应用是否可以支持数字版权管理 (DRM) 进行媒体播放?
不可以,Web 应用平台目前不支持任何形式的 DRM 进行媒体播放。有关本机 FireTV 应用的 DRM 支持的详细信息,请参阅 Fire TV 设备规格页面的 DRM 部分。
问: 我的 Web 应用是否需要在视频播放过程中禁用屏幕保护程序?
是的,你的应用应该在视频播放期间禁用 Fire TV 上的屏幕保护程序,以允许长时间运行而无需用户交互。提交应用时,请选中视频播放时防止休眠复选框。

否则,屏幕保护程序将在一段时间不活动后出现,就像浏览主菜单时一样。

问: Amazon Fire TV 的 Web 应用可以使用 HTTP 直播 (HLS) 吗?
是。​Web 应用平台支持 HLS 视频播放。但是,请注意以下已知问题:
  • 如果在加载或缓冲期间放入后台,视频不会自动暂停。作为解决方法,请使用页面可见性 API 手动暂停视频。有关使用页面可见性 API 检测焦点更改的信息,请参阅 Web 应用入门
  • 短视频片段(约 1-2 秒)可能会在播放过程中导致暂停和伪影。
  • 不支持在 HLS 流中查找。
  • 不支持获取 HLS 视频的持续时间。
  • 当用户在 HLS 播放期间执行语音搜索时,视频将暂停;当播放恢复时,视频从头开始播放。
  • HLS 的替代方法 VisualOn 不存在这些问题。请注意,VisualOon 仅在全屏模式下运行,因此您不能使用叠加或自定义控件。
问: Amazon Fire TV 的 Web 应用是否可以使用 Blob Interface API?
否。Web 应用平台目前不支持 Blob API。请注意,Blob 对象不正确地存在于命名空间中,这可能会导致某些功能检测库错误地将平台识别为支持 BLOB。
问: 为什么我的 Web 应用在音频和视频播放期间显示不变的持续时间 1:40 秒?
对于音频和视频元素,持续时间属性在初始化期间错误地报告了 100 秒 (1:40) 的时间。如果您此时设置了文本字段而未更新它,它将不正确地显示 1:40。实际上,媒体元素开始播放后,正确的值就会显示出来。以下代码示例介绍了在初始化期间使用 durationchange 事件以正确的持续时间更新元素的解决方法。
video.addEventListener("durationchange", function() {
    // 当这个事件触发时,媒体持续时间应该可用
    document.getElementById("duration").innerHTML = video.duration;
});
问: 如何允许用户使用遥控器控制视频播放?
某些 HTML5 元素无法使用遥控器获得焦点。例如,div 和 span 元素无法使用遥控器获得焦点。此外,如果您依赖默认视频控件,则单个播放暂停前进倒回按钮无法获得焦点。但是,视频元素可作为一个整体获得焦点,并且可使用遥控键进行控制。
问: 我是否可以启动虚拟键盘并告诉何时提交了文本?
当用户按下文本输入字段上的选择按钮时,将显示虚拟键盘。此键盘可供亚马逊遥控器或亚马逊游戏控制器使用。目前,无法以编程方式启动虚拟键盘(例如,通过设置焦点)。

如果您想知道用户何时提交了文本,您可以侦听更改事件,如下面的代码所示。请注意,如果用户单击返回按钮而不是提交按钮,则不会触发此事件。

<input id="test" value="">

var testInput = document.getElementById("test");
testInput.addEventListener("change", function(e){
    console.log(this.value);
});
问: 为什么我的应用在第三方身份验证页面中显示意外行为?
如果您重定向到同一 WebView 中的第三方身份验证页面,而不是使用 window.open() 创建新的 WebView,则身份验证页面将替换历史记录中的原始登录页面。这可能会导致在具有多个登录选项的场景(例如,谷歌或 Facebook)中出现问题。问题在于,如果用户改变了登录的想法,则无法返回。替换了应用的身份验证页面将通常只会关闭。

以下操作会导致此类导航问题:

  • 重定向窗口位置 -> window.location.href = "google_authentication_link"
  • 使用 window.location.replace() 函数

改用 window.open() 函数。

问: 我的 Web 应用是否可以支持 MOV 文件?
否,目前 Amazon WebView 不支持 MOV 文件。
问: 我是否可以使用 CSS 视口单元?
您可以使用 vw/vh/vmin/vmax 单元,但不能与 CSS translate() 函数一起使用。在当前版本的 AWV (v25) 中,您不能使用 CSS 视口单元转换绝对定位的元素。这是 Chromium v25 中的一个已知问题。请参阅 Chromium 文档中的问题 137617:vh、vw 单元在 css 转换中不起作用。作为解决方法,您可以使用 v25 中的以下计算来获取不支持的 CSS 属性中的等效视口单元值(以像素为单位)。
1vw = ( window.innerWidth/100 )
1vh = ( window.innerHeight/100 )

M vw = ( window.innerWidth/100 ) * M
N vh = ( window.innerHeight/100 ) * N
问: 如何为我的 Web 应用模拟 720p 环境?
要模拟 720p 环境,请将以下元标记放入 Web 应用页面的标头中。请注意,初始版本在技术上不支持视口元标记,并在 1080p 显示器上放大页面(可能导致页面失真)。这使得下面的代码段更像是一个变通方法,而不是解决方案。
<meta name="viewport" content="initial-scale=1.5, user-scalable=no">

此元标记设置一个视口,表示 Web 应用页面占用的区域,并将缩放级别设置为 150%。结果是,Web 应用内容看起来与它在 720p 显示器上时一样。

有关更多信息,请参阅“Web 应用入门”中的“分辨率和页面缩放”部分 (../fire-tv/getting-started-with-web-apps.html)。

问: 我是否可以使用 VisualOn 进行媒体播放?
您不能强制 Amazon Fire TV 或 Fire TV Stick 使用 VisualON 进行媒体播放。平台会自动选择最佳的播放器来处理视频类型。

从 Amazon Fire TV 1.5 和 Fire TV Stick 1.1 开始,这些平台不再支持 amazon_enhanced_hls 属性,因为平台会根据视频类型自动选择最佳播放器(本机或 VisualON)。已编写为具有 amazon_enhanced_hls 属性的页面将继续加载到合适的播放器上;但是,视频播放不会自动进入全屏模式。在 JavaScript 中,该页面必须根据需要请求进入全屏模式。

问: 如何提高缩放性能?
当视频元素获得焦点时,通常会通过设置 CSS 属性“高度”和“宽度”来放大其大小。这种做法会导致在导航过程中进行完全背景重绘。改用 -webkit-transform: scale() 来调整图像大小,以避免不必要的重绘。例如,下面的 CSS 代码会导致不必要的重绘:
.focused .video-element-thumb {
    width: 288px;
    height: 162px;
    //...
}

以下 CSS 代码避免了不必要的重绘:

.focused .video-element-thumb {
    -webkit-transform: scale(1.125, 1.125);
    //...
}
问: Fire TV 的 Web 应用是否支持 Web Audio?
是。​从 Amazon Fire TV 1.5 和 Fire TV Stick 1.1 开始,Fire TV 支持 Web Audio。有关更多信息,请参阅 Web 应用入门
问: 如果我对按钮使用 img 标签,是否必须包含 alt 文本?
是。​使用 img 标签作为按钮的应用(使用 onClick 处理程序)必须具有 alt 属性才能在辅助功能模式下读取这些按钮。否则,用户在辅助功能模式下无法访问按钮。
问: Amazon Fire TV 的 Web 应用是否支持已知媒体源扩展 (MSE)?
否。Fire TV 的 Web 应用中禁用 MSE 支持(但不适用于其他平台)。由于 MPEG-DASH 是基于 MSE 构建的,因此也不支持 MPEG-DASH。在没有 MSE 提供的自适应流媒体支持的情况下,最终用户设备可能需要较长的时间才能从网络拥塞中恢复,而且搜索可能需要较长的时间。但请注意,Amazon Fire TV 平台上的 Web 应用确实支持其他自适应流媒体标准 HLS。