CODEWITHSUNDEEP
javascripthtmlcordovaionic-framework
Santosh Shinde
Santosh Shinde

Reputation: 6063

Play Video in landscape Full Screen in Ionic App

I have to problem to Play video landscape full screen mode.Please help me to show video in landscape full screen.

I have use the following code to view template in Ionic.

<ion-view view-title="Poem" hide-nav-bar="true">
    <div class="modal transparent fullscreen-player">
          <video id="myvideo" ng-src="{{clipSrc}}" class="centerme" controls="controls" autoplay poster="{{bg}}"></video>
    </div>
</ion-view>

Controller code as Follows :

.controller('PoemDetailCtrl', function($scope) {
      $scope.clipSrc = '/android_asset/www/video/demo.mp4'
      $scope.bg = 'img/poems/01.png';
      var video = document.getElementById("myvideo");
      if (video.requestFullscreen) {
        video.requestFullscreen();
      } else if (video.msRequestFullscreen) {
        video.msRequestFullscreen();
      } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen();
      } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
      }
})

I got the following output in android device

enter image description here

And I want to output as follows by default :

enter image description here

Upvotes: 3

Views: 12597

Answers (4)

Shoniisra
Shoniisra

Reputation: 781

If you are working with ionic you can use screen rotation -> https://ionicframework.com/docs/native/screen-orientation

  1. install plugin

    ionic cordova plugin add cordova-plugin-screen-orientation npm install @ionic-native/screen-orientation

  2. add plugin as provider in app.module.ts

    import { VideoPlayer } from '@ionic-native/video-player/ngx'; import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx'; ... providers: [ StatusBar, SplashScreen, VideoPlayer,ScreenOrientation, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ],

  3. import dependency on your page.ts

    import { VideoPlayer } from '@ionic-native/video-player/ngx'; import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx'; ... constructor(private videoPlayer: VideoPlayer,private screenOrientation: ScreenOrientation) { } ... onClick(){ // this.videoPlayer.play("src/assets/vid1.mp4"); // /home/shoniisra/Documentos/turismoApp/src/assets/vid1.mp4 this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE); this.videoPlayer.play('file:///android_asset/www/assets/vid1.mp4').then(() => { this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT); }).catch(err => { this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT); }); }

Upvotes: 0

Adam Diament
Adam Diament

Reputation: 4840

Building on Anas Omar's answer, here is an implementation in JavaScript of the plugin he mentions, switching orientation lock on and off when a user interaction on an HTML element triggers a change in the fullscreen status of the document.

The variable "element" should be a reference to a DOM or jQuery or angular element in JS, which in my case is a video tag, but it could be any element that triggers a fullscreen change.

element.on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;

    if (isFullScreen) {
        window.screen.unlockOrientation();
        //alert("registered entered fullscreen and unlocked the orientation");

    } else {
         window.screen.lockOrientation('portrait')
        //alert("registered exit fullscreen and locked the orientation to portrait again");
    }

});

Upvotes: 2

C0D3RM4ST3R
C0D3RM4ST3R

Reputation: 1

/** with CSS *//
height:100%;
margin-left: -50%

Upvotes: -2

Anas Omar
Anas Omar

Reputation: 504

https://github.com/gbenvenuti/cordova-plugin-screen-orientation

you can use this plugin in order to force the user device to change orientation when open the video

Upvotes: 5

Related Questions