I dont know much about the webview, normally i'd use Mediaplayer and Mediacontroller to play video from url but my all videos are HD and some phone can give error or blackscreen while playing HD videos. So i decided to play video with embed code. Now i can play video with embed code but videos are not fluent. My other problem is i cant allow fullscreen. I think if i use iframe, i can allow, but i dont know how to use iframe in webview.
I want to learn, is it possible to avoid freezing in webview and how can i use iframe in webview, if you give example i will be much appreciate. Hope i could explain myself and you can help me.Thank in advance.
Here is my webview code :
public class EmbedActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_embed);
WebView mWebView = (WebView)findViewById(R.id.webView1);
WebSettings webSettings = mWebView.getSettings();
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
mWebView.loadUrl("http://www.example.com/wp-nuevo/player/embed.php?key=9935");
}
}
iframe
<iframe width="480" height="360" src="http://www.example.com/wp-nuevo/player/embed.php?key=11042" frameborder="0" allowfullscreen></iframe>
Hello may be i am late but I hope my answer help others
you can user responsive html as
<div style="position: relative;overflow: hidden;width: 100%;padding-top: 45.25%;">
<iframe style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;"
title="vimeo-player"
src="https://www.youtube.com/embed/tgbNymZ7vqY"
frameborder="0"
>
</iframe>
this will match width for screen width
how to user u need to convert this html to string like
const val iFrame = "<div style=\"position: relative;overflow: hidden;width: 100%;padding-top: 54%;\"> <iframe width=\"360\" height=\"338\" style=\"position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;\" title=\"vimeo-player\" src=\"https://www.youtube.com/embed/tgbNymZ7vqY" frameborder=\"0\" allowfullscreen> </iframe> </div>"
then load Data to WebView like
binding.webview.loadData(iFrame, "text/html", "utf-8");
Related
I'm trying to play youtube video on my android app using Youtube Player API for Android but the problem is getting that the video quality of the video is not so good and there is not an option for force setting it to HD. So I tried to play video using Youtube Iframe API in android Webview but also there I'm facing the same problem with video quality.
Iframe Code :
<div class="videowrapper">
<iframe id=\"player\" width=\"720\" height=\"1280\" frameborder=\"0\" allow=\"encrypted-media\" src=\"https://www.youtube.com/embed/uFExenM7-dY?vq=hd720&enablejsapi=1&controls=0&iv_load_policy=3&modestbranding=0&rel=0&showinfo=0\"></iframe>\n"
</div>
.videowrapper {
float: none;
clear: both;
background:#eeeeee;
width: 100%;
}
.videowrapper iframe {
position: absolute;
width: 100%;
height: 100%;
}
How to make Youtube video to always play in HD quality?
Try attaching the vq=VIDEO_QUALITY to a youtube video url like
https://www.youtube.com/watch?v=nzliFQ-36kg&vq=720
To make this work using embed, follow the answer in this SO post.
<object width="1280" height="720"><param name="movie" value="//www.youtube.com/v/VIDEO_ID?hl=en_US&version=3&rel=0&vq=hd720"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
Testing on JSFiddle.
Don't forget to change VIDEO_ID to valid one when testing this.
I have a very basic WebActivity that serves up a page that has the styling of
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Next, edit add some HTML around your embed code.
HTML
<div class="video-container"><iframe width="853" height="480" src="https://www.youtube.com/embed/xxxxxx" frameborder="0" allowfullscreen</iframe</div>
If I view this page with the browser on the device, the page loads and the video plays just fine.
However if I use a webview programmed into my app, and load the page,clicking on the like, I get a message on the youtube video window (after the loading spinner) of "An error occurred. Please try again later (Playback ID: xxxxxx) Learn More"
of which learn more does not display anything useful. Idea's on how to go about seeing what is going on? The Android Studio logcat is not displaying any issues?
so it turns out that there are a few more params needed to play embeded iframe videos from YouTube.
Had to add the following to the end of the url string
src="https://www.youtube.com/embed/xxxxxxxxx?version=3&enablejsapi=1"
I have create a demo for it. You may visit my github link
On my android, I have a webview that renders the image source. It works on small devices, but things like galaxy s4 does not work. The change I've made was the CSS, in which I updated in order for the image source to fit perfectly to the dimension of the webview.
HTML:
<body>
<div class="radio_banners_app" style="overflow:hidden;">
<img src="#Url.Content("~" + GraphicImagePath + item.Profile)" class="radio_app_img_src"/><br />
</div>
</body>
CSS:
body > div.radio_banners_app {
width:100%;
height:100%;
}
div.radio_banners_app > img.radio_app_img_src {
margin:0 auto;
top:0;
left:0;
position:absolute;
min-width:100%;
min-height:100%;
height:100%;
width:100%;
}
activity.java
URL = "~~~~"
RadioBannerWebView = (WebView) findViewById(R.id.RadioBannerWebview);
RadioBannerWebView.setWebViewClient(new WebViewClient());
// javascript listener
//MainWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
//MainWebView.getSettings().setJavaScriptEnabled(true);
RadioBannerWebView.loadUrl(URL);
After hours of search, I coulnd't seem to figure it out. please help!!
I'm trying to put a little embedded youtube video in my app. The user needs to be able to fullscreen the video, but the webview's youtube player has no fullscreen button! Whhhaa…? I've searched around and found no solution. BTW, using the Google YouTube API is NOT an option. I have a workaround (video thumbnail which opens a fullscreen WebView when clicked), but it would be a lot simpler/more elegant if the webview would handle this for me.
Here's how I'm loading the youtube video
String htmlString = "<html><body style='margin:0px auto; padding:0px; width: 100%;'><script type='text/javascript' src='http://m.youtube.com/iframe_api'></script><div style=\"padding-bottom: 56.25%;position: relative;\"><iframe allowfullscreen='allowfullscreen' id='playerId' type='text/html' style=\"width: 100%; height: 100%; position: absolute;\" width=\"560\" height=\"315\" src='http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&rel=0&playsinline=0&autoplay=0' frameborder='0'></div></body></html>";
if (youtubeWebView == null){
youtubeWebView = ButterKnife.findById(view, R.id.youtubeWebview);
}
youtubeWebView.getSettings().setJavaScriptEnabled(true);
youtubeWebView.getSettings().setLoadWithOverviewMode(true);
youtubeWebView.loadData(htmlString, "text/html", null);
In webView, I am loading a html file. The file contains text, images and a youtube link. Text and the images are displayed just by loadUrl() method, but video is not being played. How should I get the link and play video.
Format in which link is present in html file is :
<p style="text-align: center; margin: 0px;">
<iframe class="youtube-player" type="text/html" width="300" height="169" src="http://www.youtube.com/embed/4H0fTwtPLfo" allowfullscreen frameborder="0">
</iframe>
</p>
Please guide me.
EDIT
loading html file:
webView.loadUrl("file:///android_asset/"+htmlFile);
webView.setWebViewClient(new VideoWebViewClient());
VideoWebViewClient class:
private class VideoWebViewClient extends WebViewClient{
#Override
public boolean shouldOverrideUrlLoading(WebView webView, String url) {
webView.loadUrl(url);
return true;
}
}
EDIT 2
I am able to play video by adding following lines of code:
WebSettings webSetting = webView.getSettings();
webSetting.setJavaScriptEnabled(true);
webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);
webSetting.setAllowContentAccess(true);
webView.loadUrl("file:///android_asset/"+htmlFile);
webView.setWebViewClient(new VideoWebViewClient());
I want to play video in full screen, but the full screen button freeze the video. Can anyone help?