I'm trying to show youtube video on webview from url . After a long hour its working but still not shown anything :-
image
as you seen above image not shown any thing but seek bar of video increasing (but not shown anything and i m using API 17 and 480*800(WVGA)) and below is my code:-
Code
movie_image_movie_link.setOnClickListener(new OnClickListener() {
#SuppressLint("SetJavaScriptEnabled")
#Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
final Dialog dialog = new Dialog(act);
// dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.show_video_from_youtube);
dialog.setTitle("YouTube Video");
WebView video = (WebView) dialog.findViewById(R.id.webview);
video.getSettings().setJavaScriptEnabled(true);
video.getSettings().setPluginState(WebSettings.PluginState.ON);
// video.getSettings().setUserAgent(0);
video.setWebChromeClient(new WebChromeClient() {
});
String id = StringUtils.substringBetween(
MovieJSONObjectHandle.youtube_link,
"www.youtube.com/watch?v=", "&");
System.out.println("url => "
+ Uri.parse("http://www.youtube.com/v/" + id)
.toString());
final String mimeType = "text/html";
final String encoding = "UTF-8";
String html = getHTML(id);
video.loadDataWithBaseURL("", html, mimeType,
encoding, "");
dialog.show();
}
});
public static String getHTML(String videoId) {
String html = "<iframe class=\"youtube-player\" "
+ "style=\"border: 0; width: 100%; height: 90%;"
+ "padding:0px; margin:0namepx\" "
+ "id=\"ytplayer\" type=\"text/html\" "
+ "src=\"http://www.youtube.com/embed/" + videoId
+ "?fs=0\" frameborder=\"0\" " + "allowfullscreen autobuffer "
+ "controls onclick=\"this.play()\">\n" + "</iframe>\n";
/**
* <iframe id="ytplayer" type="text/html" width="640" height="360"
* src="https://www.youtube.com/embed/WM5HccvYYQg" frameborder="0"
* allowfullscreen>
**/
return html;
}
also try video instead of iframe but still same problem :-
String html = "<video id=\"video\" width=\"320\" height=\"240\" src=\"http://www.youtube.com/embed/" + videoId
+ "autobuffer controls onclick=\"this.play();\">";
xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="400dp"
android:layout_height="400dp"
android:gravity="center"
android:orientation="vertical" >
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="match_parent" />
</LinearLayout>
mainfest
<activity
android:name="biz.xicom.defindme.controlpage.ControlPage"
android:hardwareAccelerated="true"
android:screenOrientation="portrait"
android:theme="#android:style/Theme.Light.NoTitleBar" >
</activity>
so if u had face this problem in past so please tell me what mistake i have done in above code.
Try this:
webView = (WebView) findViewById(R.id.webView);
mWebViewClient = new myWebViewClient();
webView.setWebViewClient(mWebViewClient);
mWebChromeClient = new myWebChromeClient();
webView.setWebChromeClient(mWebChromeClient);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setAppCacheEnabled(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSaveFormData(true);
webView.loadUrl("http://m.youtube.com"); // your web url
Related
I want to display youtube URL in a web view. But it is not loading into the web view.
Here is my code.
WebView web_view = (WebView) findViewById(R.id.web_view);
web_view.setWebViewClient(new WebViewClient());
web_view.getSettings().setJavaScriptEnabled(true);
web_view.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
web_view.getSettings().setPluginState(WebSettings.PluginState.ON);
web_view.getSettings().setMediaPlaybackRequiresUserGesture(false);
web_view.setWebChromeClient(new WebChromeClient());
web_view.loadUrl("https://www.youtube.com/watch?v=s8n16rns-iM");
the video is not loaded into the web view.It is showing error:
[INFO: CONSOLE(16)] "The key "target-densitydpi" is not supported.", source: https://m.youtube.com/watch?v=s8n16rns-iM
try this
String frameVideo = "<html><body>Video From YouTube<br><iframe width=\"420\" height=\"315\" src=\"https://www.youtube.com/watch?v=ue80QwXMRHg&app=desktop\" frameborder=\"0\" allowfullscreen></iframe></body></html>";
WebView displayYoutubeVideo = (WebView) findViewById(R.id.mWebView);
displayYoutubeVideo.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return false;
}
});
WebSettings webSettings = displayYoutubeVideo.getSettings();
webSettings.setJavaScriptEnabled(true);
displayYoutubeVideo.loadData(frameVideo, "text/html", "utf-8");
To get a html frame for a particular video, use this function with a Video Id,
public String getHtmlfromVideoId(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";
return html;
}
Video Id usually comes after the v parameter of the youtube url. For example, the Video Id of https://www.youtube.com/watch?v=s8n16rns-iM&app=desktop is s8n16rns-iM
Once you get the html frame, load it directly in the WebView,
webView.loadData(html, "text/html", "UTF-8");
webview.setVisibility(View.VISIBLE);
webview.getSettings().setJavaScriptEnabled(true);
//webview.getSettings().setPluginsEnabled(true);
webview.getSettings().setPluginState(PluginState.ON);
webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
webview.getSettings().setAllowFileAccess(true);
webview.getSettings().setBuiltInZoomControls(true);
webview.getSettings().setBlockNetworkLoads(false);
webview.setWebChromeClient(new WebChromeClient() {});
final String mimeType = "text/html";
final String encoding = "UTF-8";
String html = getHTML1();
webview.loadDataWithBaseURL("", html, mimeType, encoding, "");
}
public String getHTML1() {
Log.d("trailer_2 HTML","ok");
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/"
+ "H7Ht-m2QMDY"
+ "?fs=0\" frameborder=\"0\">\n"
+ "</iframe>\n";
return html;
}
I was tried lot of.Its working for Tablet Devices but not working for mobile devices ?
I have also mention hardwareAcelator=true in manifest bur not working ?
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 using iframe.
I try code using <object></object> and <video></video> instead of iframe. 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 ?
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;
}
}
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.
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());
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");
I'm no expert in Android webview, but I encountered similar problems with web page.
What I had to do was to use tag and made sure it had onclick="this.play(); in the tag. The onclick event was specifically for Android. Chrome, Safari, Firefox didn't need it.
For example:
<video id="video" width="320" height="240" autobuffer controls onclick="this.play();">
Without the onclick, Android browser would not work. Since webview is calling the browser, I suspect it's the same.
And make sure in the source tag you do NOT use codec attribute.
Hope this helps you.
It's not exactly a direct answer to your question, but I believe you might want to use the newly released Android Youtube API. It should allow adding youtube video playback into your apps, so you don't have to inject them into a webview in an iFrame.. That's just silly, and not all Android devices will have Flash installed :)
https://developers.google.com/youtube/android/player/
You can visit my question again. Iv'e created a function that gives you all of the youtube video's direct links (including hq links). Now you can use mp4 and so instead of the poor 3gp.
Using WebChromeClient allows you to handle Javascript dialogs, favicons, titles, and the progress:
wv = setWebChromeClient(new WebChromeClient());
It's working properly
My Java file
String path="<iframe src='https://www.youtube.com/embed/94zICkZLQpY' width='100%' height='100%' style='border: none;'></iframe>";
webView.loadData(path,"text/html","utf-8");
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient());
Here 94zICkZLQpY is the embedded code you will get in any youtube video
My normal youtube video link which is watchable is
https://www.youtube.com/watch?v=94zICkZLQpY&feature=youtu.be
I want to load an image at the web view, but it shows all at top_left of the web view. My picture is on the internet not local.
gifView.loadUrl(mImageUrl);
gifView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url) {
view.getSettings().setLoadsImagesAutomatically(true);
if (mProgressBar != null) {
mProgressBar.setVisibility(View.GONE);
}
}
#Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
if (mProgressBar != null) {
mProgressBar.setVisibility(View.VISIBLE);
}
}
});
Here is my xml:::
<WebView
android:id="#+id/gif_image"
android:background="#null"
android:layout_gravity="center"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
Edit:i used:
String HTML_FORMAT = "<html><body style=\"text-align: center; background-color: null; vertical-align: middle;\"><img src = \"%s\" /></body></html>";
final String html = String.format(HTML_FORMAT, mImageUrl);
gifView.loadDataWithBaseURL("", html, "text/html", "UTF-8", "");
but my image only Horizontal Center，how to center
Try this.
myWebView.loadData("<html><head><style type='text/css'>body{margin:auto auto;text-align:center;} img{width:100%25;} </style></head><body><img src='www.mysite.com/myimg.jpeg'/></body></html>" ,"text/html", "UTF-8");
I did it by using some code and xml :
<WebView android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="251dp"
android:layout_below="#+id/download"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
and this (for horizental center) :
WebView loading = (WebView)rootView.findViewById(R.id.webview);
loading.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
loading.loadDataWithBaseURL("file:///android_asset/", "<html><center><img src=\"done.png\"></html>", "text/html", "utf-8", "");
Or this for (horizontal & vertical center) :
WebView loading = (WebView)rootView.findViewById(R.id.webview);
loading.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
loading.loadDataWithBaseURL("file:///android_asset/", "<html>\n" +
"<body bgcolor=\"white\">\n" +
" <table width=\"100%\" height=\"100%\">\n" +
" <tr>\n" +
" <td align=\"center\" valign=\"center\">\n" +
" <img src=\"loading.gif\">\n" +
" </td>\n" +
" </tr>\n" +
" </table>\n" +
"</body>", "text/html", "utf-8", "");
Try something like this:
Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();
String data = "<body><center><img width=\"" + width + "\" src=\"" + url
+ "\" /></center></body></html>";
webview.loadData(data, "text/html", null);
Try this, this will make the content fit to your webview
WebView web = (WebView) findViewById(R.id.gif_image);
web.getSettings().setDefaultZoom(ZoomDensity.FAR);
Do you use Linear layout? So you will require to use the gravity property of the parent linear layout.
A good explanation of gravity in android: http://sandipchitale.blogspot.com/2010/05/linearlayout-gravity-and-layoutgravity.html
The reason is not in the webview, it is the html code.
W3c wants that "text-align" should no longer take effekt on block elements like images.
You can read more at center-image-using-text-align-center
So either you make your image display:inline or you center it in a different way e.g.
.center {
left: 50%;
margin-left: -50%;
}
I'm new in android developer. I have 2 questions :
How to make full screen video immediately after tapping play sign?
When the video in normal size and user want to scroll the page which is having header and in static mode, the video will cover the header. It should be below the header when user scroll it until the header. How to make the video below the header when user scroll the page until header position?
This is my Code :
String widthAndHeight = "width='220' height='200'";
String videoURL = "http://www.youtube.com/v/AyeJyctGhSc&feature=youtube_gdata";
String temp = "<object "+widthAndHeight+">" +
"<param name='allowFullScreen' value='false'>" +
"</param><param name='allowscriptaccess' value='always'>" +
"</param><embed src='"+ videoURL +"'" +
" type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true'" + widthAndHeight +
"></embed></object>";
video.getSettings().setPluginState(PluginState.ON);
video.getSettings().setJavaScriptEnabled(true);
video.getSettings().setJavaScriptCanOpenWindowsAutomatically(false);
video.getSettings().setPluginsEnabled(true);
video.getSettings().setSupportMultipleWindows(false);
video.getSettings().setSupportZoom(false);
video.setVerticalScrollBarEnabled(false);
video.setHorizontalScrollBarEnabled(false);
video.loadData(temp,"text/html", "utf-8");
Use this source to play Youtube Video
String video = "<iframe class=\"youtube-player\" style=\"border: 0; width: 100%; height: 100%; padding:0px; margin:0px\" id=\"ytplayer\" type=\"text/html\" src=\"http://www.youtube.com/embed/"
+ youtubeId +
"?autoplay=1"
+ "&fs=0\" frameborder=\"0\">\n"
+ "</iframe>\n";
mWebview.getSettings().setPluginState(PluginState.ON);
mWebview.setWebChromeClient(new WebChromeClient());
mWebview.getSettings().setJavaScriptEnabled(true);
mWebview.setHorizontalScrollBarEnabled(false);
mWebview.setVerticalScrollBarEnabled(false);
mWebview.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
mWebview.getSettings().setBuiltInZoomControls(false);
mWebview.getSettings().setAppCacheEnabled(true);
mWebview.setInitialScale(0);
mWebview.getSettings().setLoadWithOverviewMode(true);
mWebview.getSettings().setUseWideViewPort(true);
mWebview.loadData(video,"text/html","UTF-8");
Add below code in your Activity :
WebView.setWebChromeClient(new WebChromeClient()
#Override
public void onShowCustomView(View view, CustomViewCallback callback) {
customComponenet.addView(view);
mWebView.setVisibility(View.INVISIBLE);
}
#Override
public void onHideCustomView() {
if (customComponenet == null)
return;
// Hide the custom view.
customComponenet.setVisibility(View.GONE);
mWebView.setVisibility(View.VISIBLE);
}
});
where customComponent is your FrameLayout.
To play a youtube video
you have to parse the url and play the video in videoview