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.
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.
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.
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.
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.
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>