I need to show a list of videos from YouTube in my Android project, when I click on a video it should start in fullscreen mode. I used a WebView as suggested in other topics with the iFrame from html but the "allowFullScreen" attribute doesn't work.
I tried allowFullScreen, allowFullScreen = "true", allowFullScreen = allowFullScreen ways.
String frameVideo = "<html><body><iframe width=\"300\" height=\"300\" src=\"https://www.youtube.com/embed/47yJ2XCRLZs\" scrolling=\"no\" frameborder=\"0\" allowFullScreen=\"allowFullScreen\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\"></iframe></body></html>";
for(int i=0; i<number_of_videos; i++){
video = new WebView(this);
video.getSettings().setJavaScriptEnabled(true);
video.getSettings().setPluginState(WebSettings.PluginState.ON);
video.loadData(frameVideo, "text/html", "utf-8");
video.setWebChromeClient(new WebChromeClient());
video.setId(i);
video.setPadding(0, 0, 0, 0);
video.setLayoutParams(new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, 900));
root.addView(video);
}
I would avoid the YouTube APIs. Any suggestions?
Instead of allowFullScreen="allowFullScreen" just use
<iframe
width="300"
height="300"
src="https://www.youtube.com/embed/47yJ2XCRLZs"
scrolling="no"
allowFullScreen >
allowFullScreen without any value
Related
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
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 create a service that loads data from a remote server and returns HTML data. This data I put to my WebView. All work good but have one problem: If some word is too long, WebView adds horizontal scroll. I add CSS file with break-work, word-wrap but it doesn't help.
JSONObject jsonObject = new JSONObject(strResult);
String content = jsonObject.getString("postContent");
TextView postTitle = (TextView) view.findViewById(R.id.postTitle);
postTitle.setText(jsonObject.getString("postTitle"));
WebView postContent = (WebView) view.findViewById(R.id.postContent);
postContent.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
postContent.getSettings().setLoadWithOverviewMode(true);
postContent.getSettings().setUseWideViewPort(true);
postContent.getSettings().setBuiltInZoomControls(true);
postContent.getSettings().setJavaScriptEnabled(true);
postContent.loadDataWithBaseURL("file:///android_asset/", content, "text/html; charset=utf-8", "utf-8", null);
I did face completely similar problems and finally realized that I misused the css options for that. Just add word-break: break-all; word-break: break-word to css style for body and/or headers and it's done
<head>
<style type="text/css">
body {text-align: center; word-break: break-all; word-break: break-word}
h1 {font-size:large; word-break: break-all; word-break: break-word}
h2 {font-size:medium; word-break: break-all; word-break: break-word}
</style> </head>
Some more details for css properties can be found here or there
Please be careful, as word-break option could seriously impact the readability of the text in WebView. Only use it when you really need it.
Apparently:
setLoadWithOverviewMode(true) loads the WebView completely zoomed out
setUseWideViewPort(true) makes the Webview have a normal viewport (such as a normal desktop browser), while when false the webview will have a viewport constrained to its own dimensions (so if the webview is 50px*50px the viewport will be the same size)
so i recommend you don't use setUseWideViewPort, the following code is for similar task that worked good:
final WebSettings webSettings = webView.getSettings();
webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
webSettings.setEnableSmoothTransition(true);
webView.setBackgroundColor(Color.parseColor("#00000000"));
String before = "<html><head><style type=\"text/css\">#font-face {font-family: MyFont;src: url(\"file:///android_asset/fonts/w_yekan.ttf\")}body {font-family: MyFont;font-size: 14px;text-align: right;}</style></head><body><div style=\"direction:rtl !important;; text-align:right !important;\">";
String after = "</body></html>";
String myHtmlString = before + Utils.editString(DoaText) + after;
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
webView.loadDataWithBaseURL(null, myHtmlString, "text/html", "UTF-8", null);
i hope this answer be a good solution for you .
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView wv=(WebView)findViewById(R.id.webView1);
wv.getSettings().setJavaScriptEnabled(true);
wv.getSettings().setAppCacheEnabled(true);
wv.getSettings().setDomStorageEnabled(true);
// how plugin is enabled change in API 8
if (Build.VERSION.SDK_INT < 8) {
wv.getSettings().setPluginsEnabled(true);
} else {
wv.getSettings().setPluginState(PluginState.ON);
}
String venkat="<iframe src=\"http://player.vimeo.com/video/27244727?portrait=0&color=333\" width=\"WIDTH\" height=\"HEIGHT\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>";
wv.loadData(venkat,"text/html","UTF-8");
}
}
After researching from google I have written the above code but is not working. In this no errors are occurred but when I click on the play button progress bar is displaying for sometime and then it disappears and displays play button again... Could anyone please suggest me how to solve this problem?
Do this:
<iframe src="//player.vimeo.com/video/VIDEO_ID"
width="515"
height="340"
frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
You have to enable the hardware accelaration feature in andorid manifest. To work vimeo video on all devices, bec vimeo video is html5 type of video.
And here is link of vimeo video play which is working perfectly.
const TheVideo = (props) => {
const getVimeoUrl = (uri: string): string => {
const value = uri.split("/");
return value[value.length - 1];
};
enter code here
return (<>
<iframe
src={
props.specificVideo?.url
?.split("/")[2]
.startsWith("vimeo")
? `https://player.vimeo.com/video/${getVimeoUrl(
props.specificVideo?.url
)}`
: props.specificVideo?.url ?? ""
}
width="{video_width}"
height="{video_height}"
frameBorder="0"
title={props.specificVideo?.title ?? ""}
className="specvideoview-frame"
></iframe>
</>)
}
webView = (WebView)findViewById(R.id.presentation_webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setPluginsEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int height = displaymetrics.heightPixels;
int wwidth = displaymetrics.widthPixels;
Log.e("h & w",wwidth+"-"+height);
String data_html = "<!DOCTYPE HTML> <html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:og=\"http://opengraphprotocol.org/schema/\" xmlns:fb=\"http://www.facebook.com/2008/fbml\"> <head></head> <body style=\"margin:0 0 0 0; padding:0 0 0 0;\"> <iframe width='"+wwidth+"' height='"+height+"' src=\"http://player.vimeo.com/video/"+VIDEO_ID+"\" frameborder=\"0\"></iframe> </body> </html> ";
webView.setWebViewClient(new MyWebViewClient());
webView.loadDataWithBaseURL("http://vimeo.com", data_html, "text/html", "UTF-8", null);
Try the above code and use device width and height to play the video.
im trying to use WebView like this:
String html = " <html><body>
<table style\"background-color: #0a82a4; color: #ffffff;\">
... stuff ...
</table>"
</body>
</head>";
html.replace("#", "%23");
html.replace("\\", "%27");
html.replace("?", "%3f");
html.replace("%", "%25");
myWebview.loadData(html, "text/html", "utf-8");
It Works, but when add width=100% in style tag, webView cant load the data.
I used this reference: http://developer.android.com/reference/android/webkit/WebView.html#loadData(java.lang.String, java.lang.String, java.lang.String)
loll, solved:
html = html.replace("%", "%25");
html = html.replace("#", "%23");
html = html.replace("\\", "%27");
html = html.replace("?", "%3f");
Have you seen the HelloWorld example in the devguide located here
To solve this, I changed the order of replace calls:
html = html.replace("%", "%25");
html = html.replace("#", "%23");
html = html.replace("\\", "%27");
html = html.replace("?", "%3f");