Hello i am working on android application in which i want to play vimeo videos , i am getting response from Api in json and playing video using webview and it is playing good , but the webview is displaying very small and the playing video is also small my problems are
I want playing video width to be according to android device width. I can get it from Displaymetrics but how to set to iframe ?
I want to inflate custom view of media controller for playing videos.
Custom controller like play pause icon
I am getting this kind of url response from api
<iframe src="https://player.vimeo.com/video/video_id" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
at video_id i am getting the video id
Below is the code which i used
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setPluginState(WebSettings.PluginState.ON);
webView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
webView.setWebViewClient(new WebViewClient());
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
String data_html=getexplore_list.get(pos).getVideo_url();
webView.loadDataWithBaseURL("http://vimeo.com", data_html, "text/html", "UTF-8", null);
Please Provide any solution or link will be grateful
use style in html,
String url = "<iframe src=\"" + videoUrl + "\" style=\"border: 0; width: 100%; height: 95%; padding:0px; margin:0px\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>";
mViewHolder.webView.getSettings().setJavaScriptEnabled(true);
String yourData = "<div id='made-in-ny'></div>\n" +
"\n" +
"<script src='https://player.vimeo.com/api/player.js'></script>\n" +
"<script>\n" +
" var options = {\n" +
" id: 59777392,\n" +
" width: 540,\n" +
" loop: true\n" +
" };\n" +
"\n" +
" var player = new Vimeo.Player('made-in-ny', options);\n" +
"\n" +
" player.setVolume(0);\n" +
"\n" +
" player.on('play', function() {\n" +
" console.log('played the video!');\n" +
" });\n" +
"</script>";
mViewHolder.webView.loadData(yourData, "text/html; charset=utf-8", "UTF-8");
change id and width. it is working.
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");
I am trying to make WebView display remote image (with certain stylistic tweaks). This works perfectly by loading WebView with an HTML snippet that references that remote IMG amongst other things. But the only problem is that sometimes this remote image is not present which results in a broken image icon.
What I would like to do is to intercept the (un)availability of the remote image and recover by switching to another one. I've tried using onReceivedError() of WebViewClient but somehow it does not trigger even when the image is not available.
My current image loading logic is as follows:
String url = "..."; // remote image URL
String html = String.format("<style>img{display: inline;" +
"height: auto;max-width: 100%%;}</style>" +
"<img src=\"%s\"></img>", url);
wv.setWebViewClient(new WebViewClient() {
#Override
public void onReceivedError(WebView view, WebResourceRequest req,
WebResourceError rerr) {
Log.e("WEB_VIEW_TEST", "error code: " + errorCode);
}
});
wv.loadData(html, "text/html", null);
I suspect onReceivedError() only triggers for page-level errors and I'm not sure how to make it trigger for element-level errors. Any help would be very appreciated.
PS. While typing this, I've just thought about handling it in JS - that is, load webview with a JS snippet that tries to load the remote image and in case of an error loads another one - all within the JavaScript realm. I'll try it and if it works will post it here as well.
OK, the JavaScript solution works, although the question about intercepting in Android real still remains. Here's the JavaScript way:
String url = "..."; // real image
String backup_url = "..."; // backup image
WebView wv = (WebView) findViewById(R.id.fullImageWebView);
WebSettings webSettings = wv.getSettings();
webSettings.setJavaScriptEnabled(true);
// FIXME: put into assets as an HTML file
String template = "" +
"<style>\n" +
" img {\n" +
" display: inline;\n" +
" height: auto;\n" +
" max-width: 100%%;\n" +
" }\n" +
"</style>\n" +
"\n" +
"<img id='image'></img>\n" +
"\n" +
"<script>\n" +
" var second_attempt = false;\n" +
" var img = document.getElementById('image');\n" +
" img.src = '%s';\n" +
"\n" +
" window.addEventListener('error', function(e) {\n" +
" if (!second_attempt) {\n" +
" second_attempt = true;\n" +
" img.src = '%s';\n" +
" }\n" +
" }, true);\n" +
"</script>";
String html = String.format(template, url, backup_url);
wv.loadData(html, "text/html", null);
I have a web that supposed to play an embedded html5 video inside it.
the problem is that in samsung galaxy s4 the video does not play but in nexus 4 it does
(android version is 4.2.2 in both).
i added android:hardwareAccelerated="true" to the manifest in the activity.
the web view settings are:
WebSettings webSettings = webview.getSettings();
webSettings.setPluginState(PluginState.ON);
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setLoadWithOverviewMode(false); // zoom y/n
webSettings.setUseWideViewPort(false); // true = like desktop
webSettings.setPluginsEnabled(true);
webSettings.setBuiltInZoomControls(false);
webSettings.setDatabaseEnabled(true);
webSettings.setGeolocationEnabled(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
webSettings.setDomStorageEnabled(true);
and the html5 code is:
mDataHtml = "<!DOCTYPE HTML> " +
"<html xmlns=\"http://www.w3.org/1999/xhtml\" > " +
"<head>" +
"</head> " +
"<body style=\"margin:0 0 0 0; padding:0 0 0 0; background-color:#343434;\"> " +
"<iframe src=\"http://www.dailymotion.com/embed/video/" + mVid + "\" width=\"" + "100%25" + "\" height=\"" + "100%25" + "\" frameborder=\"0\"background-color:\"#343434\">" +
"</iframe> " +
"</body> " +
"</html> ";
I could not find any help to my issue when i searched for that.
your help is much needed.
thank's in advance.
In the Android Manifest, try adding android:hardwareAccelerated="true".
If that doesn't work try looking at WebView and HTML5 <video>.
Am implementing one movie app. So take embeded youtube using iframe. It's working in large devices but in mobile devices it showing black screen after streaming? Please help me
this.webview.getSettings().setJavaScriptEnabled(true);
this.webview.getSettings().setBuiltInZoomControls(true);
this.webview.getSettings().setJavaScriptCanOpenWindowsAutomatically(false);
this.webview.getSettings().setPluginState(WebSettings.PluginState.ON);
this.webview.getSettings().setSupportMultipleWindows(false);
this.webview.getSettings().setSupportZoom(false);
this.webview.setVerticalScrollBarEnabled(false);
this.webview.setHorizontalScrollBarEnabled(false);
final String mimeType = "text/html";
final String encoding = "UTF-8";
String html = getHTML();
webview.loadDataWithBaseURL("", html, mimeType, encoding, "");
and:
public String getHTML1() {
Log.d("trailer_2 HTML", "ok");
String html1 = "<html><head><meta name=\"viewport=target-densitydpi=device-dpi\" content=\"width=320"
+ this.frame_width
+ ", height"
+ this.frame_height
+ ",initial-scale=1.0, minimum-scale=1.0,user-scalable=no\"/>"
+ "</head>"
+ "<body style=\" background:transparent; margin: 0; padding: 0\">"
+ "<iframe class=\"youtube-player\" style=\"border:0; width: 100%; height:100%; padding:0px; margin:0px\" id=\"ytplayer\" type=\"application/x-shockwave-flash\"allowscriptaccess=\"always\" allowfullscreen=\"true\" src=\"http://www.youtube.com/embed/"
+ "H7Ht-m2QMDY"
+ "?fs=0\" frameborder=\"0\">\n"
+ "</iframe>\n";
return html1;
}
In manifest i have mention android:hardwareAccelerated="true" and <uses-permission android:name="android.permission.INTERNET" />
..thanks in advance
ur phone need flash player support. And if u have flash player also it
will not display first time,u need to double tap on player then it will work. Instead of that
u can use android native YouTube player APi. Its in beta version now ,but its working
awesome.
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