Question

我允许播放内联视频。工作正常：

<ion-item class="exercise">
  <ion-slide-box class="exercise-carousel" show-pager="true" pager-click="slideTo(index)">
    <ion-slide class="slide-image" ng-repeat="photo in photos track by $index">
      <div class="image-container" images-loaded="imgLoadedEvents">
        <img ng-src="{{photo}}" width="{{imgWidth}}" height="{{imgHeight}}" />
      </div>
    </ion-slide>
    <ion-slide ng-click="playVideo()" class="slide-video" ng-class="{ 'playing': getVideoPlaying() }">
      <div class="video-container" ng-class="{ 'fullscreen': fullscreenVideo }">
         <video ng-attr-poster="{{videoPoster}}" id="exercise-video" playsinline webkit-playsinline ng-src="{{video}}"></video>
      </div>
    </ion-slide>
  </ion-slide-box>


  <h1 class="exercise-title">{{ exercise.name }}</h1>
  <div class="exercise-text">
    ..
  </div>
</ion-item>

在转向风景时，我想让它以全屏模式播放，这在iOS上运行良好但在Android中无效。所有其他元素仍然可见，我可以在屏幕上滚动视频。

我的JS看起来像这样：

window.addEventListener("orientationchange", function() {
  if (screen.orientation == 'landscape-primary' || screen.orientation == 'landscape-secondary' || window.orientation == 90 || window.orientation == -90) {
    if ($cordovaDevice.getPlatform() == 'iOS' && video.webkitSupportsFullscreen) {
      video.webkitEnterFullScreen();
    } else if ($cordovaDevice.getPlatform() != 'iOS' && video.requestFullscreen) {
      video.requestFullscreen();
    }
  } else {
    ...
  }
});

我也尝试使用requestEnterFullscreen代替requestFullscreen而没有取得任何成功。

不幸的是它的离子1 ......

Answer 1

screen.orientation是实验性的，所以我认为代码不允许全屏显示页面。

另一点是Android Chrome是webkit浏览器，因此Android Chrome需要video.webkitEnterFullScreen();。

访问https://davidwalsh.name/fullscreen这是Fullscreen API的良好参考。

Android

1 个答案: