Provide IONIC example
khalisafkari opened this issue · 31 comments
Example project for ionic
@khalisafkari I don't use Ionic so I can't be of help. If you manage to make it work please share what you needed to do.
If anyone has a working IONIC example please share!
I had successfully implemented in ionic before.I am using the plugin version 1.0.0
<button class="button-positive" ng-click="playAudio(url)">Play Audio</button>
<button class="button-positive" ng-click="playVideo(url)">Play Video</button>
$scope.playAudio=function(url){
var params = {
url: url,
user_agent: "PluginExoPlayer",
plugin_controls_visible: true,
aspect_ratio: 'fit_screen',
full_screen: true,
raw_touch_events: false,
header: { // top header panel
height: 400,
padding: 30,
background_color: "#22222222",
image_url: imageUrl,
text_color: "#FFFFFFFF",
text_align: "center" ,// left, center or right
text: head,
text_size: 20
}
}
var player = exoplayer.init(params);
//player.play()
player.show(function(success) {
console.log("success", success)
}, function(err) { console.log("err", err) })
}
$scope.playVideo= function(url){
var params = {
//type: 'hls',
url: url,
user_agent: "PluginExoPlayer",
plugin_controls_visible: true,
aspect_ratio: 'fit_screen',
full_screen: true,
raw_touch_events: false
}
var player = exoplayer.init(params);
//player.play()
player.show(function(success) {
console.log("success", success)
if(success.event_type == "stop_event"){
screen.orientation.unlock()
}
}, function(err) { console.log("err", err) })
}
@go2hyder Do you mind upgrading to the latest version of the plugin and sending new setup code? I'd like to publish it on the main page and give you credit for it.
@frontyard Sorry for the late reply
I have updated the plugin and create a sample repository
Please check this https://github.com/go2hyder/Ionic-example-for-cordova-Exoplayer
can someone provide an Ionic v2 or v3 sample?
Here's an example with Ionic 2, for those looking: https://github.com/spyderboy/ionic2Exoplayer
Please tutorial auto fullscreen landscape
@khalisafkari Have any of the examples provided here helped you?
Orientation of the player should automatically follow your device's orientation. And player is opened fullscreen by default.
I've just submitted a PR to add the plugin to Ionic Native: danielsogl/awesome-cordova-plugins#2180, feel free to comment if you think there is a mistake
IONIC 3 - working example @khalisafkari
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {AndroidExoplayer} from '@ionic-native/android-exoplayer';
@Component({
selector: 'page-home',
templateUrl: 'home.html',
providers:[AndroidExoplayer]
})
export class HomePage {
url="http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8"
constructor(public navCtrl: NavController, private exo: AndroidExoplayer) {
this.play()
}
play() {
this.exo.show({url:this.url}).subscribe(res => {
if (res.eventType == 'KEY_EVENT') {
this.exo.close();
}
});
}
}How to set options for ionic 3 & show control icons? @fthkrtl35
Is there a way to play audio only?
The param {'audioOnly': false} throws an error => not assignable to parameter of type 'AndroidExoPlayerParams'.
Types of property 'audioOnly' are incompatible.
Type 'string' is not assignable to type 'true'.
Ionic 3 and Ionic 2. This is for Folks looking for Audio in background mode.
import { Platform } from 'ionic-angular';
declare var ExoPlayer;
import { Injectable } from '@angular/core';
@Injectable()
export class RadioPlayer {
constructor(public plt: Platform) {
}
play(streamurl) {
var params = {
url: streamurl,
audioOnly: true
}
this.plt.ready().then(() => {
ExoPlayer.show(params);
});
};
pause() {
ExoPlayer.close();
};
}Hello, thanks to give us this plugin.
Im working on IONIC 4.1.2 and Im trying to open the exploplayer and it works well, but when i add the controller object the app crash and show me the app stop working and i can`t see any out put from console.
this is my code
ExoPlayer.show({
url: 'URL',
aspectRatio: 'FILL_SCREEN', // default is FIT_SCREEN
controller: { // If this object is not present controller will not be visible
streamImage: 'Image',
streamTitle: 'Channel',
streamDescription: 'Channel',
hidePosition: false,
hideDuration: false
}
}).subscribe(result => {
if (result.eventType == 'KEY_EVENT') {
ExoPlayer.close();
}
});
Thanks!!
@maikolestevez Anything in "adb logcat"?
Thanks, I haven`t check adb logcat.
this is the error Im getting from adb logcat
D/AndroidRuntime(11422): Shutting down VM
E/AndroidRuntime(11422): FATAL EXCEPTION: main
E/AndroidRuntime(11422): Process: io.ionic.starter, PID: 11422
E/AndroidRuntime(11422): java.lang.StringIndexOutOfBoundsException: length=0; index=0
E/AndroidRuntime(11422): at java.lang.String.indexAndLength(String.java:500)
E/AndroidRuntime(11422): at java.lang.String.charAt(String.java:494)
E/AndroidRuntime(11422): at android.graphics.Color.parseColor(Color.java:209)
E/AndroidRuntime(11422): at co.frontyard.cordova.plugin.exoplayer.LayoutProvider.setupBar(LayoutProvider.java:126)
E/AndroidRuntime(11422): at co.frontyard.cordova.plugin.exoplayer.LayoutProvider.setupController(LayoutProvider.java:69)
E/AndroidRuntime(11422): at co.frontyard.cordova.plugin.exoplayer.LayoutProvider.getExoPlayerView(LayoutProvider.java:61)
E/AndroidRuntime(11422): at co.frontyard.cordova.plugin.exoplayer.Player.createDialog(Player.java:228)
E/AndroidRuntime(11422): at co.frontyard.cordova.plugin.exoplayer.Player.createPlayer(Player.java:206)
E/AndroidRuntime(11422): at co.frontyard.cordova.plugin.exoplayer.Plugin$1.run(Plugin.java:46)
E/AndroidRuntime(11422): at android.os.Handler.handleCallback(Handler.java:739)
E/AndroidRuntime(11422): at android.os.Handler.dispatchMessage(Handler.java:95)
E/AndroidRuntime(11422): at android.os.Looper.loop(Looper.java:145)
E/AndroidRuntime(11422): at android.app.ActivityThread.main(ActivityThread.java:6946)
E/AndroidRuntime(11422): at java.lang.reflect.Method.invoke(Native Method)
E/AndroidRuntime(11422): at java.lang.reflect.Method.invoke(Method.java:372)
E/AndroidRuntime(11422): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1404)
E/AndroidRuntime(11422): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1199)
W/ActivityManager( 2698): Force finishing activity 1 io.ionic.starter/.MainActivity
Done!!!, After checking the logcat I infer that i was missing something that the plugin needs to work so I add all of the others property and end up with this:
adding textButton,butttonColor and bufferingColor it works
ExoPlayer.show({
url: url,
showBuffering: false,
controller: { // If this object is not present controller will not be visible
streamImage: 'https://i.imgur.com/FOwNemD.png',
streamTitle: 'Entretenimiento',
streamDescription: 'Channel',
hidePosition: false,
hideDuration: false,
**textColor: '#ffff0000',// These colors can be any valid Android color
buttonsColor: '#ff00ff00', // This example uses hex values including alpha (first byte)
bufferingColor: '#ff0000ff' // Alpha of 'ff' makes it 100% opaque**
}
Others things that i saw is that the TS wrapper doesn't have all of the property needed and at the end is better working without it until we improve this, for example textColor is needed for me to make it work but the intellisense told me textColor' does not exist in type 'AndroidExoPlayerControllerConfig' and I couldn't add it with the wrapper, so i have to use this approach to make it work
declare var ExoPlayer;
Thank you very much
Other thing how can I hide the blue line that is in the top of the player I think that is the buffering, but i tried showBuffering: false and is not working.
Hi
I can not get the plugin to work, I get the error ExoPlayer is not defined - Use ionic 3.9.2
It's my code
home.html
Ionic Blank
<button ion-button block (click)="openLiveRadio()">Play
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';
declare var ExoPlayer;
@component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public plt: Platform) {
}
openLiveRadio() {
var params = {
url: 'https://playerservices.streamtheworld.com/api/livestream-redirect/WYEPFMAAC.aac',
userAgent: 'MyAwesomePlayer', // default is 'ExoPlayerPlugin'
aspectRatio: 'FILL_SCREEN', // default is FIT_SCREEN
hideTimeout: 5000, // Hide controls after this many milliseconds, default is 5 sec
seekTo: 0, // Start playback 10 minutes into video specified in milliseconds, default is 0
skipTime: 0, // Amount of time to use when going forward/backward, default is 1 min
controller: { // If this object is not present controller will not be visible
hideProgress: false,
controlIcons: {
'exo_rew': 'http://url.to/rew.png',
'exo_play': 'http://url.to/play.png',
'exo_pause': 'http://url.to/pause.png',
'exo_ffwd': 'http://url.to/ffwd.png'
}
}
}
this.plt.ready().then(() => {
ExoPlayer.show(params);
});
}
}
Please Help
@bme1983 bro i just did:
- ionic start helloWorld blank
- ionic cordova plugin add cordova-plugin-exoplayer
- cordova platform add android@6.4.0
then this code
declare var ExoPlayer;
openLiveRadio() {
var params = {
url: 'https://playerservices.streamtheworld.com/api/livestream-redirect/WYEPFMAAC.aac',
}
ExoPlayer.show(params);
}
This is working prefect.
checkout in your node_modules if you have installed the plugin, your code should be working
node_modules
-cordova-plugin-exoplayer
Hi @maikolestevez
Its my app.modules.ts
import { AndroidExoplayer } from '@ionic-native/android-exoplayer';
providers: [
StatusBar,
SplashScreen,
AngularFireDatabase,
AndroidExoplayer,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
Tanks for help
hi! i'm trying to close exoplayer when i press the backbutton, however i can't, the player keeps playing the data stream.
Here´s my code, i'm using ionic 5.
home.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Platform } from '@ionic/angular';
declare var ExoPlayer;
@component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
data: any;
constructor(
public http: HttpClient,
public platform: Platform
) {
this.getData();
this.platform.backButton.subscribe(() => {
alert("back button pressed");
console.log("backbutton");
ExoPlayer.close();
});
}
getData(){
let url = "https://cors-anywhere.herokuapp.com/https://pastebin.com/raw/5ugfxD2f";
this.http.get(url).subscribe(data =>{
this.data = data;
});
}
play(url, type) {
var streamurl = url;
var type = type;
var params = {
user_agent: "PluginExoPlayer",
url: streamurl,
showBuffering: false,
full_screen: true,
aspectRatio: "FILL_SCREEN",
}
switch (type) {
case "hls":
ExoPlayer.show(params).subscribe(result => {
if (result.eventType == 'KEY_EVENT') {
ExoPlayer.close();
}
});
break;
case "embed":
alert("este canal no tiene enlace directo");
break;
}
}
}`
ExoPlayer.close() definitely works. Back button is kind of special on some platforms, maybe you're not getting that event from the plugin. Try adding plain Cordova keyboard listener and see if you're getting it there. If you are then just close the player there.
Can you provide any example of doing that?
I've tried doing a Cordova only version of the app but I still have that problem. That's why I tried doing it on ionic
Adding listeners in plain Cordova app would be done like this:
document.addEventListener('backbutton', backButtonEventHandler, false);
and
document.addEventListener('keyup', keyUpEventHandler, true);
There are more events that Cordova sends, these 2 are just as an example. In your backButtonEventHandler you would do:
window.ExoPlayer.close();
Thanks for your example, but i fixed it by changing the library to streamingMedia.
Anyway, nice library, might use it on another project!
No problem. Which streamingMedia library are you referring to @latinochannels?
How can I play video in Ionic 5 angular12 , I am using Capacitor android and @ionic-native/android-exoplayer and after build apk its not showing player view
that I have
this.androidExoPlayer.show({
url: url,
controller: { // If this object is not present controller will not be visible
streamImage: 'https://i.imgur.com/FOwNemD.png',
streamTitle: 'Entretenimiento',
streamDescription: 'Channel',
hidePosition: false,
hideDuration: false
}
});
Please help
Customizing ExoPlayer attributes in Ionic 5 angular12
please help me
How to play video in Vue using this ionic Framework