Can't play HTML5 video content on Android

I’ve spent a while struggling with not being able to play videos in the <video> tag in Android only. It looks like others are having similar issues. Initially, I was loading my video src with an angular directive, but have tried to hardcode a video tag and am seeing the same results. The video appears to load (along with the poster element), but when I click play, nothing happens. I’ve also used jQuery to try and trigger play via `$(‘video’).play() and get nothing.

It’s worth mentioning that everything is working properly in iOS - the video plays when you click play and jQuery is able to start and stop the video.

1 Like

Have you tried the iframe workaround?

It might help.

I went through a lot of these issues last week, and eventually had to use the iframe workaround. A couple other things to consider with Android:

  • Local videos will not play without a third-party plugin
  • There are problems with playing html5 videos on Android within a scrolling modal, as click events don’t fire on the video correctly. Setting ion-content scrolling=false helped.
  • ng-src will not work for dynamically setting a source.
2 Likes

Thanks, I’ll check out the iframe workaround. I’ve tried both using and not using ng-src, but good to know that I shouldn’t expect that to work. I’ve been trying to play remote videos from an AWS bucket, so they shouldn’t have the local issue.

Has there been any word about the root cause of this issue?

One more thing to check with AWS - make sure it’s sending the videos as content-type: video/mp4 and not just as a straight octet-stream. iOS will recognize an MP4 file as a video without the proper content-type, but not Android.

Yup, sending as video/mp4. Thanks! Will let you know how iframe method works outs.

Hi guys, I was having the same issue, and spent half of my day with this, but finally got the answer.
Apparently is a problem related with the fastclick, and it can be solved by adding to the overflow-scroll=“true” to the ionic-content.

< ion-content overflow-scroll=“true” >

Source: https://github.com/driftyco/ionic/issues/1607
Demo: http://codepen.io/perrygovier/pen/cazjd?editors=101

Good luck

This fixes it - nice find, dcardoso!!

1 Like

Anyway to works html5 video with overflow-scroll=“false”???

Im using slide ox on a popup, and if I use overflow-scroll="true", the slide box cant adjust height and I can`t play the video on Android.

If you look at the issue linked above (https://github.com/driftyco/ionic/issues/1607) you can also wrap the video element in a div with data-tap-disable="true"

I am successfully playing video on Android 4.2.2, 4.3, 4.4.4, 5.0, 5.1.

solution:

  • install crosswalk
  • tell angular to trust the URL $scope.vidURL = $sce.trustAsResourceUrl(data.vidURL);
  • and like @jskrzypek suggests, wrap the video element in a div with data-tap-disable="true"

best solution:

Th first solution worked for me, but I was still getting errors about how the src for the poster or video were not found. Even though everything seemed to work consistently, the errors concerned me. So tried to use ngMedia then ngVideo. Both frustrated me because of the poor documentation. Videogular looks like a complicated plugin for just video, but it is well documented, modular, easy, and works on all the platforms I mentioned.

1 Like

Thanks @dcardoso . It worked for me finally…

Hello @danlopez191
Can you teach me how to fix the bug using video tag in android version?
I have added as following.

<ion-content overflow-scroll="true">
  <video controls>
    <source src="...." type="video/mp4" />
  </video>
</ion-content>

But the result is not find.
Audio can play but video can’t play in android.
Thank you.

Hi in code pen ya its working even if I use that src link will work in my code also without giving any overflow plz check my code below why its not working not getting …
typescript

 this.mediaCapture.captureVideo(options).then(
      (data1: MediaFile[]) => {
        for (var i = 0; i < data1.length; i++) {
          let temp = data1[i];         
            this.storeVideoPath.push({ "src":temp.fullPath});                           
        }

in ionic html

<ion-content padding overflow-scroll="true">

  <span class="text">Attachment Id #Temp</span>
  
<ion-list class="parentListClass">

    <ion-label color="black" stacked><span class="text">Customer Information </span><span class="mandatory_field">*</span></ion-label>
    <textarea type="text" class="cust_info" [(ngModel)]="cust_info" name="descri"></textarea>
 <ion-item *ngFor="let video of storeVideoPath" class="col">
        <video controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer">
          <source src= "{{video.src}}" type="video/mp4"/></video>
      </ion-item>
  </ion-list>



</ion-content>