Uploaded image for project: 'Apache Cordova'
  1. Apache Cordova
  2. CB-8798

Android 4.x - HTML5 video tag only audio playing

    XMLWordPrintableJSON

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Major
    • Resolution: Cannot Reproduce
    • Affects Version/s: Master
    • Fix Version/s: None
    • Component/s: cordova-android
    • Environment:

      Archlinux host
      Cordova 4.3.0
      Xperia Sola with Android 4.4.4 (unofficial)
      Android Simulator - Android 5.0.1 & 4.4.2

      Description

      HTML5 video tag doesn't work properly on android 4.4 (.2 & .4) webView - only the audio is playing. With 5.0.1 it works just fine!

      If I enable controls on video tag and enter fullscreen mode then I have video working, but when I'm out of fullscreen the video screen is black.

      I have android:hardwareAccelerated="true" and I also tried this plugin which is outdated now (same issue though).

      It doesn't matter if I control video with JS or I interact with the video controls. Tried both, same behaviour. Tried with all video file formats, no change.

      I know there are similar questions on the web, but all are 1-2 years old and solutions provided for them are outdated or not working.

      • Using latest version of phonegap/cordova. I have also created a sample app to test the video tag, thought maybe was something related to my app, but the problem persists.

      Simple test case:
      1. create a sample phonegap app:
      cordova create helloworld com.helloworld.cdv "Phonegap Test"

      2. add latest android platform after entering helloworld dir:
      cordova platform add android@latest

      3. open index.html and add the following after "deviceready" div ending tag:
      <video id="vid" controls webkit-playsinline></video>

      4. open index.js and add the following inside ``onDeviceReady`` method:
      //video test
      var videoObject = document.getElementById('vid');
      videoObject.src = 'http://demo.touchmediahost.com/kmapp/vid.mp4';
      videoObject.load();

      videoObject.addEventListener('canplay', function()

      { //video can be played!! videoObject.play(); }

      )

      5. Setup 2 AVDs like this: (1) Nexus S with Android 4.4.2 (API 19), Intel Atom x86 and (2) Nexus 5 with Android 5.0.1 (API 21), Intel Atom x86.
      6. For each AVD run ``cordova emulate android``.

      You'll see that on lollipop the video is displaying the image and the sound is working & on kitkat the image is black and it only works on fullscreen mode.

      All files are the default ones; in AndroidManifest.xml the hardware accel si true by default.
      Also tested on my real device with kitkat 4.4.4.

      I tried these days to change the webview to Crosswalk, but still the problem persists. Also tried the MediaElement.js with no success.
      The only webview were the video tag works correctly is ludei's cocoonjs (webview plus), but I don't really like it because it doesn't render the css like it should (only some properties).

        Attachments

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              TanaseButcaru Tanase Butcaru
            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: