在 Ionic App 中以横向全屏播放视频答案

【问题标题】：Play Video in landscape Full Screen in Ionic App在 Ionic App 中以横向全屏播放视频
【发布时间】：2015-11-21 17:16:24
【问题描述】：

我在播放视频横向全屏模式时遇到问题。请帮我以横向全屏模式显示视频。

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

我在 android 设备中得到以下输出

我想默认输出如下：

【问题讨论】：

你是否安装了任何插件来在ionic框架中播放视频文件..除了媒体插件
不，我在这里没有使用任何插件，我使用 html5 视频标签
我尝试使用您的代码在 Ionic 框架中播放视频文件。视频本身没有播放，这就是我问您是否使用任何插件的原因....请您将您的代码放在 github
请在此处查看github.com/santoshshinde2012/FullscreenVideo

标签： javascript html cordova ionic-framework ionic

【解决方案1】：

如果您使用 ionic，您可以使用屏幕旋转 -> https://ionicframework.com/docs/native/screen-orientation

安装插件

ionic cordova 插件添加 cordova-plugin-screen-orientation npm install @ionic-native/screen-orientation
在 app.module.ts 中添加插件作为提供者

从 '@ionic-native/video-player/ngx' 导入 { VideoPlayer }；从'@ionic-native/screen-orientation/ngx'导入{ ScreenOrientation }； ... 提供者：[ 状态栏，闪屏，视频播放器，屏幕方向， { 提供：RouteReuseStrategy，useClass：IonicRouteStrategy } ],
在您的 page.ts 上导入依赖项

从 '@ionic-native/video-player/ngx' 导入 { VideoPlayer }；从'@ionic-native/screen-orientation/ngx'导入{ ScreenOrientation }； ... 构造函数（私有videoPlayer：VideoPlayer，私有screenOrientation：ScreenOrientation）{} ... 点击（）{ // 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(错误 => { this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT); }); }

【讨论】：

【解决方案2】：

基于Anas Omar's 答案，这里是plugin he mentions 的JavaScript 实现，当HTML 元素上的用户交互触发文档的全屏状态更改时，打开和关闭方向锁定。

变量“元素”应该是对 DOM 或 jQuery 或 JS 中的角度元素的引用，在我的例子中是视频标签，但它可以是触发全屏更改的任何元素。

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

});

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

你可以使用这个插件来强制用户设备在打开视频时改变方向

【讨论】：