Play Video in landscape Full Screen in Ionic App

Question

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

And I want to output as follows by default :

Solution 1

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

Solution 2

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

Comments

[Anil kumar]

have you installed any plugin to play video file in ionic framework..other than media plugin

[Santosh Shinde]

no i am not using any plugin here I use html5 video tag

[Anil kumar]

I tried with your code to play an video file in Ionic framework.. The video itself is not playing that's why I asked are you using any plugin....can you please put your code in github

[Santosh Shinde]

please check here github.com/santoshshinde2012/FullscreenVideo