开发人员控制台

网页应用常见问题解答


网页应用常见问题解答

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

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

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

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

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);
});

第二种变通方法并非首选,它需要设置一个超时值,将注册onpopstate事件延迟到加载之后。这虽然可行,但依赖于计时器,因此不是主要建议。

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

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

问: Amazon Fire TV的网页应用可以使用HTTP直播(HLS)吗?
是。​网页应用平台支持HLS视频播放。但是,请注意以下已知问题:
  • 如果在加载或缓冲期间被置于后台,视频不会自动暂停。作为变通方法,请使用页面可见性API手动暂停视频。有关使用页面可见性API检测焦点更改的信息,请参阅网页应用入门
  • 短视频片段(约1-2秒)可能会在播放过程中导致暂停和伪影。
  • 不支持在HLS流中查找。
  • 不支持获取HLS视频的持续时间。
  • 当用户在HLS播放期间执行语音搜索时,视频将暂停;当播放恢复时,视频从头开始播放。
  • HLS的备选方法VisualOn中不存在这些问题。请注意,VisualOn仅在全屏模式下运行,因此您不能使用叠加或自定义控件。
问: Amazon Fire TV的网页应用是否可以使用Blob Interface API?
否。网页应用平台目前不支持Blob API。请注意,Blob对象错误地存在于命名空间中,这可能会导致某些功能检测库错误地认为平台支持BLOB。
问: 为什么我的网页应用在音频和视频播放期间显示不变的持续时间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()函数。

问: 我的网页应用是否可以支持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
问: 如何为我的网页应用模拟720p环境?
要模拟720p环境,请将以下元标记放入网页应用页面的标头中。请注意,视口元标记在技术上不受初始版本支持,且在1080p显示屏上会放大页面(可能导致页面失真)。这使得下面的代码段更像是一个变通方法,而不是解决方案。
<meta name="viewport" content="initial-scale=1.5, user-scalable=no">

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

有关更多信息,请参阅网页应用入门中的“分辨率和页面缩放”部分。

问: 我是否可以使用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属性“height”和“width”来放大其大小。这种做法会导致在导航过程中进行完整背景重绘。改用-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 Audio?
是。​从Amazon Fire TV 1.5和Fire TV Stick 1.1开始,Fire TV支持Web Audio。有关更多信息,请参阅网页应用入门
问: 如果我对按钮使用img标签,是否必须包含alt文本?
是。​使用img标签作为按钮的应用(具有onClick处理程序)必须有alt属性,才能在辅助功能模式下读取这些按钮。否则,用户在辅助功能模式下无法访问按钮。
问: Amazon Fire TV的网页应用是否支持已知媒体源扩展(MSE)?
否。Fire TV的网页应用中禁用MSE支持(但这不适用于其他平台)。由于MPEG-DASH是基于MSE构建的,因此也不支持MPEG-DASH。如果没有MSE提供的自适应流媒体支持,最终用户设备可能需要较长的时间才能从网络拥塞中恢复,而且搜索可能需要更长的时间。但请注意,Amazon Fire TV平台上的网页应用确实支持另一个自适应流媒体标准 - HLS。