-->

JWPlayer Javascript API for Android Webview

2020-05-30 04:50发布

问题:

I'm trying to get JWPlayer to return an alert when a few specific events happen from a flash player playing a local video. If you notice from the code below, onComplete, JWPlayer should return an alert, which can then be intercepted by onJsAlert from setWebChromeClient so I can do stuff with that information. Am I doing something wrong?

A possible reason, I can find here: JWplayer Javascript interaction not working that it's being loaded locally. Is there any way I can bypass this issue? Would it be easier to load somehow by calling localhost? Is that even possible?

For those of you curious about why I generate an HTML file instead of just having one move from the assets - after scouring the Internet to figure out how to get a local flv player working correctly, the best option was to generate the HTML file with the custom information and write the file to the same directory as the FLV (hence the FileWriter function).

HTML code for JWPlayer embed:

private void createVideoHtml(File flvDirectory, File htmlFile, String videofilename)
{
    String htmlPre = "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"></head><body style='margin:0; padding:0;'>";  
    String htmlCode =
            "<script type='text/javascript' src='"+ flvDirectory.getAbsolutePath() + "/jwplayer.js'></script>" +
            "<div id='mediaspace'>EZ Stream TV FLV Player</div>" +
            "<script type='text/javascript'>" +
            "jwplayer('mediaspace').setup({" +
            "'flashplayer': '"+ flvDirectory.getAbsolutePath() + "/player.swf', 'file': '" + videofilename + "', 'backcolor': 'FFFFFF', 'frontcolor': '000000', 'lightcolor': '000000'," +
            "'screencolor': '000000', 'volume': '100', 'autostart': 'true', 'mute': 'false', 'quality': 'false', 'controlbar': 'bottom', 'width': '100%', 'height': '100%'," +
            "events: { " +
            "onComplete: function() { alert('COMPLETED');}" +
            "}});" +
            "</script>";
    String htmlPost = "</body></html>";
    String finalHTML = htmlPre + htmlCode + htmlPost;

    try {
        FileWriter f = new FileWriter(htmlFile);
        PrintWriter p = new PrintWriter(f);
        p.print(finalHTML);
        p.close();
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } 
}

Code for webview and handling the Javscript alert:

webView = (WebView)findViewById(R.id.web_player);
    webView.getSettings().setBuiltInZoomControls(false);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setLoadsImagesAutomatically(true);
    webView.getSettings().setPluginsEnabled(true);
    webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
    webView.getSettings().setAllowFileAccess(true);
    webView.setInitialScale(60);
    webView.setBackgroundColor(Color.BLACK);
    getWindow().addFlags(128);
    webView.getSettings().setUserAgentString("Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 (.NET CLR 3.5.30729)");
    webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

    webView.setWebChromeClient(new WebChromeClient() {  
        @Override  
        public boolean onJsAlert(WebView view, String url, String message, final android.webkit.JsResult result)  
        {  
            Log.d(TAG, message);
            new AlertDialog.Builder(view.getContext()).setMessage(message).setCancelable(true).show();
            result.confirm();
            return true;
        }
    });

回答1:

You can refer to the code below for JWPlayer to Webview

private void createVideoHtml(File flvDirectory, File htmlFile, String videofilename)
{
    String htmlPre = "<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body style='margin:0; padding:0;'>";  
    String htmlCode =
        "<script type='text/javascript' src='"+ flvDirectory.getAbsolutePath() + "/jwplayer.js'></script>" +
        "<div id='mediaspace'>EZ Stream TV FLV Player</div>" +
        "<script type='text/javascript'>" +
        "jwplayer('mediaspace').setup({" +
        "'flashplayer': '"+ flvDirectory.getAbsolutePath() + "/player.swf', 'file': '" + videofilename + "', 'backcolor': 'FFFFFF', 'frontcolor': '000000', 'lightcolor': '000000'," +
        "'screencolor': '000000', 'volume': '100', 'autostart': 'true', 'mute': 'false', 'quality': 'false', 'controlbar': 'bottom', 'width': '100%', 'height': '100%'," +
        "events: { " +
        "onComplete: function() { alert('COMPLETED');}" +
        "}});" +
        "</script>";
    String htmlPost = "</body></html>";
    String finalHTML = htmlPre + htmlCode + htmlPost;

    try {
        FileWriter f = new FileWriter(htmlFile);
        PrintWriter p = new PrintWriter(f);
        p.print(finalHTML);
        p.close();
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
}

webView = (WebView)findViewById(R.id.web_player);
webView.getSettings().setBuiltInZoomControls(false);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setPluginsEnabled(true);
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webView.getSettings().setAllowFileAccess(true);
webView.setInitialScale(60);
webView.setBackgroundColor(Color.BLACK);
getWindow().addFlags(128);
webView.getSettings().setUserAgentString("Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 (.NET CLR 3.5.30729)");
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

webView.setWebChromeClient(new WebChromeClient() {  
    @Override  
    public boolean onJsAlert(WebView view, String url, String message, final android.webkit.JsResult result)  
    {  
        Log.d(TAG, message);
        new AlertDialog.Builder(view.getContext()).setMessage(message).setCancelable(true).show();
        result.confirm();
        return true;
    }
});


回答2:

I had the same problem while working with jwplayer, my conclusion was that the onComplete event isn't trustable in some cases. Can you benchmark other events does work like the onTime event ?

Otherwise use the onIdle event and measure the time left ( getDuration - getPosition ) to get a custom onComplete event.