Android Native.newwebview: Embed Youtube Video Doesn't Work

Other
#1

I have an app where I need to display youtube content. It works fine for iOS, but Android has a problem.

The webView loads a local html file which embeds a youtube video in an iframe. 

As mentioned above, the webView works fine on iOS. It also works fine on a Google Nexus 7 running Android 4.2.

The webView doesn’t show the video on a Galaxy S running Android 2.3.

However, If I load the same html file (see below) in the stock browser on the Galaxy S, the video is shown without a problem, so I suspect there’s a glitch in the current implementation of the webView for Android.

Note: I’ve disabled browser plugins on the Galaxy S since I don’t want the Flash version to be played. (It doesn’t really matter though since enabling flash didn’t make the video play anyway)

Any thoughts?

I’ve stripped down the html file and hardcoded a sample video below.

\<!DOCTYPE html\> \<html\> \<body style="padding:0px; margin:0px; width:100%; height:100%;"\> \<iframe id="dynamicvideo" seamless style="width:100%; height:100%"\>\</iframe\> \<script type="text/javascript"\> window.frames["dynamicvideo"].document.location.href = "http://www.youtube.com/embed/u1zgFlCw8Aw" \</script\> \</body\> \</html\>
#2

I have the same issue. I think it’s a bug in Corona… any word from corona staff ?

#3

Currently, our web views on Android do not support HTML 5 video.  It only supports Flash videos.

This is one of those unfortunate things where iOS provides HTML 5 video functionality easily for free, while Android’s web views do not.  We would have to write a lot of code to intercept the video request and manage the video ourselves to get this to work.  We have HTML 5 video support written up as a feature request, but there hasn’t been enough demand to justify the time it takes to implement this.

#4

For anybody interested in showing Youtube videos on iOS and Android in Corona, I got it to work by using the Youtube IFrame API as described here: https://developers.google.com/youtube/iframe_api_reference

However, there are times when pre 4.1 Android devices are a bit funky when trying to display HTML5 video using the IFrame API, which led me to also provide support for the YouTube Javascript API which forces Flash content (https://developers.google.com/youtube/js_api_reference).

My app defaults to the IFrame API which works on most modern Android devices, but I provide a toggle in my app (in the Android version only) where a user can choose the Javascript API if the device has problems showing video with the IFrame API.

iOS devices have had no problems in showing HTML5 content with the IFrame API.

#5

Thanks for sharing this ingemar.

Another alternative solution is to display the YouTube page via a system.openURL() call… with the limitation being is that it’s not displayed in-app.  However, on Android, pressing the Back key will bring you back to your app.

#6

@ingemar 

I’m using iframe to display YouTube video on both iOS and Android. On iOS I have no issues. However, on Android, the video is black while audio plays fine… can I ask how did implement the iframe api into your app on Android? 

Thank you

#7

Marhaba Mustafa,

Some Android devices have this problem, so I ended up implementing the Youtube Javascript API as well. This will force Flash video to be displayed instead of HTML5. Please note that Flash was dropped from Android in version 4.1, so you’ll still need to use the IFrame API there, however I’ve never seen any problems on those devices. The JS API is nearly identical to the IFrame API so you should be able to reuse your JS code to control playback.

What I ended up doing was to create two HTML-templates.  One for the IFrame API, and one for the JS API. I provide a toggle within my app (called “Enable Flash video”) so the user can select which API is used.

Eid Mubarak

#8

Eid Mubarak to you as well,  :slight_smile:

Thank you for sharing your approach. A toggle is a good idea, so users have the option to choose between Flash or HTML5 video playback. I have not tested it yet and I hope it works for me.

~Mustafa 

#9

I have the same issue. I think it’s a bug in Corona… any word from corona staff ?

#10

Currently, our web views on Android do not support HTML 5 video.  It only supports Flash videos.

This is one of those unfortunate things where iOS provides HTML 5 video functionality easily for free, while Android’s web views do not.  We would have to write a lot of code to intercept the video request and manage the video ourselves to get this to work.  We have HTML 5 video support written up as a feature request, but there hasn’t been enough demand to justify the time it takes to implement this.

#11

For anybody interested in showing Youtube videos on iOS and Android in Corona, I got it to work by using the Youtube IFrame API as described here: https://developers.google.com/youtube/iframe_api_reference

However, there are times when pre 4.1 Android devices are a bit funky when trying to display HTML5 video using the IFrame API, which led me to also provide support for the YouTube Javascript API which forces Flash content (https://developers.google.com/youtube/js_api_reference).

My app defaults to the IFrame API which works on most modern Android devices, but I provide a toggle in my app (in the Android version only) where a user can choose the Javascript API if the device has problems showing video with the IFrame API.

iOS devices have had no problems in showing HTML5 content with the IFrame API.

#12

Thanks for sharing this ingemar.

Another alternative solution is to display the YouTube page via a system.openURL() call… with the limitation being is that it’s not displayed in-app.  However, on Android, pressing the Back key will bring you back to your app.

#13

@ingemar 

I’m using iframe to display YouTube video on both iOS and Android. On iOS I have no issues. However, on Android, the video is black while audio plays fine… can I ask how did implement the iframe api into your app on Android? 

Thank you

#14

Marhaba Mustafa,

Some Android devices have this problem, so I ended up implementing the Youtube Javascript API as well. This will force Flash video to be displayed instead of HTML5. Please note that Flash was dropped from Android in version 4.1, so you’ll still need to use the IFrame API there, however I’ve never seen any problems on those devices. The JS API is nearly identical to the IFrame API so you should be able to reuse your JS code to control playback.

What I ended up doing was to create two HTML-templates.  One for the IFrame API, and one for the JS API. I provide a toggle within my app (called “Enable Flash video”) so the user can select which API is used.

Eid Mubarak

#15

Eid Mubarak to you as well,  :slight_smile:

Thank you for sharing your approach. A toggle is a good idea, so users have the option to choose between Flash or HTML5 video playback. I have not tested it yet and I hope it works for me.

~Mustafa 

#16

Is this still the case in the latest G2 builds (as of now 2157+) of Corona?

#17

There’s been no change.  Corona still does not support HTML5 video in WebView on Android.

The simplest work-around is to display the YouTube page via system.openURL(), which would cause it to be displayed by the Browser app.  When the end-user taps the Back button, then it should take them back to your app.

#18

Is this still the case in the latest G2 builds (as of now 2157+) of Corona?

#19

There’s been no change.  Corona still does not support HTML5 video in WebView on Android.

The simplest work-around is to display the YouTube page via system.openURL(), which would cause it to be displayed by the Browser app.  When the end-user taps the Back button, then it should take them back to your app.

#20

@Joshua, any update?