Search code examples
javascriptandroidandroid-webviewhtml5-videoamazon-fire-tv

HTML5 video not starting automatically in Amazon WebView

I am trying to develop a video app for the Amazon FireTV using the Amazon WebView component. I cannot make the videos play automatically and I have tried using the HTML5 video DOM properties and events and also setting the video tag property autoplay="autoplay". Here is the HTML code:

<!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>

The Java code for initializing the WebView is as follows (in the onCreate method):

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

I have also set internet permissions and hardware acceleration in the manifest. Do I need to add something to the Java code in order for the videos to play automatically?

Solution

  • It seems like both Amazon and Android WebView require, by default, a gesture from the user (a key or button press) to start the media playback. This behavior can be changed by calling the setMediaPlaybackRequiresUserGesture(false) method of the WebSettings object, like this:

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

    This way you can play/pause the video using JavaScript code in your HTML5 app (not using Java):

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