I am building an Android app which contains a few videos from YouTube. When I try to use WebView with the appropriate iframe string, the video player does not fit the WebView dimensions (awkward extra white spaces, sometimes with a scroll bar). I want the video to match the webview dimensions exactly.
This is what I have tried so far.
WebView webView = new WebView(this);
RelativeLayout rel = findViewById(R.id.test_layout);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webView.setWebChromeClient(new WebChromeClient());
String html2 = "<html><head>"+
"<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n" +
"</head>\n" +
"<body>\n"+
"<iframe width=\"500\" height=\"250\" src=\"https://www.youtube.com/embed/LOuAOZWJ9RA?feature=oembed&autoplay=true\" title=\"YouTube video player\" frameborder=\"0\"\n" +
"allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n" +
"</body>\n" +
"</html>";
RelativeLayout.LayoutParams params= new RelativeLayout.LayoutParams(500,250);
params.leftMargin = 36;
params.topMargin = 426;
rel.addView(webView,params);
webView.loadData(html2, "text/html", "utf-8");
Image of output
PS: I am extremely new to Android dev. Any kind of help will be much appreciated
Related
In one of the screens in my app, I load HTML string into a WebView, but for some reason, the WebView isn't able to load videos in divs, the video container shows error:
This video file cannot be played: error code 102003
This is an example of the HTML that is being loaded, and which the video in it fails to laod:
<html dir="rtl" lang=""><body><meta itemprop="thumbnailUrl" content="https://cdn.jwplayer.com/v2/media/8K9oJcsX/poster.jpg?width=720"/><meta itemprop="contentUrl" content="https://cdn.jwplayer.com/videos/8K9oJcsX-khorc1ya.mp4"/><div style="position:relative; overflow:hidden;"><script src="https://cdn.jwplayer.com/players/8K9oJcsX-4mQgHT7J.js"></script></div></div> <p>تابعي نصائح وأفكار دليل مطبخ سيدتي التي ستساعدك في الحصول على مائدة رمضانية فاخرة ومميزة حتى في أيام الحجر المنزلي.</p></body></html>
I have enabled javascript, added hardwareAcclerated=true added a chrome client and all the other things suggested on other questions.
val settings = webview.settings
settings.domStorageEnabled = true
settings.javaScriptEnabled = true
settings.pluginState = WebSettings.PluginState.ON
webview.webChromeClient = WebChromeClient()
webview.webViewClient = WebViewClient()
settings.setDomStorageEnabled(true);
settings.setAppCacheEnabled(true);
settings.setAppCachePath(getApplicationContext().getFilesDir().getAbsolutePath() + "/cache");
settings.setDatabaseEnabled(true);
settings.setDatabasePath(getApplicationContext().getFilesDir().getAbsolutePath() + "/databases");
settings.allowFileAccess = true
val formattedHtml = "<html dir=\"rtl\" lang=\"\"><body>" + tip.description + "</body></html>"
webview.loadDataWithBaseURL("", formattedHtml, "text/html", "UTF-8", "")
Just tried your video url in my webview and it worked. Here are my settings:
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setMediaPlaybackRequiresUserGesture(false);
So I would guess you have to set setMediaPlaybackRequiresUserGesture to false.
The problem was that the base URL was missing, which is making JWPlayer (the video host) throw an error.
The correct way to do it is to add local android_asset base URL
tipInformation.loadDataWithBaseURL("file:///android_asset/", s, "text/html", "UTF-8", null)
I've been having issues trying to get webview from stop zooming in when a user clicks a input field on webview. How can I keep webview from stop zooming in?
Heres my code:
wv = (WebView) findViewById(R.id.webView1);
WebSettings webSettings = wv.getSettings();
wv.setWebViewClient(new WebViewClient());
wv.getSettings().setLoadWithOverviewMode(true);
wv.getSettings().setUseWideViewPort(true);
wv.getSettings().setDisplayZoomControls(false);
wv.getSettings().setBuiltInZoomControls(false);
wv.getSettings().setSupportZoom (true);
wv.getSettings().setJavaScriptEnabled(true);
wv.getSettings().setDefaultZoom(ZoomDensity.FAR);
String form = "<form action='demo_form.asp'><input type='text' name='email' style='font-size: 200%;width:78%;float:left'><input type='submit' value='Submit' style='float:right;width:20%;font-size: 200%'></form>";
String summary = "<html><body>"+form+"</body></html>";
wv.loadData(summary, "text/html", null);
I am running the video (vimeo video player) using the webview. But when i click on the start button then nothing happen. Please help me is there any alternative so that it start to work.
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setAppCacheEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setPluginState(PluginState.ON);
mWebView.setWebChromeClient(new WebChromeClient());
String web = "<iframe src=\"http://player.vimeo.com/video/" + 75195844 + "\"" + " width=\"800\" height=\"800\" frameborder=\"0\"></iframe>";
mWebView.loadData(web, "text/html", "utf-8");
i think you should use loadDataWithBaseURL instead of loadData.
mWebView.loadDataWithBaseURL(null, "<html><body>" + web + "</body></html>", null, "UTF-8", null);
I am new to android. I am developing epub reader for android devices. webview shows text in left alignment. i want it to be justify. i am not sure this is text alignment problem.
This is my webview settings:
final WebView mainWebView = (WebView) findViewById(R.id.webView1);
WebSettings webSettings = mainWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
mainWebView.setWebViewClient(new MyCustomWebViewClient());
mainWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
mainWebView.loadUrl("my html page");// loding my html pages here
mainWebView.getSettings().setUseWideViewPort(true);
i used this code for text alignment
mainWebView.loadUrl("javascript:(function addCSSRule(selector, newRule) { " +
"var mySheet = document.styleSheets[0];"+
"if (mySheet.addRule) { " +
"mySheet.addRule(selector, newRule);" +
"} else {"+
"ruleIndex = mySheet.cssRules.length;"+
"mySheet.insertRule(selector + '{' + newRule + ';}', ruleIndex);" +
"}"+
"})addCSSRule(selector, newRule)");
mainWebView.loadUrl("javascript:addCSSRule('p', 'text-align: justify;');");
if i remove mainWebView.getSettings().setUseWideViewPort(true); means i am getting justify text.
Screenshot of webview:
i want it to be like this:
i don't know whats wrong in my code. mainWebView.getSettings().setUseWideViewPort(true); allows to zoom. don't know why it kills text alignment. please help me to overcome this issue.
Thanks in advance.
It doesn't seem like you're applying your webSettings to the web view. I'm looking for something along the lines of
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(url);
so perhaps your javascript isn't firing because it's not on... ?
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