在Ionic App中以横向全屏播放视频 [英] Play Video in landscape Full Screen in Ionic App

问题描述

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

I have to problem to Play video landscape full screen mode.Please help me to show video in landscape full screen.

我使用以下代码查看模板在离子。

I have use the following code to view template in 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设备上得到以下输出

I got the following output in android device

我想出去默认情况下如下：

And I want to output as follows by default :

< img src =https://i.stack.imgur.com/swNhe.pngalt =在此处输入图像说明>

推荐答案

在 Anas Omar的回答的基础上，这是一个用JavaScript实现的插件，当用户在HTML元素上进行交互时打开和关闭方向锁定触发文档全屏状态的更改。

Building on Anas Omar's answer, here is an implementation in JavaScript of the plugin he mentions, switching orientation lock on and off when a user interaction on an HTML element triggers a change in the fullscreen status of the document.

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

The variable "element" should be a reference to a DOM or jQuery or angular element in JS, which in my case is a video tag, but it could be any element that triggers a fullscreen change.

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 App中以横向全屏播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！