All geek questions in one place

How to make Flowplayer play automatically in Android WebView?

I cannot get Flowplayer to automatically play videos in WebView on Android. The video plays perfectly if you clicked the play button in HTML format, but it does not start by itself. This seems to be related to Chrome, as autostart does not work in Android Chrome browser. It works in the Android browser and in Chrome for the desktop (Linux).

I saw this page that suggested adding a WEBM file to work with MP4, but that did not help. I also saw this page mentioning the use of the new setMediaPlaybackRequiresUserGesture () parameter, but that didn't help either.

Has anyone got autostart to work in Android WebView?

Here is my test code that distracts the application to its main components.

package com.example.testautovideo;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        WebView webview = new WebView(this);
        setContentView(webview);

        webview.setWebChromeClient(new WebChromeClient());
        webview.getSettings().setJavaScriptEnabled(true);

        webview.getSettings().setLoadsImagesAutomatically(true);
        // webview.getSettings().setMediaPlaybackRequiresUserGesture(false);  // didn't help
        webview.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return false;
            }
        });

        webview.loadUrl(THE_URL);
    }
}

Here is the source of my webpage. Calls from Flowplayer and jQuery are standard settings. Flowplayer library is the latest free version; jQuery library is the latest version of the product.

<!DOCTYPE HTML>
<html>
<head>
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,target-densitydpi=device-dpi'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="ws:skip" value="false" />
<title>Autoplay Test</title>
<link rel="stylesheet" type="text/css" href="src/js/flowplayer/skin/minimalist.css">
<script type="text/javascript" src="src/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="src/js/flowplayer/flowplayer.min.js"></script>

<script>
$(document).ready(function(){
    function playVideo(){
        var player = flowplayer($('#theVideo'));
        player.play();
    }
    setTimeout(playVideo,10);
});
</script>

<style>
body {
    margin:0;
    padding:0;
    background:#000;
}

#wrapper .flowplayer {
    width:640px;
    height:360px;
}

#wrapper {
    width:640px;
    height:360px;
    background:#000;
    margin:30px auto;
}
</style>
</head>

<body>
<div id="wrapper">
    <div class="flowplayer" id="theVideo">
        <video preload="none" autoplay>
            <source type="video/webm" src="video_1.webm">
            <source type="video/mp4" src="video_1.mp4">
        </video>
    </div>
</div>
</body>
</html>

I know the links may be out of date, but here is a copy of this webpage with the working settings of Flowplayer and jQuery.

+4
source share
3 answers

, Android Honeycomb (API 11) , , . - load() () JavaScript. Android ( setMediaPlaybackRequiresUserGesture(), API 17, .

WebView /, Android. , , , .

, . -, setMediaPlaybackRequiresUserGesture(), MR1 Jellybean. JavascriptInterface . JavaScript, . , - , , . , , .

, JavascriptInterface, , , JavaScipt.

:

{    
    ...

    webView = (WebView) findViewById(id.web);
    webView.setWebChromeClient(new WebChromeClient());
    webView.getSettings().setJavaScriptEnabled(true);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)
        webView.getSettings().setMediaPlaybackRequiresUserGesture(false);

    webView.addJavascriptInterface(new JsInterface(), "AndroidApp");
}

class JsInterface {
    @JavascriptInterface
    public void startVideo() {
        Log.v(TAG, "in JsInterface.startVideo()");
        MainActivity.this.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Log.v(TAG, "in JsInterface.startVideo.run");
                webView.loadUrl("javascript:playVideo()");
            }
        });
    }
}

-:

<!DOCTYPE HTML>
<html>
<head>
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,target-densitydpi=device-dpi'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Autoplay Test</title>
<link rel="stylesheet" type="text/css" href="src/js/flowplayer/skin/minimalist.css">
<script type="text/javascript" src="src/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="src/js/flowplayer/flowplayer.min.js"></script>    
<script type="text/javascript">

function playVideo(){
    var player = flowplayer($('#theVideo'));
    player.load('video_1.mp4');
    player.bind("finish", function() {
        player.play();
    });
}

$(document).ready(function(){    
    AndroidApp.startVideo()    
});
</script>

<style>
body {
    margin:0;
    padding:0;
    background:#000;
}

#wrapper .flowplayer {
    width:640px;
    height:360px;
}

#wrapper {
    width:640px;
    height:360px;
    background:#000;
    margin:30px auto;
}
</style>
</head>

<body>
    <div id="wrapper">
        <div class="flowplayer is-splash" id="theVideo">
            <video preload="none">
                <source type="video/mp4" src="">
            </video>
        </div>
    </div>
</body>
</html>
+4

setMediaPlaybackRequiresUserGesture(false), . HTML , , javascript play() onload, ?

, Chrome Android . WebView, setMediaPlaybackRequiresUserGesture .

+2

setMediaPlaybackRequiresUserGesture.

, javascript- -.

public void triggerPlayVideo()
        {

activity.runOnUiThread( Runnable() {

          @Override
          public void run()
          {
              webView.loadUrl("javascript:playVideo()");
          }

      }

  );  }

, -, / .

0

Source: https://habr.com/ru/post/1533860/

More articles:


All Articles