Ionic video html - native plugins

Ionic Framework ionic-v3
1

Hello,

We are creating an app with the following requirements for videos:

  • There will be a playlist of 4-16 videos to be played.
  • Each video, will have it’s own page with it’s own controls and info for the video (which can be done in one page in Ionic, just with changing the info and the video url)
  • The videos will be played INLINE the app.
  • The size of the videos will be small (<1Mb)
  • Videos will be hosted on a server, and ideally when the playlist starts, they should all be downloading on the phone for streaming.
  • We want both iOS and Android.

The plugin of Ionic native for streaming media doesn’t seem to work for inline video, so we switch to Html5 video, something like:

<video height="240" #video1
         poster="https://www.png"
         webkit-playsinline="true" playsinline="true">
    <source src="https://www.mp4" type="video/mp4" />
    Your browser does not support the video tag.
  </video>

  <button ion-button block padding (click)="startPlayingSession('video1')">
    Start Playing Streaming High
  </button>

Does anyone suggest a more Native solution than Html5? What are the possible drawbacks?
Thanks

2

My suggestion is that unless you need to fully customize the video element itself with your own branding (which is unnecessary unless your purely a content company like vimeo in my opinion) than HTML5 video should be enough for you.

I did a write up about how we implemented a 3 video rotating screen that makes it easy for you to auto buffer videos and play them inline

3

My favourite: https://github.com/videogular/videogular2

4

That Medium post is GREAT @thielcole. Thank you very much.

1 Like