Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android WebView with iframe embeds doesn't show on 4.2.2 and below

I'm currently trying to implement a youtube embed on my android app which uses a WebView to display it's content and I'm targeting API 14 and above but problem is the iframe youtube embeds doesn't show on my webview on 4.2.2 and below but works fine on 4.3 and above version. I'm lost on what I missed but for sample here's the code I'm using to implement:

String customHtml = "";

        String video; // = "<iframe src=\"http://www.youtube.com/embed/" + "dRvIiIVoVNw" + "\" width=\"100%\" height=\""+ 320 +"px\" frameborder=\"0\"></iframe>";

        video = "<div id=\"player\"></div>" +
                "    <script>" +
                "      var tag = document.createElement('script');" +
                "      tag.src = \"https://www.youtube.com/iframe_api\";" +
                "      var firstScriptTag = document.getElementsByTagName('script')[0];" +
                "      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);" +
                "      var player;" +
                "      function onYouTubeIframeAPIReady() {" +
                "        player = new YT.Player('player', {" +
                "          height: '390'," +
                "          width: '640'," +
                "          videoId: 'dRvIiIVoVNw'," +
                "          events: {" +
                "            'onReady': onPlayerReady," +
                "            'onStateChange': onPlayerStateChange" +
                "          }" +
                "        });" +
                "      }" +
                "      function onPlayerReady(event) {" +
                "        event.target.playVideo();" +
                "      }" +
                "      var done = false;" +
                "      function onPlayerStateChange(event) {" +
                "        if (event.data == YT.PlayerState.PLAYING && !done) {" +
                "          setTimeout(stopVideo, 6000);" +
                "          done = true;" +
                "        }" +
                "      }" +
                "      function stopVideo() {" +
                "        player.stopVideo();" +
                "      }" +
                "    </script>";

        customHtml = "<html>" + "<body>"
                    /*add the video here*/
                + video
                + "<b><font size=\""
                + 5 + "\">"
                //+ "<div id='wrap'>"
                + "Test title"
                + "</font></b>"
                + "<font size=\"" + 3 + "\"><br><br><i>Detail1: " + "Test" + "<br/>" + new_date + "<br />Detail2: "+ "Test" +"</i></font><br><br>"
                + "<font size=\"" + 3 + "\">"
                + "Detail content" + "</font>"
                + "<br><br><br></body></html>";

        webView.loadData(customHtml, "text/html; charset=utf-8", "UTF-8");
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebChromeClient(new WebChromeClient());
        webView.getSettings().setPluginState(WebSettings.PluginState.ON);
        webView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
        webView.setWebViewClient(new DetailWebViewClient());

DetailWebViewClient is just a simple override:

private class DetailWebViewClient extends WebViewClient {

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if (url.contains("http")) {
                Intent webView = new Intent(getBaseContext(), ActivityWebView.class);
                webView.putExtra("url", url);
                startActivity(webView);
                return true;
            }
            return false;
        }

        @Override
        public void onReceivedError(WebView view, int errorCode,
                                    String description, String callbackUrl) {

            super.onReceivedError(view, errorCode, description, callbackUrl);

            Toast.makeText(getBaseContext(),
                    description + " errorcode=" + errorCode, Toast.LENGTH_SHORT)
                    .show();

        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
        }

    }

Now what I tried is both the iframe one and the iframe API here but no luck on both.

I also use android:hardwareAccelerated="true" on my manifest but still doesn't work. I've also searched on other questions with same problems but all those solutions didn't work either on my end (WebChromeClient, PluginsEnabled, HardwareAccelerated). Hope you anyone can help me on this.

like image 582
KaHeL Avatar asked Mar 30 '15 06:03

KaHeL


1 Answers

Fixed it already and the problem is these lines:

webView.getSettings().setPluginState(WebSettings.PluginState.ON);
webView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);

So here's the full webview settings I used:

        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        webView.getSettings().setSupportMultipleWindows(true);
        webView.setWebChromeClient(new WebChromeClient());
        webView.setHorizontalScrollBarEnabled(false);
        webView.loadData(customHtml, "text/html; video/mpeg", "UTF-8");
        webView.setWebViewClient(new DetailWebViewClient());

And there you go now working fine on my end. :)

like image 135
KaHeL Avatar answered Oct 22 '22 17:10

KaHeL