视频无法在 Android 上全屏播放答案

【问题标题】：Video won't play in full screen on Android视频无法在 Android 上全屏播放
【发布时间】：2018-01-27 17:54:32
【问题描述】：

我有一个允许内联播放的视频。工作正常：

<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，但没有任何成功。

不幸的是它的 Ionic 1...

【问题讨论】：

标签： android ionic-framework html5-video

【解决方案1】：

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

另外一点，Android Chrome 是 webkit 浏览器，所以你需要video.webkitEnterFullScreen(); 来支持 Android Chrome。

访问https://davidwalsh.name/fullscreen 这是全屏 API 的很好参考。

【讨论】：