HTML 5 Video Tag Controls

Ionic Framework ionic-v3
1

Hi,
am trying to load video in HTML 5 video tag in my app. In IOS it just work fine but in Android Video controls are displaying but its not working. In normal screen everything is working perfect.

video controls=“controls” controlsList=“nodownload” preload=“metadata” poster="{{fileUploadUrl}}{{postDetails.Thumbnail}}" webkit-playsinline=“webkit-playsinline” class=“videoPlayer”>
<source src="{{fileUploadUrl}}{{postDetails.MediaUrl}}" type=“video/mp4”
</video

2

Hey,
Is there anybody to reply on this … or am i posting it in a wrong place ???

3

I am having the same kind of issue. I have an app that was created with ionic v1 a year ago and that’s been running well on both iOS and Android. But recently, after an update from Android videos stopped working on some devices like Samsung S6 and LG (simple html video tag in an ion-content). I can also reproduce the behavior on emulators with latest SDK updates.

I even started a new blank project and added a video in the index.html file and have the same issue. No problem with iOS though.

Yesterday I found out that enabling the multi-process WebView in Settings / Dev Tools on a device makes the video work again but it’s not an option for our clients. So it has something to do with WebView but I don’t know what and definitely don’t know how to make it work again.

Cordova CLI: 7.1.0 
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
ios-deploy version: 1.8.6 
ios-sim version: 5.0.8 
OS: macOS Sierra
Node Version: v6.11.4
Xcode version: Xcode 8.3.2 Build version 8E2002

I’ve been struggling with that for a week. Any idea?

5

Hi guys I have also issue html 5 video is not display in ionic 3 while same code is working in ionic 2.
cna you please where why is not working. thanks in advaced

video preload=“auto” autoplay loop class=“video bg-vidAeroplane” playsinline>
source src=“assets/vid/convertedVideo.mp4” type=‘video/mp4’>

preference name=“AllowInlineMediaPlayback” value=“true”

6

Have you guys tried Angular video player NPM package?




There are a few user made angular video players.

7

You guys can try Video.js framework as well:
https://videojs.com/

They all come with controls which you can style and position easily…

8

Thanks for you answer but how will display auto play without showing any controller like pause button etc

9

That can be programmed using typescript & css3.

CSS3 can set controls’ display to ‘none’ to hide them all.

Typescript can make video auto play…

Here’s how I rank stability of video players on web:

  1. Viemo iframe
  2. Youtube iframe
  3. Video framework js like video.js OR framework-specific video NPM packages like videogular 2
  4. Pure HTML5 video
10

Hi @jamesharvey I try this. But video is not still auto play in ionic3 for Ios. It seems there is any apple scurity configuration required.

11

You can try to make it autoplay on page load.

or you can make it wait for a few seconds until iOS device receives video data.
You can use setTimeout()

ionViewDidLoad() {
setTimeout(playVideo() {
  this.playYourVideo();
}, 3000);
}