在Ionic应用中以全屏横屏模式播放视频

Question

我有一个问题，就是无法在横向全屏模式下播放视频。请帮助我在横向全屏中显示视频。

我使用以下代码在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('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();
      }
})

我在安卓设备上看到了以下输出：

我想要默认的输出如下所示：

- Santosh Shinde

---

你在Ionic框架中安装了除了媒体插件之外的任何插件来播放视频文件吗？ - Anil kumar

不，我没有使用任何插件，我使用的是HTML5视频标签。 - Santosh Shinde

我尝试使用你的代码在Ionic框架中播放视频文件。但是视频本身没有播放，所以我想问一下你是否使用了任何插件... 你能否把你的代码放到Github上？ - Anil kumar

请查看此处 https://github.com/santoshshinde2012/FullscreenVideo。 - Santosh Shinde

Answer 1

你可以使用这个插件来强制更改用户设备的屏幕方向，以便在打开视频时进行观看。

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

- Anas Omar

Answer 2

建立在 Anas Omar 的回答 基础之上，这里提供了一个 JavaScript 实现的插件，当 HTML 元素触发全屏状态变化时，切换方向锁定开关。

变量 "element" 应该是 JS 中 DOM、jQuery 或 Angular 元素的引用，在我的情况下是视频标签，但它可以是任何触发全屏变化的元素。

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

});

- Adam Diament

Answer 3

如果你在使用Ionic框架，可以使用屏幕旋转 -> https://ionicframework.com/docs/native/screen-orientation

安装插件 ionic cordova plugin add cordova-plugin-screen-orientation npm install @ionic-native/screen-orientation

在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 } ],

在您的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); }); }

- Shoniisra

Answer 4

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

- C0D3RM4ST3R