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

HTML5 video not starting automatically in Amazon WebView

本文关键字：WebView 自动启动 Amazon 视频 HTML5      更新时间：2023-09-26

我正在尝试使用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代码中添加一些内容才能自动播放视频吗？

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

为了解决这个问题，你需要从容器apk通过Javascript桥触发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();
}

默认情况下，亚马逊和安卓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);
相关文章：