youtube video: audio, but no video

10 posts, 0 answers
  1. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 04 Jun 2013 Link to this post

    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?
  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 04 Jun 2013 Link to this post

    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.
  3. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 05 Jun 2013 Link to this post

    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!
  4. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 05 Jun 2013 Link to this post

    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.
  5. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 05 Jun 2013 Link to this post

    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.
  6. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 06 Jun 2013 Link to this post

    Thank you Steve, that was exactly what I was looking for!
  7. Alex
    Alex avatar
    5 posts
    Member since:
    Jan 2014

    Posted 11 Aug 2014 Link to this post

    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.
  8. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 14 Aug 2014 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  9. KJ
    KJ avatar
    1 posts
    Member since:
    Jul 2015

    Posted 26 Jul 2015 in reply to Tina Stancheva Link to this post

    I'm having the same problem, but with an iOS 
  10. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 29 Jul 2015 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top