Went ahead and did as you suggested and still the plugin doesn't seem to be working. Below is my code.
import { Component } from '@angular/core';
import { NavParams} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { ScreenOrientation } from '@ionic-native/screen-orientation';
import { VideoQuality, Quality } from "../../models/video-model";
import {Observable} from "rxjs/Observable";
declare const MediaElementPlayer: any;
declare const Hls: any;
declare const $: any;
@Component({
selector: 'modal-video-player',
templateUrl: 'video-player.html'
})
export class VideoPlayerModal {
private videoURLs: Map<VideoQuality, string> = new Map<VideoQuality, string>();
private videoPoster: Map<Quality, string> = new Map<Quality, string>();
private mediaElementPlayer: any;
constructor(public params: NavParams,
private domSanitizer: DomSanitizer,
private statusBar: StatusBar,
private screenOrientation: ScreenOrientation) {
this.videoURLs = params.get("videoURL");
this.videoPoster = params.get("posterURL");
}
//== Angular Callback =====================================
ionViewDidLoad(){
this.statusBar.hide();
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
this.mediaElementPlayer = new MediaElementPlayer("hisWordPlayer", {
renderers: ['native_hls', 'html5'],
showPosterWhenEnded: true,
videoWidth: "100%",
videoHeight: "100%",
alwaysShowControls: false,
AndroidUseNativeControls: false,
startingSource: this.videoURLs.get(VideoQuality.HLS),
displayType: false, //Should we display the type ( like this ) in the source chooser
disableHoverEvents: true,
hls:{
debug: false,
autoStartLoad: true
},
features: ["playpause", "progress", "current", "fullscreen", "sourcechooser"],
success: function(media, node){
//Autoplay
media.play();
}
});
this.mediaElementPlayer.container.addEventListener("enteredfullscreen", function(){
//this.screenOrientation.lock('landscape');
console.log("enter fullscreen");
});
this.mediaElementPlayer.container.addEventListener("exitedfullscreen", function(){
//this.screenOrientation.unlock();
console.log("exit fullscreen")
});
this.screenOrientation.onChange = this.screenOrientationChanged;
}
public screenOrientationChanged() : Observable<void>{
console.log(this.screenOrientation.type);
return new Observable<void>();
}
//== Ionic Callback =====================================
ionViewWillLeave(){
this.mediaElementPlayer.pause();
this.mediaElementPlayer.remove();
}
ionViewWillUnload(){
console.log("unloading");
this.statusBar.show();
}
public videoURL(videoQuality: VideoQuality){
return this.domSanitizer.bypassSecurityTrustUrl(this.videoURLs.get(videoQuality));
}
public posterURL(quality: Quality){
return this.domSanitizer.bypassSecurityTrustUrl(this.videoPoster.get(quality));
}
}