Recently I got some questions about media streaming with Ionic so I gave it a try and the results where actually pretty good! With not much effort we can easily integrate streaming audio or video into our app using a nice little plugin.
In this Quick Win we will see how to use the Ionic Native Media Streaming plugin for both audio and video files that are somewhere on a remote server.
The full quick win with snippets is only available to Ionic Academy members.
Join now for
- Unlimited access to all quick wins
- Library of 40+ step-by-step video courses
- Support for Ionic questions via Slack & private community
Current member? LOGIN
How do I prevent the audio playback from stopping once the device goes on standby/sleep? I’ve tried using
@ionic-native/background-modeand it doesn’t work…Hi, did you get it?
I ditched this plugin altogether as it seems it is no longer being maintained. I’m using HTML5 Audio in my app now and it works in the background on Android (no extra configs needed). It also works on iOS but you need to use a background-audio plugin and enable Background Mode from the Info.plist.
May I get a sample code please?
abbaahmad14@yahoo.com
may i get the sample on ionic.fiverr@gmail.com
https://www.w3schools.com/html/html5_audio.asp
It’s as simple as can be.
Thanks dude. The HTML5 audio function works waaaay better than this plugin.
I try in IOS, but when I click “Start Audio” nothing happens. There is any other configuration that I have to do?
Its not working in Android 7 version , it gives Error: MediaPlayer Error: Unknown (1) -2147483648
I had the same Error and it was URL/API that had Issues. could you check that
Same issue. when I open url in browser it’s opening video
I want to play live streaming video, can any one help me?
hello sir,
in this player how to set progress bar ,audio duration,current duration
how can we play any type of video url in ionic2
How to upload video to server? and then fetch that video and stream in video player ?
[13:41:45] tslint: C:/mediaStreaming/src/pages/home/home.ts, line: 2
All imports are unused.
L1: import { Component } from ‘@angular/core’;
L2: import { NavController } from ‘ionic-angular’;
L3: import { StreamingMedia, StreamingVideoOptions, StreamingAudioOption
s } from ‘@ionic-native/streaming-media’;
I got this error and also video doen’t play.. Any solution there.
Hello, is it possible to put some content in front of the video like this : https://i.imgur.com/BpUhh3B… ?
Totally nonsense this audio player on the full screen
Hello!!
I’m struggling to import the dependency in my project with last ionic 4 version.
After include the dependency in app.module.ts
import { StreamingMedia } from ‘@ionic-native/streaming-media’;
….
providers: [
StatusBar,
SplashScreen,
StreamingMedia
…..
]
I have this error:
[ng] ERROR in src/app/app.module.ts(50,5): error TS2322: Type ‘StreamingMediaOriginal’ is not assignable to type ‘Provider’.
[ng] Type ‘StreamingMediaOriginal’ is not assignable to type ‘ClassProvider’.
[ng] Property ‘provide’ is missing in type ‘StreamingMediaOriginal’.
Any solution there. Thanks in advace
For Ionic 4 you need to add /ngx to the imports of Ionic Native packages, see here: https://ionicframework.com/docs/native
Thank you!
Still getting use to new version.