How to get this audio player in webview,if we play a audio link in chrome or any browser,
it gives something like above by default,Can we get exactly like in android webview.
I tried to get html elements,but UI was looking very odd-
Attempt 1-
var iframeURL = string.Format("<video width=\"{0}\" height=\"{1}\" controls=\"\" autoplay=\"\" name=\"media\"><source src=\"{2}\" type=\"audio/mpeg\"></video>",
width, height, embedUrl);
string finalUrl = string.Format("<html><body>{0}</body></html>", iframeURL);
and this final url is my web source
Attempt 2-
var iframeURL = string.Format("<iframe style=\"position:fixed; top: 50%; left: 50%;" +
" width:" + " {1}px; height: {2}px; margin-left: {3}px; margin-top: {4}px;\"" + " src =\"{0}\" frameborder=\"0\" " + "allow=\"accelerometer;" +
" autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
embedUrl, width, height, -width / 2, -height / 2);
string finalUrl = string.Format("<html><body>{0}</body></html>", iframeURL);
return finalUrl;
This should be do it,
var html = string.Format("<!DOCTYPE html><html><head><meta name=\"viewport\"
content=\"width=device-width, initial-scale=1.0\"></head><body><audio controls
autoplay name=\"media\"><source src=\"{0}\" type=\"audio/mpeg\"></audio>
</body></html>",embedUrl);
webView.Source = new HtmlWebViewSource
{
Html = html,
};
XAML:
<WebView x:Name="webView" VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"></WebView>
Result:
Related
My problem is how to a show video from the admin backend into my android app. When I and adding the iframe from TinyMCE Editor, it looks like this:
But in my android app I get this:
I cannot understand what exactly is happening and I'm sharing you a section of my code of what I'm doing in the fragment.
if (item.getContent().length() != 0) {
mWebView.setVisibility(View.VISIBLE);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setMinimumFontSize(14);
String htmlContent = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>"
+ "<head>"
+ "<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />"
+ "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/>"
+ "<style type=\"text/css\">body{color: #525252;} img {max-width: 100%; height: auto}</style>"
+ "</head>"
+ item.getContent()
+ "";
mWebView.loadData(htmlContent, "text/html; charset=utf-8", "UTF-8");
} else {
mWebView.setVisibility(View.GONE);
}
if (item.getImgUrl().length() > 0) {
imageLoader.get(item.getImgUrl(), ImageLoader.getImageListener(mItemImg, R.drawable.img_loading, R.drawable.img_loading));
mItemImg.setVisibility(View.VISIBLE);
mItemImgSeparatorLine.setVisibility(View.VISIBLE);
} else {
mItemImg.setVisibility(View.GONE);
mItemImgSeparatorLine.setVisibility(View.GONE);
}
mPostTopSeparatorLine.setVisibility(View.GONE);
mPostMessage.setVisibility(View.GONE);
if (item.getAllowComments() == 0 && App.getInstance().getId() != 0) {
mPostTopSeparatorLine.setVisibility(View.VISIBLE);
mPostMessage.setVisibility(View.VISIBLE);
mPostMessage.setText(getString(R.string.msg_comments_disabled));
}
if (App.getInstance().getId() == 0) {
mPostTopSeparatorLine.setVisibility(View.VISIBLE);
mPostMessage.setVisibility(View.VISIBLE);
mPostMessage.setText(getString(R.string.msg_auth_prompt_comment));
}
}
For my Android App I'm working with a WebView as you can see in the above code. Do you have any idea why is it not working as expected? Thanks for your help.
You are trying to load an iFrame in WebView. To do so, use first create a string with the HTML.
String html = "<iframe width=\"560\" height=\"315\" src=\"your_src\" frameborder=\"0\" allowfullscreen></iframe>";
Now call loadData.
mWebview.loadData(html, "text/html", null);
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.
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 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