HTML5 video in portrait in fullscreen mode in cordova app is stretched on Android devices

4
votes

When I play a video filmed in a landscape orientation on my android device and enter fullscreen the device stays in portrait mode and stretches the video horribly.

Is there a way to force the video not to stretch in portrait mode when entering fullscreen? But to remain in landscape orientation, and have black borders top and bottom.

Normal aspect ratio

Stretched in portrait mode

      <video class="media-video" 
  video-directive item="$ctrl.item" 
  ng-src="{{$ctrl.item.videoUrl | trustUrl}}" 
  preload="auto" 
  controls
    poster="{{$ctrl.item.video.thumbnail_url}}">
    Your browser does not support the video tag.
  </video>
1
javascriptandroidhtmlcordovahtml5-video
Will the be any help ? hacks.mozilla.org/2011/01/… – Sreehari
github.com/apache/cordova-plugin-screen-orientation Cordova has a core plugin that allows you to set the orientation of the screen. Could this be of help? – Matt Brewerton
Thanks @MattBrewerton - but no. I'm already using that plugin. I don't want to set the orientation, I want it to stay in portrait but keep the ratio of the video. – Adam Diament

1 Answers

2
votes

I have a similar project which play video in a cordova app in android and my video doesn't stretch in portrait fullscreen :

enter image description here

I don't use any codova plugin. It's the natural behavior. Maybe you force this behavior with some CSS like a property height: 100%. Or something like.

This is the link of my video player directive : https://github.com/Dammmien/Planete-cine/blob/master/src/js/directives/videoPlayer.js