Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 229600

Ionic native Screen Orientation plugin not working

$
0
0

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

}

Viewing all articles
Browse latest Browse all 229600

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>