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

And I want to output as follows by default :

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

});

回答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

回答3:

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