youtube video: audio, but no video

[Jan-Dirk]

I am trying to play videos in an app. The video plays well in the simulator, but not on my android device. On my mobile device I have a black screen while the video is playing, audio is playing normally.

This is an example of what I use to embed the video:
<iframe width="100%" height="58%" src="http://www.youtube.com/embed/-1UIBTve4dI?rel=0&amp;&amp;autoplay=0&amp;controls=1" frameborder="0" allowfullscreen></iframe>

Any idea what could be wrong?

[Steve]

Hi JD,

The provided markup works perfectly on my Android 4.1.2. What is your device and OS version and have you tried this on another device? Is that markup part of a more complex app, where something might interfere with it or you're just trying with it?

Regards,
Steve
Telerik

Don't miss the Icenium May Release Keynote - sign up now!
Share feedback and vote for features on our Feedback Portal.

[Jan-Dirk]

Hi Steve,

I am using the markup in a Kendo UI view. The view is populated from a template, but that isn't the problem.

I created an app with just the markup and I don't have video there either. The initial picture that is shown for the video is there, but as soon as I start the video the image becomes black. Like I said, sound is available.

I have a tested on a Samsung Galaxy S2 with Android 4.1.2

Thanks for your help Steve!

[Steve]

Hello JD,

I was able to reproduce the behavior you observe on Galaxy S3 with 4.1.2 (the closest we have to your Galaxy S2) and after some comparison with my phone on which it worked, I identified the problem. Mine, where it was working had Settings > Developer options > Force GPU rendering checked. Once I checked that on the Galaxy S3, it worked as well, so I suppose it would work on your end as well. Clearly this is not a clean solution as telling all your users to enable a setting which is not even visible out of the box is far from optimal.

A quick google search about "android video iframe" shows numerous complaints that it does not work, so our suggestion would be to simply use HTML 5 video tag which in Android v.4.x.x is supported fairly good. You would need to enable hardware acceleration from the Icenium project properties for this purpose.

Regards,
Steve
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[Steve]

Hi JD,

I've found an alternative way to force the GPU rendering, without any user intervention. You do this by using the translate3d transform method. The code that worked for me follows:

HTML:

<div class="animClass">
    <iframe width="100%" height="58%" src="http://www.youtube.com/embed/-1UIBTve4dI?rel=0&;&autoplay=0&controls=1" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

.animClass {
    -webkit-transform: translate3d(0, 0, 0);
}

Hope this helps.

Regards,
Steve
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[Jan-Dirk]

Thank you Steve, that was exactly what I was looking for!

[Alex]

Hi,

I also meet that issue and fix it using force the GPU rendering. But will it what happen again and need to checked the GPU rendering if I deploy or install on other android device? 

Thanks.

[Tina Stancheva]

Hi Alex,

The translate3d setting should force hardware acceleration on all android devices the app runs on. You can have a look at this post for more info about the its usage.

Regards,
Tina Stancheva
Telerik

 

 

[KJ]

I'm having the same problem, but with an iOS 

[Tina Stancheva]

Hello KJ,

As this thread is discussing an issue n Android devices, I am not sure what might be going wrong in your app when running on iOS devices. Have you build the app in AppBuilder and are you leveraging Cordova or NativeScript?

It would greatly help if you can share your implementation so we can est it on our side. You can do that through our ticketing system by submitting a support ticket and attaching a sample app along with more details about the device type and OS you're using for testing.

Regards,
Tina Stancheva
Telerik