3 Replies Latest reply on Oct 3, 2016 2:23 PM by kerrishotts

    HTML5 video element can hear but not see when app build with PhoneGap build.

    stevep69028138

      Hi all, I'm new to PhoneGap so aplolgies if I say anything "stupid"...

       

      I have the following html which works fine in Chrome, FF etc, standard HTML5 video element.

       

      <video controls="">

        <source src="videos/myfile.mp4" type="video/mp4">

        <p>Your browser does not support H.264/MP4.</p>

      </video>

       

      The video plays fine when code viewed in devices broswer.

       

      When I compile using PhoneGap build and view the resulting app on android 4.4.4, I can click the play button and hear the video, but not actually see anything.

       

      I've done a bit of digging around and it seems that Crosswalk should correct this.

       

      I have added Crosswalk to my config.xml and rebuilt, but did not see any difference and could still only hear the video

       

      This is the code I added to my config.xml

      <gap:plugin name="cordova-plugin-crosswalk-webview" source="npm" version="2.1.0"/>

       

      Has anybody got the HTML video element to wok on android 4.4.4. using apps built using PhoneGap build? - If you have can you help?

       

      Cheers

      Steve

        • 1. Re: HTML5 video element can hear but not see when app build with PhoneGap build.
          kerrishotts Adobe Community Professional

          You're not using a PGB-specific Crosswalk plugin, so you might want to try one of those first. See Plugin Search - Apache Cordova. You're probably building for ARM at the moment, so add the "arm" version of the plugin. It probably won't make any difference, but someone else had a problem where using the non-PGB plugin was resulting in downloading the Intel APK instead of an ARM APK, which is one more headache you probably don't need.

           

          On to your issue:

           

          Can Android play the video if you copy it to the device on its own? Perhaps there is an issue with how the video was encoded.

           

          If you can, I would look at the device's console logs (adb logcat, or there are apps in the Google Play Market) and see if there is anything interesting when you play the video from your app. That might help troubleshooting.

           

          If you have no success there, you might want to search the plugin repo for a native video player.

           

          One last thing: don't use the <gap:plugin tag> -- use <plugin> instead. This is unlikely your issue, though, but it's important to have a modernized config.xml.

          • 2. Re: HTML5 video element can hear but not see when app build with PhoneGap build.
            stevep69028138 Level 1

            Thanks for your reply - I checked out the documentation of the arm/intel version but both give the same entry to place in config.xml for PGB"<gap:plugin name="cordova-plugin-crosswalk-webview-pgb-adapt" source="npm" version="1.4.0-dev-5"/>"

             

            The video is encoded correctly and the device does play if when the browser is used.

             

            If I use a device with android 5, the phone gap app even plays it!

             

            You'd have thought the desire to play mp4 videos would have been high on the list of things most people would want to use an app for! Not exactly like I'm trying to use a VIDEO element to do something other than play a video.

            • 3. Re: HTML5 video element can hear but not see when app build with PhoneGap build.
              kerrishotts Adobe Community Professional

              Video on old Android versions is a pain in the you-know-what. I'm surprised Crosswalk isn't working in your case, but versions of Android < 5.x like to throw curveballs.

               

              First thing I'd do is to make sure that your app is indeed using Crosswalk. For one, your APKs should be larger than you might otherwise expect (due to including a build of Chromium). Second, execute a "alert(navigator.userAgent)" and report what comes up on each device/OS version.

               

              Finally, video itself is a pain in the rear, regardless of PhoneGap or not. Worst case, I'd suggest using a plugin from the Cordova plugin repository -- those work better on older versions of Android.