[video_player] #60048 ios picture in picture

packages/video_player/video_player/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.7.0
+
+* Adds support for picture-in-picture on iOS.
+
 ## 2.6.1
 
 * Synchronizes `VideoPlayerValue.isPlaying` with underlying video player.

packages/video_player/video_player/README.md

@@ -135,4 +135,29 @@ and so on.
 
 To learn about playback speed limitations, see the [`setPlaybackSpeed` method documentation](https://pub.dev/documentation/video_player/latest/video_player/VideoPlayerController/setPlaybackSpeed.html).
 
+### Picture-in-Picture
+
+#### iOS
+On iOS the picture-in-picture is linked to the AVPlayerController.
+If you want to enable picture-in-picture make sure to enable the `audio` capability (in Xcode's UI it will say **Audio, AirPlay, and Picture in Picture**).
+Not setting this capability but calling `setPictureInPictureOverlayRectMessage` and `setPictureInPicture` will not start the picture-in-picture.
+
+```xml
+    <key>UIBackgroundModes</key>
+    <array>
+        <string>audio</string>
+    </array>
+```
+
+Example:
+![The example app running in iOS with picture-in-picture enabled](https://github.com/flutter/plugins/blob/main/packages/video_player/video_player/doc/demo_pip_iphone.gif?raw=true)
+
+#### Android
+
+On Android there is no link to the video player. Your complete app will be minimized ([picture-in-picture Android documentation](https://developer.android.com/guide/topics/ui/picture-in-picture))
+
+You have multiple options on Android:
+- [simple_pip_mode](https://pub.dev/packages/simple_pip_mode)
+- Create your own plugin that follows the android documentation
+
 Furthermore, see the example app for an example playback speed implementation.

packages/video_player/video_player/example/ios/Runner/Info.plist

@@ -27,6 +27,10 @@
 		<key>NSAllowsArbitraryLoads</key>
 		<true/>
 	</dict>
+	<key>UIBackgroundModes</key>
+	<array>
+		<string>audio</string>
+	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>

packages/video_player/video_player/example/lib/main.dart

@@ -207,6 +207,11 @@ class _BumbleBeeRemoteVideo extends StatefulWidget {
 class _BumbleBeeRemoteVideoState extends State<_BumbleBeeRemoteVideo> {
   late VideoPlayerController _controller;
 
+  final GlobalKey<State<StatefulWidget>> _playerKey =
+      GlobalKey<State<StatefulWidget>>();
+  final Key _pictureInPictureKey = UniqueKey();
+  bool _enableStartPictureInPictureAutomaticallyFromInline = false;
+
   Future<ClosedCaptionFile> _loadCaptions() async {
     final String fileContents = await DefaultAssetBundle.of(context)
         .loadString('assets/bumble_bee_captions.vtt');
@@ -243,17 +248,95 @@ class _BumbleBeeRemoteVideoState extends State<_BumbleBeeRemoteVideo> {
         children: <Widget>[
           Container(padding: const EdgeInsets.only(top: 20.0)),
           const Text('With remote mp4'),
+          FutureBuilder<bool>(
+            key: _pictureInPictureKey,
+            future: _controller.isPictureInPictureSupported(),
+            builder: (BuildContext context, AsyncSnapshot<bool> snapshot) =>
+                Text(snapshot.data ?? false
+                    ? 'Picture-in-picture is supported'
+                    : 'Picture-in-picture is not supported'),
+          ),
+          Row(
+            children: <Widget>[
+              const SizedBox(width: 16),
+              const Expanded(
+                child: Text(
+                    'Start picture-in-picture automatically when going to background'),
+              ),
+              Switch(
+                value: _enableStartPictureInPictureAutomaticallyFromInline,
+                onChanged: (bool newValue) {
+                  setState(() {
+                    _enableStartPictureInPictureAutomaticallyFromInline =
+                        newValue;
+                  });
+                  _controller.setAutomaticallyStartsPictureInPicture(
+                      enableStartPictureInPictureAutomaticallyFromInline:
+                          _enableStartPictureInPictureAutomaticallyFromInline);
+                },
+              ),
+              const SizedBox(width: 16),
+            ],
+          ),
+          MaterialButton(
+            color: Colors.blue,
+            onPressed: () {
+              final RenderBox? box =
+                  _playerKey.currentContext?.findRenderObject() as RenderBox?;
+              if (box == null) {
+                return;
+              }
+              final Offset offset = box.localToGlobal(Offset.zero);
+              _controller.setPictureInPictureOverlayRect(
+                rect: Rect.fromLTWH(
+                  offset.dx,
+                  offset.dy,
+                  box.size.width,
+                  box.size.height,
+                ),
+              );
+            },
+            child: const Text('Set picture-in-picture overlay rect'),
+          ),
+          MaterialButton(
+            color: Colors.blue,
+            onPressed: () {
+              if (_controller.value.isPictureInPictureActive) {
+                _controller.stopPictureInPicture();
+              } else {
+                _controller.startPictureInPicture();
+              }
+            },
+            child: Text(_controller.value.isPictureInPictureActive
+                ? 'Stop picture-in-picture'
+                : 'Start picture-in-picture'),
+          ),
           Container(
             padding: const EdgeInsets.all(20),
             child: AspectRatio(
               aspectRatio: _controller.value.aspectRatio,
               child: Stack(
+                key: _playerKey,
                 alignment: Alignment.bottomCenter,
                 children: <Widget>[
                   VideoPlayer(_controller),
                   ClosedCaption(text: _controller.value.caption.text),
-                  _ControlsOverlay(controller: _controller),
-                  VideoProgressIndicator(_controller, allowScrubbing: true),
+                  if (_controller.value.isPictureInPictureActive) ...<Widget>[
+                    Container(color: Colors.white),
+                    // TODO(goderbauer): Make this const when this package requires Flutter 3.8 or later.
+                    // ignore: prefer_const_constructors
+                    Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: const <Widget>[
+                        Icon(Icons.picture_in_picture),
+                        SizedBox(height: 8),
+                        Text('This video is playing in picture-in-picture.'),
+                      ],
+                    ),
+                  ] else ...<Widget>[
+                    VideoProgressIndicator(_controller, allowScrubbing: true),
+                    _ControlsOverlay(controller: _controller),
+                  ],
                 ],
               ),
             ),

packages/video_player/video_player/example/pubspec.yaml

@@ -37,3 +37,11 @@ flutter:
     - assets/bumble_bee_captions.srt
     - assets/bumble_bee_captions.vtt
     - assets/Audio.mp3
+
+
+# FOR TESTING ONLY. DO NOT MERGE.
+dependency_overrides:
+  video_player:
+    path: ../../../video_player/video_player
+  video_player_platform_interface:
+    path: ../../../video_player/video_player_platform_interface

packages/video_player/video_player/lib/video_player.dart

@@ -48,6 +48,7 @@ class VideoPlayerValue {
     this.isPlaying = false,
     this.isLooping = false,
     this.isBuffering = false,
+    this.isPictureInPictureActive = false,
     this.volume = 1.0,
     this.playbackSpeed = 1.0,
     this.rotationCorrection = 0,
@@ -106,6 +107,9 @@ class VideoPlayerValue {
   /// The current speed of the playback.
   final double playbackSpeed;
 
+  /// True if picture-in-picture is currently active.
+  final bool isPictureInPictureActive;
+
   /// A description of the error if present.
   ///
   /// If [hasError] is false this is `null`.
@@ -154,6 +158,7 @@ class VideoPlayerValue {
     bool? isPlaying,
     bool? isLooping,
     bool? isBuffering,
+    bool? isPictureInPictureActive,
     double? volume,
     double? playbackSpeed,
     int? rotationCorrection,
@@ -170,6 +175,8 @@ class VideoPlayerValue {
       isPlaying: isPlaying ?? this.isPlaying,
       isLooping: isLooping ?? this.isLooping,
       isBuffering: isBuffering ?? this.isBuffering,
+      isPictureInPictureActive:
+          isPictureInPictureActive ?? this.isPictureInPictureActive,
       volume: volume ?? this.volume,
       playbackSpeed: playbackSpeed ?? this.playbackSpeed,
       rotationCorrection: rotationCorrection ?? this.rotationCorrection,
@@ -192,6 +199,7 @@ class VideoPlayerValue {
         'isPlaying: $isPlaying, '
         'isLooping: $isLooping, '
         'isBuffering: $isBuffering, '
+        'isPictureInPictureActive: $isPictureInPictureActive, '
         'volume: $volume, '
         'playbackSpeed: $playbackSpeed, '
         'errorDescription: $errorDescription)';
@@ -441,6 +449,12 @@ class VideoPlayerController extends ValueNotifier<VideoPlayerValue> {
         case VideoEventType.bufferingEnd:
           value = value.copyWith(isBuffering: false);
           break;
+        case VideoEventType.startedPictureInPicture:
+          value = value.copyWith(isPictureInPictureActive: true);
+          break;
+        case VideoEventType.stoppedPictureInPicture:
+          value = value.copyWith(isPictureInPictureActive: false);
+          break;
         case VideoEventType.isPlayingStateUpdate:
           value = value.copyWith(isPlaying: event.isPlaying);
           break;
@@ -563,6 +577,55 @@ class VideoPlayerController extends ValueNotifier<VideoPlayerValue> {
     await _videoPlayerPlatform.setVolume(_textureId, value.volume);
   }
 
+  /// Returns true if picture-in-picture is supported on the device.
+  Future<bool> isPictureInPictureSupported() =>
+      _videoPlayerPlatform.isPictureInPictureSupported();
+
+  /// Enable/disable to start picture-in-picture automatically when the app goes to the background.
+  Future<void> setAutomaticallyStartsPictureInPicture({
+    required bool enableStartPictureInPictureAutomaticallyFromInline,
+  }) async {
+    if (!value.isInitialized || _isDisposed) {
+      return;
+    }
+    await _videoPlayerPlatform.setAutomaticallyStartsPictureInPicture(
+      textureId: _textureId,
+      enableStartPictureInPictureAutomaticallyFromInline:
+          enableStartPictureInPictureAutomaticallyFromInline,
+    );
+  }
+
+  /// Set the location of the video player view. So picture-in-picture can use it for animating.
+  /// The rect will represent the location of the video player view in Flutter. The rect will be
+  /// passed to the platform to position the native picture-in-picture overlay correctly.
+  Future<void> setPictureInPictureOverlayRect({
+    required Rect rect,
+  }) async {
+    if (!value.isInitialized || _isDisposed) {
+      return;
+    }
+    await _videoPlayerPlatform.setPictureInPictureOverlayRect(
+      textureId: _textureId,
+      rect: rect,
+    );
+  }
+
+  /// Start picture-in-picture mode.
+  Future<void> startPictureInPicture() async {
+    if (!value.isInitialized || _isDisposed) {
+      return;
+    }
+    await _videoPlayerPlatform.startPictureInPicture(_textureId);
+  }
+
+  /// Stop picture-in-picture mode.
+  Future<void> stopPictureInPicture() async {
+    if (!value.isInitialized || _isDisposed) {
+      return;
+    }
+    await _videoPlayerPlatform.stopPictureInPicture(_textureId);
+  }
+
   Future<void> _applyPlaybackSpeed() async {
     if (_isDisposedOrNotInitialized) {
       return;

packages/video_player/video_player/pubspec.yaml

@@ -3,7 +3,7 @@ description: Flutter plugin for displaying inline video with other Flutter
   widgets on Android, iOS, and web.
 repository: https://github.com/flutter/packages/tree/main/packages/video_player/video_player
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+video_player%22
-version: 2.6.1
+version: 2.7.0
 
 environment:
   sdk: ">=2.17.0 <4.0.0"
@@ -31,3 +31,15 @@ dependencies:
 dev_dependencies:
   flutter_test:
     sdk: flutter
+
+
+# FOR TESTING ONLY. DO NOT MERGE.
+dependency_overrides:
+  video_player_android:
+    path: ../../video_player/video_player_android
+  video_player_avfoundation:
+    path: ../../video_player/video_player_avfoundation
+  video_player_platform_interface:
+    path: ../../video_player/video_player_platform_interface
+  video_player_web:
+    path: ../../video_player/video_player_web

packages/video_player/video_player/test/video_player_test.dart

@@ -80,6 +80,25 @@ class FakeController extends ValueNotifier<VideoPlayerValue>
   Future<void> setClosedCaptionFile(
     Future<ClosedCaptionFile>? closedCaptionFile,
   ) async {}
+
+  @override
+  Future<bool> isPictureInPictureSupported() async => true;
+
+  @override
+  Future<void> setAutomaticallyStartsPictureInPicture({
+    required bool enableStartPictureInPictureAutomaticallyFromInline,
+  }) async {}
+
+  @override
+  Future<void> setPictureInPictureOverlayRect({
+    required Rect rect,
+  }) async {}
+
+  @override
+  Future<void> startPictureInPicture() async {}
+
+  @override
+  Future<void> stopPictureInPicture() async {}
 }
 
 Future<ClosedCaptionFile> _loadClosedCaption() async =>
@@ -974,6 +993,7 @@ void main() {
           'isPlaying: true, '
           'isLooping: true, '
           'isBuffering: true, '
+          'isPictureInPictureActive: false, '
           'volume: 0.5, '
           'playbackSpeed: 1.5, '
           'errorDescription: null)');

packages/video_player/video_player_android/example/lib/mini_controller.dart

@@ -276,6 +276,8 @@ class MiniController extends ValueNotifier<VideoPlayerValue> {
         case VideoEventType.isPlayingStateUpdate:
           value = value.copyWith(isPlaying: event.isPlaying);
           break;
+        case VideoEventType.startedPictureInPicture:
+        case VideoEventType.stoppedPictureInPicture:
         case VideoEventType.unknown:
           break;
       }

packages/video_player/video_player_android/example/pubspec.yaml

@@ -33,3 +33,11 @@ flutter:
   assets:
     - assets/flutter-mark-square-64.png
     - assets/Butterfly-209.mp4
+
+
+# FOR TESTING ONLY. DO NOT MERGE.
+dependency_overrides:
+  video_player_android:
+    path: ../../../video_player/video_player_android
+  video_player_platform_interface:
+    path: ../../../video_player/video_player_platform_interface

packages/video_player/video_player_android/pubspec.yaml

@@ -26,3 +26,9 @@ dev_dependencies:
   flutter_test:
     sdk: flutter
   pigeon: ^2.0.1
+
+
+# FOR TESTING ONLY. DO NOT MERGE.
+dependency_overrides:
+  video_player_platform_interface:
+    path: ../../video_player/video_player_platform_interface

packages/video_player/video_player_avfoundation/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.5.0
+
+* Adds support for picture-in-picture on iOS.
+
 ## 2.4.4
 
 * Updates pigeon to fix warnings with clang 15.

packages/video_player/video_player_avfoundation/example/ios/Runner/Info.plist

@@ -27,6 +27,10 @@
 		<key>NSAllowsArbitraryLoads</key>
 		<true/>
 	</dict>
+	<key>UIBackgroundModes</key>
+	<array>
+		<string>audio</string>
+	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>