Provide IONIC example

[khalisafkari]

Example project for ionic

[frontyard]

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

[frontyard]

If anyone has a working IONIC example please share!

[go2hyder]

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) }) 
}

[frontyard]

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

[go2hyder]

@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

[mty620]

can someone provide an Ionic v2 or v3 sample?

[spyderboy]

Here's an example with Ionic 2, for those looking: https://github.com/spyderboy/ionic2Exoplayer

[khalisafkari]

Please tutorial auto fullscreen landscape

[frontyard]

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

[mebibou]

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

[fthkrtl]

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();
      }
    });
  }
}

[akash-int]

How to set options for ionic 3 & show control icons? @fthkrtl35

[s4git21]

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

[s4git21]

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();
    };
}

[maykoestevez]

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

[frontyard]

@maikolestevez Anything in "adb logcat"?

[maykoestevez]

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

[maykoestevez]

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

[maykoestevez]

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.

[bme1983]

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

[maykoestevez]

@bme1983 bro i just did:

• ionic start helloWorld blank
• ionic cordova plugin add cordova-plugin-exoplayer
• cordova platform add [email protected]

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

[bme1983]

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

[torrober]

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;
}
}
}`

[frontyard]

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.

[torrober]

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

[frontyard]

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();

[torrober]

Thanks for your example, but i fixed it by changing the library to streamingMedia.
Anyway, nice library, might use it on another project!

[frontyard]

No problem. Which streamingMedia library are you referring to @latinochannels?

[zeroxies90]

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

[itmprod]

Customizing ExoPlayer attributes in Ionic 5 angular12

please help me

[naveen-nuveda]

How to play video in Vue using this ionic Framework