HTML5 视频未在 Amazon WebView 中自动启动答案

【问题标题】：HTML5 video not starting automatically in Amazon WebViewHTML5 视频未在 Amazon WebView 中自动启动
【发布时间】：2014-10-21 13:32:16
【问题描述】：

我正在尝试使用 Amazon WebView 组件为 Amazon FireTV 开发视频应用程序。我无法让视频自动播放，我尝试使用 HTML5 视频 DOM 属性和事件，还设置了视频标签属性 autoplay="autoplay"。这是 HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Test player</title>
        <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function () {
                console.log('DOM Loaded!');
                var player = document.getElementById('video-player');
                player.autostart = true;
                player.src = "http://www.w3schools.com/html/mov_bbb.mp4";
                player.load();
                player.addEventListener("canplay", function () { console.log('play'); document.getElementById('video-player').play(); }, false);
            }, false);
    </script>
</head>
<body>
    <video style="background: #e0e0e0; width: 400px; height: 320px;" id="video-player" controls="controls" src="" autoplay="autoplay" >Your browser does not support Video rendering</video>
    <br />
</body>
</html>

初始化WebView的Java代码如下（在onCreate方法中）：

this.wrapper = (AmazonWebView) findViewById(R.id.wrapper);
factory.initializeWebView(this.wrapper, 0xFFFFFF, false, null);

this.wrapper.setFocusable(false); // Never allow focus on the WebView because it blocks the Play/Pause, Fast Forward and Rewind buttons

AmazonWebChromeClient webClient = new AmazonWebChromeClient();

this.wrapper.setWebChromeClient(webClient); // Needed in order to use the HTML5 <video> element
AmazonWebSettings browserSettings = this.wrapper.getSettings();
browserSettings.setPluginState(AmazonWebSettings.PluginState.ON);
browserSettings.setJavaScriptEnabled(true);
this.wrapper.addJavascriptInterface(new JSChannel(this.wrapper), "appChannel");
browserSettings.setUseWideViewPort(true);

我还在清单中设置了互联网权限和硬件加速。我是否需要在 Java 代码中添加一些内容才能自动播放视频？

【问题讨论】：

标签： javascript android android-webview html5-video amazon-fire-tv

【解决方案1】：

FireTV 和一般的 Android 一样，不支持 HTML5 中的视频自动播放（是的，我知道这很痛苦）

要解决这个问题，您需要通过 Javascript 桥从容器 apk 触发 video.play() 消息（我这样做是为了响应 HTML 中的加载元数据事件，尽管您可以使用 canPlayThrough或其他事件来触发它）

在 Java 中：

@JavascriptInterface
public void vidLoaded() {
    WebViewActivity.this.runOnUiThread(new Runnable() {
    public void run() {
        webView.loadUrl("javascript: document.getElementById(\"video-player\").play();");
        }
    });
    Log.v(TAG, "Start playing video via Java Bridge");
}

在您的 HTML 中：

document.getElementById("video-player").addEventListener('loadedmetadata', vidLoad, false);
....
function vidLoad() {
    document.getElementById("video-player").removeEventListener('loadedmetadata', vidLoad, false)
    // use a Java method to trigger "play" on the video via JavaScriptInterface
    appChannel.vidLoaded();
}

【讨论】：

就我而言，似乎即使从 JavascriptInterface 对象运行 JavaScript 代码也不起作用。这似乎是因为我没有调用 WebSettings 对象的setMediaPlaybackRequiresUserGesture(false) 方法。
另外，模拟按键事件的一种方法是使用this post中提到的 Instrumentation 对象

【解决方案2】：

默认情况下，Amazon 和 Android WebView 似乎都需要用户的手势（按键或按钮按下）来开始媒体播放。可以通过调用 WebSettings 对象的 setMediaPlaybackRequiresUserGesture(false) 方法来更改此行为，如下所示：

AmazonWebSettings browserSettings = webView.getSettings();
browserSettings.setMediaPlaybackRequiresUserGesture(false);

通过这种方式，您可以在 HTML5 应用中使用 JavaScript 代码播放/暂停视频（不使用 Java）：

document.getElementById('player').addEventListener('canplaythrough', function () {
    this.play();
    console.log('canplaythrough: Player started');
}, false);

【讨论】：