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=\"/" + "dRvIiIVoVNw" + "\" width=\"100%\" height=\""+ 320 +"px\" frameborder=\"0\"></iframe>";
video = "<div id=\"player\"></div>" +
" <script>" +
" var tag = document.createElement('script');" +
" tag.src = \"\";" +
" 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.
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./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./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.
1 Answer
Reset to default 4Fixed 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. :)