Javascript HTML5视频未在Amazon WebView中自动启动_Javascript_Android_Android Webview_Html5 Video_Amazon Fire Tv

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

javascript android

Javascript HTML5视频未在Amazon WebView中自动启动,javascript,android,android-webview,html5-video,amazon-fire-tv,Javascript,Android,Android Webview,Html5 Video,Amazon Fire Tv,我正在尝试使用Amazon WebView组件为Amazon FireTV开发一个视频应用程序。我无法使视频自动播放，我已尝试使用HTML5视频DOM属性和事件，并设置视频标记属性autoplay=“autoplay”。以下是HTML代码： <!DOCTYPE html> <html> <head> <title>Test player</title> <script type="text/

我正在尝试使用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>


测试播放器
document.addEventListener（“DOMContentLoaded”，函数（）{
log（'DOM-Loaded！'）；
var player=document.getElementById（'video-player'）；
player.autostart=true；
player.src=”http://www.w3schools.com/html/mov_bbb.mp4";
player.load（）；
addEventListener（“canplay”，函数（）{console.log（'play'）；document.getElementById（'video-player'）.play（）；}，false）；
}，假）；
您的浏览器不支持视频渲染

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

this.wrapper=（AmazonWebView）findviewbyd（R.id.wrapper）；
initializeWebView（this.wrapper，0xFFFFFF，false，null）；
this.wrapper.setFocusable（false）；//绝不允许将焦点放在WebView上，因为它会阻止播放/暂停、快进和快退按钮
AmazonWebChromeClient webClient=新的AmazonWebChromeClient（）；
this.wrapper.setWebChromeClient（webClient）；//需要使用HTML5元素
AmazonWebSettings browserSettings=this.wrapper.getSettings（）；
浏览器设置.setPluginState（AmazonWebSettings.PluginState.ON）；
setJavaScriptEnabled（true）；
addJavascriptInterface（新的JSChannel（this.wrapper），“appChannel”）；
browserSettings.setUseWideViewPort（true）；

我还在清单中设置了internet权限和硬件加速。我需要在Java代码中添加一些东西才能自动播放视频吗？

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

要解决这个问题，您需要从容器apk通过Javascript桥发出video.play（）消息（我这样做是为了响应HTML中的loadedmetadata事件，不过您可以使用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();
}

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

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

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

在我的例子中，似乎即使从JavascriptInterface对象运行JavaScript代码也不起作用。这似乎是因为我没有调用WebSettings对象的方法

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

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