在Ionic App中播放横向全屏幕视频

我必须问题才能播放视频横向全屏模式。请帮助我以横向全屏显示视频。在Ionic App中播放横向全屏幕视频

我使用下面的代码来查看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设备

我想输出默认如下：

来源

2015-08-27 Santosh Shinde

有你安装任何插件，播放视频文件中的离子framework..other比媒体插件 –

没有我不使用这里的任何插件，我使用HTML5视频标签 –

我试着用你的代码中起视频文件离子框架..视频本身不玩这就是为什么我问你是否使用任何插件....你可以请把你的代码在github –

大厦Anas Omar's答案改变方向，这里是plugin he mentions在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"); 
    } 

});

来源

2017-01-29 13:46:45

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

你可以使用这个插件，以迫使用户设备时打开视频

来源

2015-09-02 07:51:24

-2

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

来源

2016-01-07 03:21:08 C0D3RM4ST3R

在Ionic App中播放横向全屏幕视频

回答

相关问题