[video_player] Fix aspect ratio (#690)

* * Added access to the video rotation in degrees (rotationDegrees). Possible values are: 0, 90, 180 and 270.
* Updated the aspectRatio getter to use the video rotation.
* Fixed the aspect ratio of videos in the video_player plugin example. It now properly displays 'rotated' videos.
* Ensure videos are not upside down nor streteched when using the video_player plugin on iOS devices. The fix sets the videoComposition of the respective AVPlayerItem to use the preferredTransform of the video (the rotation matrix for the video)

* - Bump video_player version to 0.9.0
- Move play/pause logic within setState closure in video_player example

Author: recastrodiaz

packages/image_picker/example/lib/main.dart

@@ -226,10 +226,9 @@ class AspectRatioVideoState extends State<AspectRatioVideo> {
   @override
   Widget build(BuildContext context) {
     if (initialized) {
-      final Size size = controller.value.size;
       return Center(
         child: AspectRatio(
-          aspectRatio: size.width / size.height,
+          aspectRatio: controller.value?.aspectRatio,
           child: VideoPlayer(controller),
         ),
       );

packages/video_player/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.9.0
+
+* Fixed the aspect ratio and orientation of videos. Videos are now properly displayed when recorded 
+ in portrait mode both in iOS and Android.
+
 ## 0.8.0
 
 * Android: Upgrade ExoPlayer to 2.9.1

packages/video_player/README.md

@@ -55,22 +55,12 @@ class VideoApp extends StatefulWidget {
 
 class _VideoAppState extends State<VideoApp> {
   VideoPlayerController _controller;
-  bool _isPlaying = false;
 
   @override
   void initState() {
     super.initState();
     _controller = VideoPlayerController.network(
-      'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_20mb.mp4',
-    )
-      ..addListener(() {
-        final bool isPlaying = _controller.value.isPlaying;
-        if (isPlaying != _isPlaying) {
-          setState(() {
-            _isPlaying = isPlaying;
-          });
-        }
-      })
+        'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4')
       ..initialize().then((_) {
         // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
         setState(() {});
@@ -91,15 +81,25 @@ class _VideoAppState extends State<VideoApp> {
               : Container(),
         ),
         floatingActionButton: FloatingActionButton(
-          onPressed: _controller.value.isPlaying
-              ? _controller.pause
-              : _controller.play,
+          onPressed: () {
+            setState(() {
+              _controller.value.isPlaying
+                  ? _controller.pause()
+                  : _controller.play();
+            });
+          },
           child: Icon(
             _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
           ),
         ),
       ),
     );
   }
+
+  @override
+  void dispose() {
+    super.dispose();
+    _controller.dispose();
+  }
 }
 ```

packages/video_player/android/src/main/java/io/flutter/plugins/videoplayer/VideoPlayerPlugin.java

@@ -15,6 +15,7 @@
 import com.google.android.exoplayer2.C;
 import com.google.android.exoplayer2.ExoPlaybackException;
 import com.google.android.exoplayer2.ExoPlayerFactory;
+import com.google.android.exoplayer2.Format;
 import com.google.android.exoplayer2.Player;
 import com.google.android.exoplayer2.Player.DefaultEventListener;
 import com.google.android.exoplayer2.SimpleExoPlayer;
@@ -51,6 +52,8 @@
 
 public class VideoPlayerPlugin implements MethodCallHandler {
 
+  private static final String TAG = "VideoPlayerPlugin";
+
   private static class VideoPlayer {
 
     private SimpleExoPlayer exoPlayer;
@@ -220,9 +223,19 @@ private void sendInitialized() {
         Map<String, Object> event = new HashMap<>();
         event.put("event", "initialized");
         event.put("duration", exoPlayer.getDuration());
+
         if (exoPlayer.getVideoFormat() != null) {
-          event.put("width", exoPlayer.getVideoFormat().width);
-          event.put("height", exoPlayer.getVideoFormat().height);
+          Format videoFormat = exoPlayer.getVideoFormat();
+          int width = videoFormat.width;
+          int height = videoFormat.height;
+          int rotationDegrees = videoFormat.rotationDegrees;
+          // Switch the width/height if video was taken in portrait mode
+          if (rotationDegrees == 90 || rotationDegrees == 270) {
+            width = exoPlayer.getVideoFormat().height;
+            height = exoPlayer.getVideoFormat().width;
+          }
+          event.put("width", width);
+          event.put("height", height);
         }
         eventSink.success(event);
       }

packages/video_player/example/lib/main.dart

@@ -380,7 +380,7 @@ void main() {
               Column(
                 children: <Widget>[
                   NetworkPlayerLifeCycle(
-                    'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_20mb.mp4',
+                    'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4',
                     (BuildContext context, VideoPlayerController controller) =>
                         AspectRatioVideo(controller),
                   ),
@@ -395,7 +395,7 @@ void main() {
                 ],
               ),
               NetworkPlayerLifeCycle(
-                'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_20mb.mp4',
+                'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4',
                 (BuildContext context, VideoPlayerController controller) =>
                     AspectRatioVideo(controller),
               ),