Hi,
I am trying to display the youtube video with embedded URL.
Here I am trying to assign the embedded URL to URL property of Webview.
This is running fine on iOS but on Android, we are having some issues.
Please find the log we are getting while doing this.
[INFO] : I/TiWebChromeClient.console: (main) [456,456] Error parsing header X-XSS-Protection: 1; mode=block; report=
https://www.google.com/appserve/security-bugs/log/youtube: insecure reporting URL for secure page at character position 22. The default protections will be applied. (0:
https://www.youtube.com/embed/xyz?list=xyz-l)
Can you please try on your end and let me know if this is valid.
Hi, Please find the code snippet here. Index.xml:
It is a known bug for Chromium / Google Chrome, please read more [here](https://stackoverflow.com/a/48745051/5537752).
Hi Hans, I visited this page earlier. and I know this is a bug from chrome. But when I tried the this embedded URL in the chrome browser it is working fine. So not sure if this is somewhat related to Chrome or Titanium/alloy. Is there any workaround? it should work on Android because on iOS it is working fine!
It is an issue we cannot influence, since we simply call the API's Android provides. Note: The Chrome API on Android (for external apps) is different to the Chrome you see on Android. And the fact that it works on iOS does not really help here either, since it's a completely different platform. Note that this issue also happens for other app frameworks, so the only thing I could think of right now is getting in touch with Google to fix it, same as you did here. [~jquick] additional thoughts? *EDIT*: It seems like Google fixed it 3 weeks ago in their nightly build, so it will likely be fixed in the Android SDK soon as well. Note: I even see the issue on Desktop chrome browsers.
Reopening to track the issue and provide possible workarounds.
Like Hans has stated, Google's Chrome browser app and the Android OS' native WebView are for the most part separate implementations. Bugs that happen in one and not the other are unfortunately common. It has nothing to do with Titanium. As of Android 4.4, they do share the same rendering engine and JavaScript engine as documented by Google (link below). But this is simply for consistent rendering of web pages. They may not share the same code when it comes to HTTP requests and response handling. This is what you're running into. (Also I find that Google's WebView has more hardware acceleration bugs compared to the Chrome app as well.) https://developer.chrome.com/multidevice/webview/overview I believe the Google bug you're running into is this... https://bugs.chromium.org/p/chromium/issues/detail?id=807304 Sounds like a cross-domain issue. I remember iframe videos working fine for local HTML files. Perhaps as a work-around you can distribute your hosting page as an embedded HTML file with your app? _(I don't think there is anything we can do about this since it's a bug on Google's end. So, you'll have to find a work-around.)_
Out of curiosity, does the following webpage's iframe YouTube video work for you? It does for me. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_youtubeiframe_loop
The following workaround works for me: *embed.html*
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <iframe src="https://www.youtube.com/embed/4uBKAgF3nz4?list=PL9MeVsU0uG64RMlPf71OHsRyJWyAXnZ-l" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;" /> </body> </html>var win = Ti.UI.createWindow(); var webView = Ti.UI.createWebView({ url: 'embed.html' }) win.add(webView); win.open();<iframe>tag. In addition the user-scale<meta>tag is applied to get the correct video scaling. Looks like this: !Bildschirmfoto 2018-04-18 um 12.37.34.png|thumbnail! Note: For some reasons, the content looks broken when starting the video, but that may be an Emulator issue. In addition, I could recommend trying the [Ti.WebDialog](https://github.com/appcelerator-modules/titanium-web-dialog) module which uses the native suggested platform API's (Safari Dialog for iOS, Chrome Dialog for Android). Finally, as a third workaround, you could utilize a native library like [Android-YouTube-Player](https://github.com/PierfrancescoSoffritti/Android-YouTube-Player) via Hyperloop or a native module to play the video without the embedded link.Hi Hans, Joshua. Thank you for the fantastic workaround. For Video Scaling issue: Looks like by default it is taking the width to render the UI but if we give the fixed hight size somewhere around 250dp it shows properly. Will also take a look at Ti.WebDialog also and Android-YouTube-Player. Thanks Snehal.
Happy to help! One note on the other workarounds: I have tested Ti.WebDialog for you already and even the native Chrome Tabs (underlaying API) does not accept the URL and throws a 400 (Bad Request) error. I have also tested the
Android-YouTube-Playerand had issues getting the constructor to work, so in case the iframe solution does not satisfy you, we would need to check some other Youtube libraries out there (there are tons of) and select a proper one. The fixed height you mentioned sounds promising though. Let us know if you are okay with the workarounds or if we should keep the ticket open. Thanks!Also note that Ti.WebDialog is only a viable option for Android apps distributed via Google Play. What it does is display the Chrome app's browser dialog within your own app (kind of like how a Windows ActiveX works), but if the Chrome app is not installed on the device, then it'll fallback to using the Android OS' native WebView like you're using now. So, if you distribute your app on other Android app stores such as Amazon, then you can't assume the Chrome app is installed. (Example: Amazon Fire Tablets do not have the Chrome browser app installed. They use their own in-house made Silk web browser.)
Closing per engineers comments.