[AC-6100] [Android] Webview not working properly on rendering the youtube.
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | n/a |
| Status | Resolved |
| Resolution | Not Our Bug |
| Resolution Date | 2019-01-30T16:12:30.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | n/a |
| Components | Alloy, Appcelerator CLI, Titanium SDK & CLI |
| Labels | n/a |
| Reporter | shumne |
| Assignee | Shak Hossain |
| Created | 2019-01-11T10:32:11.000+0000 |
| Updated | 2019-01-30T16:12:31.000+0000 |
Description
When rendering the youtube video and changing the orientation sometimes the video is showing a blank black screen but the video is playing in the background.
Please find the attachment.
*Code Snippet:
index.xml*
https://www.youtube.com/watch?v=o-_u9dubZp4&list=PL9MeVsU0uG64RMlPf71OHsRyJWyAXnZ-l">
*index.js*
$.index.open();
*index.tss*
".container": {
backgroundColor:"white"
}
"Label": {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000"
}
Attachments
| File | Date | Size |
|---|---|---|
| bottomVideo.mp4 | 2019-01-15T06:34:03.000+0000 | 2433528 |
| Screenshot_2019-01-11-15-55-00-694_com.mindstix.youtubevideo.png | 2019-01-11T10:26:24.000+0000 | 850973 |
| Screenshot_20190114-164333.png | 2019-01-14T10:50:20.000+0000 | 116490 |
| Screenshot_20190114-164451.png | 2019-01-14T10:50:31.000+0000 | 843378 |
| videoIssue_2.mp4 | 2019-01-15T06:36:22.000+0000 | 7444734 |
| videoissue.mp4 | 2019-01-11T10:29:32.000+0000 | 8531921 |
Hello, I tested your issue on the Android emulator 8.0.0 version. I wasn't able to reproduce the issue that shows in the video, Is this issue only occurring on some specific device?
This sounds like a hardware acceleration bug on Google's end. If it is, then you can work-around it by adding a border to the
WebView. This will disable hardware accelerated rendering.Hi Joshua, I tried to give the borderColor and borderWidth of 1dp. It started another issue where the video goes down to bottom. Please refer to the video attached. [^bottomVideo.mp4] [^videoIssue_2.mp4]
[~shumne], Thanks for sharing your feedback. We are working on this. Will update you soon.
So the thing is, the native
WebViewis made by Google, not Titanium. We can't fix issues in Google'sWebView. The only thing you can do is work-around them. It looks like you're showing a YouTube video via an iframe within your own webpage. Is that right? You may need to tinker with the HTML to see what's causing this issue. For example, I can see that a similar issue has been raised on stackoverflow... https://stackoverflow.com/questions/38565768/android-embed-video-in-iframe-not-resized-on-webview-height-change https://stackoverflow.com/a/9046540 https://stackoverflow.com/questions/19716261/android-webview-video-issue-video-is-being-cropped-inside-youtube-iframe Also note that the Android web browser app is not the same as Android's native WebView UI widget. You often see different behavior between the two. You do have the option to use the "titanium-web-dialog" module which will use Android's web browser app as a dialog within your app (it kind of works like MS Window's Internet Explorer ActiveX). However, it has API limitations and if Google's Chrome app is not installed on the device (such as an Amazon tablet), then it will fallback to using the Android OS nativeWebViewand you're back to the same issue. https://github.com/appcelerator-modules/titanium-web-dialog Often times I see native Android devs give up on displaying a video in an iframe because of these issues and link directly to the video itself. I wish this wasn't the case, but it is what it is.Hi Joshua, We are merely using the webview and loading the youtube URL directly. as mentioned in the Description code snippet. *
[~shumne], Ok. Thanks for your feedback.
Hello [~shumne], Try with adding a border to the WebView. This will disable hardware accelerated rendering. Let us know. Thanks.
No Even after adding a border to the webview, it is showing distorted video intermittently. If possible can we please create an android native project with webview and see the results with it.
I think you've missed my point. Google's native
WebViewis known to have bugs. It's not our code. It's Google's code. That's why I was linking you to stackoverflow where other developers have had issues with it too. I think the only thing you can do is find alternative solutions or work-arounds... because we can't control how Google'sWebViewinternally renders itself.Hello, Did you find our last reply helpful for your progress? Let us know the updates from your end.