Loading Youtube video through iframe in Android webview
Solution 1
As stated in the android Webview documentation,
HTML5 Video support
In order to support inline HTML5 video in your application, you need to have hardware acceleration turned on, and set a WebChromeClient.
For full screen support, implementations of onShowCustomView(View, WebChromeClient.CustomViewCallback) and onHideCustomView() are required, getVideoLoadingProgressView() is optional.
Solution 2
I have full customized ifram for youtube view
public class Act_VideoPlayer extends Activity {
WebView webView;
ProgressBar progressBar;
ImageView back_btn;
String video_url = "KK9bwTlAvgo", html = "";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.full_screen_youtube_video_screen);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
back_btn = (ImageView) findViewById(R.id.full_videoview_btn);
back_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webView.loadData("", "text/html", "UTF-8");
finish();
}
});
webView = (WebView) findViewById(R.id.webView);
progressBar = (ProgressBar) findViewById(R.id.progressBar);
if (video_url.equalsIgnoreCase("")) {
finish();
return;
}
WebSettings ws = webView.getSettings();
ws.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
ws.setPluginState(WebSettings.PluginState.ON);
ws.setJavaScriptEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.reload();
if (networkUtil.isConnectingToInternet(Act_VideoPlayer.this)) {
html = getHTML(video_url);
} else {
html = "" + getResources().getString(R.string.The_internet_connection_appears_to_be_offline);
CustomToast.animRedTextMethod(Act_VideoPlayer.this, getResources().getString(R.string.The_internet_connection_appears_to_be_offline));
}
webView.loadData(html, "text/html", "UTF-8");
WebClientClass webViewClient = new WebClientClass(progressBar);
webView.setWebViewClient(webViewClient);
WebChromeClient webChromeClient = new WebChromeClient();
webView.setWebChromeClient(webChromeClient);
}
@Override
protected void onDestroy() {
super.onDestroy();
try {
webView.loadData("", "text/html", "UTF-8");
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
public void onBackPressed() {
super.onBackPressed();
try {
webView.loadData("", "text/html", "UTF-8");
finish();
} catch (Exception e) {
e.printStackTrace();
}
}
public class WebClientClass extends WebViewClient {
ProgressBar ProgressBar = null;
WebClientClass(ProgressBar progressBar) {
ProgressBar = progressBar;
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
ProgressBar.setVisibility(View.VISIBLE);
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
ProgressBar.setVisibility(View.GONE);
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
LogShowHide.LogShowHideMethod("webview-click :", "" + url.toString());
view.loadUrl(getHTML(video_url));
return true;
}
}
public String getHTML(String videoId) {
String html = "<iframe class=\"youtube-player\" " + "style=\"border: 0; width: 100%; height: 96%;"
+ "padding:0px; margin:0px\" " + "id=\"ytplayer\" type=\"text/html\" "
+ "src=\"http://www.youtube.com/embed/" + videoId
+ "?&theme=dark&autohide=2&modestbranding=1&showinfo=0&autoplay=1\fs=0\" frameborder=\"0\" "
+ "allowfullscreen autobuffer " + "controls onclick=\"this.play()\">\n" + "</iframe>\n";
LogShowHide.LogShowHideMethod("video-id from html url= ", "" + html);
return html;
}
}
Solution 3
This worked for me:
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
String frameVideo = "<html><body>Youtube video .. <br> <iframe width=\"320\" height=\"315\" src=\"https://www.youtube.com/\" frameborder=\"0\" allowfullscreen></iframe></body></html>";
mWebView.loadData(frameVideo, "text/html", "utf-8");
mWebView.loadUrl("http://www.youtube.com/");
mWebView.setWebViewClient(new WebViewClient());
Solution 4
Try this its working fine..
mWebView = (WebView) findViewById(R.id.web);
String videoURL = "https://www.youtube.com/embed/R52bof3tvZs";
String vid = "<html><body style=\"margin: 0; padding: 0\"><iframe width=\"100%\" height=\"100%\" src=\""+videoURL+"\" type=\"text/html\" frameborder=\"0\"></iframe><body><html>";
WebChromeClient mWebChromeClient = new WebChromeClient(){
public void onProgressChanged(WebView view, int newProgress) {
}
};
mWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
mWebView.setWebChromeClient(mWebChromeClient);
mWebView.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
mWebView.loadUrl("javascript:(function() { document.getElementsByTagName('video')[0].play(); })()");
}
});
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setAppCacheEnabled(true);
mWebView.setInitialScale(1);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
if (Build.VERSION.SDK_INT < 17) {
Log.i("GPSNETWORK", "<17");
} else {
Log.i("GPSNETWORK", Build.VERSION.SDK_INT+">=17");
mWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
}
String myUrl = "<html><body style='margin:0px;padding:0px;'>\n" +
" <script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>\n" +
" var player;\n" +
" function onYouTubeIframeAPIReady()\n" +
" {player=new YT.Player('playerId',{events:{onReady:onPlayerReady}})}\n" +
" function onPlayerReady(event){player.mute();player.setVolume(0);player.playVideo();}\n" +
" </script>\n" +
" <iframe id='playerId' type='text/html' width='1280' height='720'\n" +
" src=\""+videoURL+"\"?enablejsapi=1&rel=0&playsinline=1&autoplay=1&showinfo=0&autohide=1&controls=0&modestbranding=1' frameborder='0'>\n" +
" </body></html>";
mWebView.loadData(""+Html.fromHtml(myUrl), "text/html", "UTF-8");
edwin
Updated on July 05, 2022Comments
-
edwin almost 2 years
I want to load youtube video to Android webview using iframe
here is my layout Xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@android:color/white" android:id="@+id/mainLayout"> <WebView android:background="@android:color/white" android:id="@+id/webView" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </RelativeLayout>
My code is:
public class WebTube extends Activity { private WebView wv; String html = "<iframe class=\"youtube-player\" style=\"border: 0; width: 100%; height: 95%; padding:0px; margin:0px\" id=\"ytplayer\" type=\"text/html\" src=\"http://www.youtube.com/embed/WBYnk3zR0os" + "?fs=0\" frameborder=\"0\">\n" + "</iframe>"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); wv = (WebView)findViewById(R.id.webView); wv.getSettings().setJavaScriptEnabled(true); wv.loadDataWithBaseURL("", html , "text/html", "UTF-8", ""); } }
Also I provide
<uses-permission android:name="android.permission.INTERNET"/>
&
android:hardwareAccelerated="true"
when I run this I didn't get any result its just showing a black screen
I tried this .but this provide me video on
.3gp Quality
. but I need the videos from youtube on original quality. That's why I am usingiframe
.I try code using
<object></object>
and<video></video>
instead ofiframe
. but it didn't solve my issue.when I run this code on emulator it shows
Before Pressing Play Button
After Pressing Play button on video
I think we cannot stream videos on emulator since it is a virtual device
But when I run this on phone it's not even showing this result.
I try iframe with a document attach to it works fine on phone as well as emulator
String customHtml = "<iframe src='http://docs.google.com/viewer?url=http://www.iasted.org/conferences/formatting/presentations-tips.ppt&embedded=true' width='100%' height='100%' style='border: none;'></iframe>";
So please help me to load videos to this frame.
(I run it on phone). What's the problem? also will iframe work on Android 2.1?
did any one tried Youtube Api ?
-
edwin over 11 yearsi am using videos from youtube so how should i set the source (
src=""
) for<video></video>
tag -
T1000 over 11 yearsOn websites the src is something like: "youtube.com/watch?v=U7UroLFYlzE".
-
T1000 over 11 yearsHave you seen this? stackoverflow.com/questions/12708890/…
-
T1000 over 11 yearsIt says you have to add wv.setWebChromeClient(new WebChromeClient() { });
-
edwin over 11 yearsyeah i saw that ... i tried it earlier but was not able solve my issue..in that they are using <iframe> tag but it will have compatibility issue with pre ICS versions of android so prefer to use <video> tag
-
edwin over 11 yearsi already check this .. when i run the demo app along with api it force me to download youtube app.. so i got a doubt id this YouTube api using official YouTube app for playing videos.. could you clarify that?
-
edwin over 11 yearscheck this
-
T1000 over 11 yearsso adding src= "youtube.com/watch?v=[whatever id]" didn't work? Or you don't know how to add the src tag?
-
edwin over 11 yearsEverything works fine on an html file... but when it try to load it to android web view.. it's not working correctly.. i will check once again and inform you.
-
Artiom Chilaru over 11 yearsYes, I believe it does exactly that, according to the documentation on their site.
-
Rory McCrossan almost 9 yearsCan you please add a little detail to your answer about what the problem in the question is, and how this solves it.
-
Admin over 8 yearsUsing WebChromeClient allows you to handle Javascript dialogs, favicons, titles, and the progress.
-
atreat about 8 yearsand when you do all of this but its still black?
-
Zar E Ahmer about 6 yearsIs it allowed by google to show youtube videos in your app using iframe without using Youtube Api ??
-
tej shah about 6 years@Nepster Yes. you can do that. i have many app on google play with iframe
-
Akhilesh Dhar Dubey over 2 yearsHi @tejshah, Thanks for the solution, But It is not working on Android TV, showing Video Unavailable, Watch on Youtube. Could you please help me out? Thanks a lot for your support.
-
tej shah over 2 years@AkhileshDharDubey Unavailable means its some thing issue related with video id. for testing just add "8YPXv7xKh2w" this id as parameter and you can also test with phone device. its working over there?