Javascript 在Ionic应用程序中以横向全屏播放视频

我必须以全屏模式播放视频。请帮助我以全屏模式播放视频

我已经使用下面的代码在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>

我在android设备中获得了以下输出

默认情况下，我希望输出如下所示：

您可以使用此插件来强制用户设备在打开视频时更改方向

基于答案，下面是一个JavaScript实现，当用户在HTML元素上的交互触发文档全屏状态的更改时，打开和关闭方向锁

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

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

});

---

如果您正在使用ionic，则可以使用屏幕旋转->

安装插件

爱奥尼亚cordova插件添加cordova插件屏幕方向 npm安装@离子本机/屏幕方向

在app.module.ts中添加插件作为提供程序

从'@ionic native/video player/ngx'导入{VideoPlayer}； 从'@ionic native/screen orientation/ngx'导入{ScreenOrientation}； ... 供应商：[ 状态栏， SplashScreen、视频播放器、屏幕定位、， {提供：RouterUseStrategy，useClass:IonicRouteStrategy} ],

导入页面上的依赖项。ts

从'@ionic native/video player/ngx'导入{VideoPlayer}； 从'@ionic native/screen orientation/ngx'导入{ScreenOrientation}； ... 构造函数（私有视频播放器：视频播放器，私有屏幕方向：屏幕方向）{} ... onClick（）{ //这个.videoPlayer.play（“src/assets/vid1.mp4”）； ///home/shoniisra/Documentos/turismoApp/src/assets/vid1.mp4 this.screenOrientation.lock（this.screenOrientation.ORIENTATIONS.LANDSCAPE）； 这个。视频播放器。播放file:///android_asset/www/assets/vid1.mp4）。然后（（）=>{ this.screenOrientation.lock（this.screenOrientation.ORIENTATIONS.肖像）； }).catch（错误=>{ this.screenOrientation.lock（this.screenOrientation.ORIENTATIONS.肖像）； }); }

---

你是否安装了在ionic framework中播放视频文件的插件除了媒体插件我没有使用任何插件我使用html5视频标签我尝试用你的代码在ionic framework中播放视频文件。。视频本身没有播放，这就是为什么我问你是否使用任何插件…你能把你的代码放在Github中吗请检查这里

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

});