This is about loading youtube videos using latest embedded format (iframe) inside a webview.
Example of the iframe embed format
<iframe width="637" height="358" src="http://www.youtube.com/embed/olC42gO-Ln4?fs=1&feature=oembed" frameborder="0" allowfullscreen=""></iframe>
Test the code on Android 2.3.3 & 3.2 devices (HTC Desire & Asus Transformer), the webview would only show a black rectangle.
I tried a similar embed from vimeo
<iframe src="http://player.vimeo.com/video/35693267" width="640" height="360" frameborder="0"></iframe>
In 2.3, video played correctly
In 3.2, a black rectangle flashed and disappeared, the iframe area is blank.
Finally if the old embed format (using the object tag) is used, the video is displayed properly inside the webview in both 2.3.3 & 3.2.
I have checked related questions and added
android:hardwareAccelerated="true"
in the application and/or activity tag but still no video in both 2.3 & 3.2 devices.
This is a big problem because more websites are now using the newest format (iframe) to embed their youtube videos. Android/Youtube Team, please take a look at this problem.
Android browsers are utterly buggy what comes to video playback and embedding. It simply does not work across devices. Trying to get it working is just waste of your time. My suggestion is that you don't try to include <iframe> but simply provide a thumbnail of the video which directly links to YouTube page or h264 file.
Earlier discussion, with a possible solution.
Google Reader-esque optimizing of WebViews on Android
If you want to play videos within your WebView you NEED to load the data with a base URL!
DONT do this:
mContentWebView.loadDataWithBaseURL(null, webViewContentString,
"text/html", "UTF-8", null);
DO THIS INSTEAD:
//veryVeryVery important for playing the videos!
mContentWebView.loadDataWithBaseURL(theBaseUrl, webViewConentString,
"text/html", "UTF-8", null);
The Base URL will be the something like the "original" url of what you are displaying in your WebView. So let's say you are making a news reader, the WebView's base url will be the url of the original story.
Good Luck!
Also remember to set up your WebView...Like so...
mContentWebView.setWebChromeClient(new WebChromeClient());
mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
mContentWebView.setWebViewClient(new WebViewClient());
mContentWebView.getSettings().setJavaScriptEnabled(true);
You need to have hardware acceleration turned on in the Manifest (only available on SDK 14 and above).
Ex. Hardware Acceleration On:
<application
android:name="com.example.app"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme"
android:hardwareAccelerated="true">
<!-- hardwareAccelerated requires SDK 14 -->
...
</application>
HTML5 Video support
In order to support inline HTML5 video in your application, you need to have hardware acceleration turned on, and set a WebChromeClient.
http://developer.android.com/reference/android/webkit/WebView.html
(Hope it help someone)
This worked for me- the code opens youtube site and can play its videos inside WebView:
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
String frameVideo = "<html><body>Youtube video .. <br> <iframe width=\"320\" height=\"315\" src=\"https://www.youtube.com/\" frameborder=\"0\" allowfullscreen></iframe></body></html>";
mWebView.loadData(frameVideo, "text/html", "utf-8");
mWebView.loadUrl("http://www.youtube.com/");
mWebView.setWebViewClient(new WebViewClient());
I would suggest using some code to detect the environment of the user... use the iframe code only for ios devices (iphone, ipod, ipad) and use the old code for everyone else.
This Code made exactly fit to different device
webView.setInitialScale(1);
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);
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int height = displaymetrics.heightPixels;
int width = displaymetrics.widthPixels;
Log.e(SimpleBillsConstants.SIMPLE_BILLS, width + "-" + height);
String data_html = "<!DOCTYPE html><html> <head> <meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"target-densitydpi=high-dpi\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <link rel=\"stylesheet\" media=\"screen and (-webkit-device-pixel-ratio:1.5)\" href=\"hdpi.css\" /></head> <body style=\"background:black;margin:0 0 0 0; padding:0 0 0 0;\"> <iframe style=\"background:black;\" width=' "+width+"' height='"+height+"' src=\""+ VIDEO_URL+"\" frameborder=\"0\"></iframe> </body> </html> ";
webView.loadDataWithBaseURL("http://vimeo.com", data_html, "text/html", "UTF-8", null);
Related
So I am trying to display a gif that I am pulling from reddit in a webview in my app. From the reddit api I retrieve a JSON of a posts data, and from media_embed/content I get the html of an iFrame from Gyfcat that looks like this:
<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&display_name=Gfycat&url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=gfycat" width="600" height="600" scrolling="no" title="Gfycat embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe>
To this I URLDecode it like so:
val gifData = json["media_embed"]["content"]
val decoded = URLDecoder.decode(gifData, "UTF-8")
And I display it like so:
feedItemWebView.settings.javaScriptEnabled = true
feedItemWebView.loadData(decoded, "text/html", "UTF-8")
This gives me something that looks like this:
Instead of using URLDecoder I also tried doing this:
val decoded = gifData.replace("<", "<")
.replace(">", ">")
.replace("&", "&")
And putting this in the WebView in the same way as above results in the webview loading, but just displaying a still image (and not the gif as expected) like this:
Is there something I am missing that I need to do in order for it to actually play the gif?
If I try putting the same thing into an html file like this:
<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&display_name=Gfycat&url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=gfycat" width="600" height="600" scrolling="no" title="Gfycat embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe>
my browser will load it correctly, so it must be something wrong with the WebView or my WebView settings
The issue was coming from a wrong configuration of the WebView. In fact, reading the logcat, this information came out from the webview:
I/chromium: [INFO:CONSOLE(26)] "Error reading storage", source: https://gfycat.com/assets/app.bfa24b4d87267ff469b0.js (26)
The iframe is loading an external script which use html5_webstorage also called localStorage. It is disabled by default in the webview (Security reason), so trying to access it was throwing an error which was preventing the video to play.
Therefore we need to turn it on like follow:
String data = "<iframe class=\"embedly-embed\" src=\"https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&display_name=Gfycat&url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=gfycat\" width=\"600\" height=\"600\" scrolling=\"no\" title=\"Gfycat embed\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen=\"true\"></iframe>\n";
webview = findViewById(R.id.webview);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setDomStorageEnabled(true);
webview.getSettings().setDatabaseEnabled(true);
webview.loadData(data, "text/html", null);
I tested it on a really simple project considering you already got the iFrame html.
I have an Iframe link :
<div style="position:relative; padding-bottom:56.25%; overflow:hidden;"><iframe src="html link here" width="100%" height="100%" frameborder="0" scrolling="auto" allowfullscreen style="position:absolute;"></iframe></div>
I am loading this in a webview. This works fine. But the problem is in some devices it shows only the player, video is not playing. What could be the issue ? Should I add any additional settings for the webview ?
I searched for the issue, I found out that few devices won't support flash player so the video won't play. If this is the issue how can I fix this?
Below is the webview code :
mWebViewClient = new myWebViewClient();
webView.setWebViewClient(mWebViewClient);
mWebChromeClient = new myWebChromeClient();
webView.setWebChromeClient(mWebChromeClient);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setAppCacheEnabled(true);
webView.getSettings().setSaveFormData(true);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setAllowContentAccess(true);
webView.getSettings().setSupportMultipleWindows(true);
webView.getSettings().setAllowFileAccessFromFileURLs(true);
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webView.loadDataWithBaseURL(baseUrl,data_html,"text/html","utf-8",historyUrl);
It's 2017, and FlashPlayer was been deprecated by Android since 2012.
I strongly recommend you NOT to look at any other FlashPlayer solution, because the amount of Android device w/o FlashPlayer support will only grow up.
Look for a HTML5 player instead......
To rectify this issue you can use an HTML5 player which has the following structure <iframe src="https://www.yourDomain.com/embed/VIDEO_ID"></iframe>
So I've searched around on SO a fair bit today and have made significant progress, but now I'm having an issue that I haven't seen pop up anywhere. I've embedded a YouTube video into an HTML file using an iframe as such:
<body>
<div align="center">
<iframe class="youtube-player" type="text/html" width="480" height="320"
src="http://www.youtube.com/embed/9DNAyD4ll6E?html5=1" frameborder="0">
</div>
</body>
and I'm displaying it in a WebView that I'm modifying in my activity like so:
WebView welcomeWebView = (WebView) findViewById(R.id.welcomeVideo);
welcomeWebView.setHorizontalScrollBarEnabled(false);
welcomeWebView.setVerticalScrollBarEnabled(false);
welcomeWebView.getSettings().setJavaScriptEnabled(true);
welcomeWebView.loadUrl("file:///android_asset/welcome.html");
The issue I'm having is that the still image display and controls show up, but when I click on play I'm presented with a gray screen that has a film strip and play icon in it. Here's the screen shots for the before/after for hitting play
http://www.ptrprograms.com/youtubeapp.png
http://www.ptrprograms.com/youtubeapp2.png
If anyone has seen this before or can point me in the right direction for displaying a video, I'd really appreciate it. Thank you!
EDIT: I also know that I can just use an intent to open it in a YouTube app, but my client (a non-profit that I'm donating this app to) is pretty specific about wanting it embedded into a page where we can have a textview with more information below it.
So I ditched the external asset for the webview and instead decided to load it in the activity itself, and it seems to work a lot better (it actually runs :))
WebView webView = (WebView) findViewById(R.id.welcomeVideo);
String play= "<html><body><div align=\"center\"> <iframe class=\"youtube-player\" type=\"text/html\" width=\"480\" height=\"320\" src=\"http://www.youtube.com/embed/9DNAyD4ll6E?rel=0\" frameborder=\"0\"></div></body></html>";
webView.setWebChromeClient(new WebChromeClient() {
});
webView.getSettings().setJavaScriptEnabled(true);
webView.loadData(play, "text/html", "utf-8");
webView.setBackgroundColor(0x00000000);
I need to embed a youtube video on my app, possibly showing the video while i am in the app and not using youtube app. I am able to do that using webview and the iframe embed thing in youtube video, and it works fine on 2 of my devices: one has Android 4.1.1, the other 4.2.
It doesen't work when i try on my phone with Android 2.3.4: it shows the thumbnail but when i click on it just remains a black space.
Maybe Android versions < 3.0 doesen't support HTML5 tags?
Sorry i am relatively new to this thing. Thanks in advance.
Here is my code:
wbv = (WebView) this.findViewById(R.id.webView1);
wbv.setFocusable(true);
wbv.setFocusableInTouchMode(true);
wbv.getSettings().setJavaScriptEnabled(true);
wbv.getSettings().setPluginState(PluginState.ON);
wbv.getSettings().setRenderPriority(RenderPriority.HIGH);
wbv.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
wbv.getSettings().setDomStorageEnabled(true);
wbv.getSettings().setDatabaseEnabled(true);
wbv.getSettings().setAppCacheEnabled(true);
wbv.setWebViewClient(new WebViewClient());
wbv.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
String html ="<html><body><iframe class=\"youtube-player\" type=\"text/html\" width=\"560\" height=\"315\" src=\"http://www.youtube.com/embed/ID\" frameborder=\"0\" allowfullscreen></iframe></body></html>";
String mime = "text/html";
String encoding = "utf-8";
wbv.loadData(html, mime, encoding);
as for me it works in following way:
final WebSettings settings = webView.getSettings();
settings.setDefaultTextEncodingName("utf-8");
settings.setJavaScriptEnabled(true);
settings.setLoadsImagesAutomatically(true);
settings.setPluginsEnabled(true);
//settings.setPluginState(PluginState.ON);
webView.loadUrl("http://www.youtube.com/embed/"+videoClip.youtubeId);
using aos 2.3.4 device. I also work if use your way, I mean IFrame:
final String sUrl = "http://youtube.com/embed/"+videoClip.youtubeId;
final String html ="<html><body><iframe class=\"youtube-player\" type=\"text/html\" width=\"560\" height=\"315\" src=\""+sUrl+"\" frameborder=\"0\" allowfullscreen></iframe></body></html>";
webView.loadData(html, "text/html", "utf-8");
however I confirm that both methods doesn't work on my froyo (2.2.2) aos device. It swows some blue chip for a seconds and thats all. It stays with black screen or frame.
I am new to android. I am facing two problems right now 1. I parsed xml file and showed it in webview which contains videos and text . When i click on videos it will not play . In xml videos are youtube embed.
Why is it so?
1.First problem :code and image
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.web_view);
Intent intent=getIntent();
String urlsting=intent.getStringExtra("str");
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setPluginState(PluginState.ON);
mWebView.getSettings().setPluginsEnabled(true);
mWebView.setInitialScale(100);
mWebView.getSettings().setBuiltInZoomControls(true);
mWebView.loadDataWithBaseURL(null, urlsting,"text/html", "utf-8", null);
}
When i clcik on video it starts browsing and shows only black screen,then nothing will happen.
![][1]
2. I have you-tube embedded videos url which I given in html tag and try to load it .They are also not working for me. I checked number of questions and blogs and also made no of settings then also unable to show video . Help will be appreciated .Thanks in advance.
String video= "<table bgcolor=\"#666666\"><tr><td><iframe width=\"300\" height=\"260\" frameborder=\"0\" id=\"player\" type=\"text/html\"src=\"http://www.youtube.com/embed/iiLepwjBhZE?enablejsapi=1&origin=example.com\"></iframe></td></tr><tr><td><iframe width=\"300\" height=\"260\" frameborder=\"0\" id=\"player\" type=\"text/html\"src=\"http://www.youtube.com/embed/lBMMTeuJ_UQ?enablejsapi=1&origin=example.com\"></iframe></td></tr><tr><td><iframe width=\"300\" height=\"260\" frameborder=\"0\" id=\"player\" type=\"text/html\"src=\"http://www.youtube.com/embed/BZMkY3y7nM0?enablejsapi=1&origin=example.com\"></iframe></td></tr><tr><td></table>";
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setPluginState(PluginState.ON);
mWebView.getSettings().setPluginsEnabled(true);
//mWebView.loadDataWithBaseURL(null,load,"text/html","UTF-8",null);
mWebView.loadData(video,"text/html","UTF-8");
In this case I load the youtube embeded videos to webview but they are also not working.
![][2]
I am using android 2.3.3version.I also want clarification that is there any requirement of install adobe flash player on emulator, but i think no because videos are working in browser. can anybody tell i am right or wrong?? please try to give me solution because i stuck with this problem long ago..
I also tried using object tag as follows:
String obj="<object width=\"300\" height=\"260\"><param name=\"movie\" value=\"http://www.youtube.com/embed/iiLepwjBhZE?enablejsapi=1&origin=example.com\"?version=3&hl=pt_BR&rel=0\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/embed/iiLepwjBhZE?enablejsapi=1&origin=example.com\" ?version=3&hl=pt_BR&rel=0\" type=\"application/x-shockwave-flash\" width=\"480\" height=\"330\" allowscriptaccess=\"always\" allowfullscreen=\"true\" /></object>";
You need to
set a WebChromeClient to your WebView
web.setWebChromeClient(new WebChromeClient());
and turn on hardwareAccelerated value
<application
android:hardwareAccelerated="true"...
check out http://developer.android.com/reference/android/webkit/WebView.html and read HTML5 Video support part.
This works for me...
I guess, you are using iframe tag in your html code. Change it with object tag. I mean, you must use object instead iframe. An example here:
<object width="480" height="330"><param name="movie"
value="http://www.youtube.com/v/"here is your video id"?version=3&hl=pt_BR&rel=0">
</param><param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/"here is your video id"?version=3&hl=pt_BR&rel=0"
type="application/x-shockwave-flash" width="480" height="330" allowscriptaccess="always" allowfullscreen="true" /></object>
Use the code below:
webview.getSettings().setPluginsEnabled(true);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setAllowFileAccess(true);
webview.loadUrl(url);
Try this and thick it as accepted if your problem solved :)
have you tested your app in actual device? Because the videos which are embedded like this i.e. iFrame are taking more time to get loaded. In my case, same thing was happening then I changed the webview settings to,
getSettings().setPluginsEnabled(true);
but after that it was not working on emulator and in device it was loading so I thought its not working but just today I tried the same thing and it was working fine with my surprise. So you just need to add this line of code.
Second thing is that only those videos which are embedded in iframe tag are supported by enabling plugins to true.
This does it:
myWebView.getSettings().setPluginState(PluginState.ON);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.getSettings().setAllowFileAccess(true);
myWebView.setWebChromeClient(new WebChromeClient());
And enable hardware acceleration too!
Follow this source, Youtube video should play
String youtubeId = "iiLepwjBhZE";
int width = rl.getWidth();
int height = rl.getHeight();
WebChromeClient mWebChromeClient = new WebChromeClient(){
public void onProgressChanged(WebView view, int newProgress) {
/*
view.loadUrl("javascript:(function() { " +
"document.querySelector('iframe').setAttribute('style', 'width: 1080px; height: 1920px'); " +
"})()");
*/
}
};
String video= "<table bgcolor=\"#666666\"><tr><td><iframe width=\"" +
width +
"\" height=\"" +
height +
"\"frameborder=\"0\" id=\"player\" type=\"text/html\"src=\"http://www.youtube.com/embed/" +
youtubeId +
"?enablejsapi=1&origin=example.com\"></iframe> </td> </tr><tr><td></table>";
//
webView.getSettings().setPluginState(PluginState.ON);
webView.setWebChromeClient(mWebChromeClient);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setAppCacheEnabled(true);
webView.setInitialScale(1);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
//mWebView.loadDataWithBaseURL(null,load,"text/html","UTF-8",null);
webView.loadData(video,"text/html","UTF-8");