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);
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
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");
I manage to show and play a video using HTML in WebView by loading the following HTML:
String html = "<!DOCTYPE html>\n"+
"<html><head><title></title><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"><script type=\"text/javascript\"></script></head>\n" +
"<body style=\"margin: 0; padding: 0;\"><div id=\"video\"><video id=\"vid\" height=\"180\" width=\"320\" poster controls><source src=\"http://d21dkag2w1645r.cloudfront.net/article_videos/fcce6da21f4a88ffff297a7af9769b4e50f070f8.mp4\" type=\"video/mp4\"></video></div></body></html>";
However, I cant get the video's poster image to load. I would expect this to be auto-loaded by the webview by getting the first frame of the video, but this does not seem to happen and my webview jsut shows a blank background with the controls. How can I get the webview to auto-load the poster image/first frame of the video and show it as a placeholder?
I have a Webview in which i load HTML data (and also using css) using the following code:
final String mime = "text/html";
final String encoding = "utf-8";
final String htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />"
+ aboutDescriptions[index];
wv.loadDataWithBaseURL("file:///android_asset/", htmlData, mime,
encoding, null);
in the HTML i load images like this:
<img src=\"file:///android_res/drawable/myimage.jpg\"/>
in my css i have the following defined for the "img" tag:
img {
max-width: 100%;
max-height: 100%;
}
On my (real) 2.3.3 Android Phone and my Google Nexus 7 Tablet everything is working as expected (the HTML renders fine using the css and the images are displayed).
However on a real Galaxy Nexus phone and on many emulated devices the images are not shown at all. What am i doing wrong? I have experienced quit a few bugs allready with WebView, hopefully this is one that can be fixed? (perhaps a CSS tweak?)
managed to fix this by changing my css like this:
img {
width: 100%;
height: auto;
}