CODEWITHSUNDEEP
androidionic-frameworkhtml5-video
micfra
micfra

Reputation: 2820

Video won't play in full screen on Android

I have a video allowed to play inline. Work fine:

<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>

On turning to landscape, I'd like to have it playing in fullscreen mode whichs works fine on iOS but not in Android. All other elements are still visible and I'm able to scroll the video off screen.

My JS looks like this:

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 {
    ...
  }
});

I also tried it with requestEnterFullscreen instead of requestFullscreen without any success.

Unfortunately its Ionic 1...

Upvotes: 0

Views: 915

Answers (1)

Tushar Vaghela
Tushar Vaghela

Reputation: 1243

screen.orientation is experimental so I think that code is not allowing to go page in full-screen.

Another point is Android Chrome is webkit browser so you need video.webkitEnterFullScreen(); for Android Chrome.

Visit https://davidwalsh.name/fullscreen this is good reference for Fullscreen API.

Upvotes: 1

Related Questions