javascript - Play Video in landscape Full Screen in Ionic App - Stack Overflow

admin管理员组

文章数量:1295857

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 :

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 :

• javascript
• html
• cordova
• ionic-framework

Share Follow asked Aug 27, 2015 at 10:51 Santosh ShindeSantosh Shinde 6,05399 gold badges4646 silver badges7171 bronze badges 4

• have you installed any plugin to play video file in ionic framework..other than media plugin – Anil kumar Commented Aug 27, 2015 at 14:07
• no i am not using any plugin here I use html5 video tag – Santosh Shinde Commented Aug 28, 2015 at 3:51
• 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 – Anil kumar Commented Aug 28, 2015 at 4:26
• please check here github./santoshshinde2012/FullscreenVideo – Santosh Shinde Commented Aug 28, 2015 at 7:30

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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

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

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

});

If you are working with ionic you can use screen rotation -> https://ionicframework./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); }); }

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

本文标签： javascriptPlay Video in landscape Full Screen in Ionic AppStack Overflow