在Ionic App中播放橫向全屏幕視頻

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

我得到了下面的輸出，在Android設備

我想輸出默認如下：

Answer 1

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

}); 

Answer 2

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

你可以使用這個插件，以迫使用戶設備時打開視頻

Answer 3

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