[video_player] #60048 ios picture in picture

packages/camera/camera/example/pubspec.yaml

@@ -3,7 +3,7 @@ description: Demonstrates how to use the camera plugin.
 publish_to: none
 
 environment:
-  sdk: ^3.4.0
+  sdk: ^3.6.0
   flutter: ">=3.22.0"
 
 dependencies:
@@ -18,6 +18,7 @@ dependencies:
     sdk: flutter
   path_provider: ^2.0.0
   video_player: ^2.7.0
+  video_player_platform_interface: ^6.2.3
 
 dev_dependencies:
   build_runner: ^2.1.10

packages/video_player/video_player/CHANGELOG.md

@@ -1,6 +1,7 @@
-## NEXT
+## 2.10.0
 
-* Updates minimum supported SDK version to Flutter 3.22/Dart 3.4.
+* Updates minimum supported SDK version to Flutter 3.22/Dart 3.6.
+* Adds support for picture-in-picture on iOS.
 
 ## 2.9.2
 
@@ -73,6 +74,7 @@
 receives an`Uri` instead of a `String` url.
 * Deprecates `VideoPlayerController.network` factory method.
 * Updates minimum supported SDK version to Flutter 3.3/Dart 2.18.
+
 ## 2.6.1
 
 * Synchronizes `VideoPlayerValue.isPlaying` with underlying video player.

packages/video_player/video_player/README.md

@@ -140,3 +140,25 @@ 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).
 
 Furthermore, see the example app for an example playback speed implementation.
+
+### Picture-in-Picture
+
+#### iOS
+To enable picture-in-picture functionality, you need to add the **Background Modes** capabilities for **Audio, AirPlay, and Picture in Picture** as described in [Configuring your app for media playback > Configure the background modes](https://developer.apple.com/documentation/AVFoundation/configuring-your-app-for-media-playback#Configure-the-background-modes). Resulting in a new string entry `audio` in the array value of the entry `UIBackgroundModes` in your `Info.plist` file, which is located in `<project root>/ios/Runner/Info.plist`:
+
+```xml
+    <key>UIBackgroundModes</key>
+    <array>
+        <string>audio</string>
+    </array>
+```
+
+> [!IMPORTANT]  
+> Failing to add the `audio` **Background Modes** capability will result in a silent failure to start picture-in-picture playback.
+
+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, picture-in-picture mode is implemented at the application level rather than the video element level, so this plugin does not implement picture-in-picture mode on Android.

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

@@ -213,6 +213,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');
@@ -250,17 +255,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.setPictureInPictureOverlaySettings(
+                settings: PictureInPictureOverlaySettings(
+                  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),
+                    const Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: <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

@@ -3,7 +3,7 @@ description: Demonstrates how to use the video_player plugin.
 publish_to: none
 
 environment:
-  sdk: ^3.4.0
+  sdk: ^3.6.0
   flutter: ">=3.22.0"
 
 dependencies:
@@ -35,3 +35,12 @@ 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_avfoundation:
+    path: ../../../video_player/video_player_avfoundation
+  video_player_platform_interface:
+    path: ../../../video_player/video_player_platform_interface

packages/video_player/video_player/lib/video_player.dart

@@ -17,6 +17,7 @@ export 'package:video_player_platform_interface/video_player_platform_interface.
     show
         DataSourceType,
         DurationRange,
+        PictureInPictureOverlaySettings,
         VideoFormat,
         VideoPlayerOptions,
         VideoPlayerWebOptions,
@@ -54,6 +55,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,
@@ -113,6 +115,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`.
@@ -167,6 +172,7 @@ class VideoPlayerValue {
     bool? isPlaying,
     bool? isLooping,
     bool? isBuffering,
+    bool? isPictureInPictureActive,
     double? volume,
     double? playbackSpeed,
     int? rotationCorrection,
@@ -184,6 +190,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,
@@ -207,6 +215,7 @@ class VideoPlayerValue {
         'isPlaying: $isPlaying, '
         'isLooping: $isLooping, '
         'isBuffering: $isBuffering, '
+        'isPictureInPictureActive: $isPictureInPictureActive, '
         'volume: $volume, '
         'playbackSpeed: $playbackSpeed, '
         'errorDescription: $errorDescription, '
@@ -226,6 +235,7 @@ class VideoPlayerValue {
           isPlaying == other.isPlaying &&
           isLooping == other.isLooping &&
           isBuffering == other.isBuffering &&
+          isPictureInPictureActive == other.isPictureInPictureActive &&
           volume == other.volume &&
           playbackSpeed == other.playbackSpeed &&
           errorDescription == other.errorDescription &&
@@ -492,6 +502,10 @@ class VideoPlayerController extends ValueNotifier<VideoPlayerValue> {
           value = value.copyWith(isBuffering: true);
         case VideoEventType.bufferingEnd:
           value = value.copyWith(isBuffering: false);
+        case VideoEventType.startedPictureInPicture:
+          value = value.copyWith(isPictureInPictureActive: true);
+        case VideoEventType.stoppedPictureInPicture:
+          value = value.copyWith(isPictureInPictureActive: false);
         case VideoEventType.isPlayingStateUpdate:
           if (event.isPlaying ?? false) {
             value =
@@ -618,6 +632,53 @@ 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();
+
+  /// Enables/disables starting 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,
+    );
+  }
+
+  /// Sets the location of the video player view in order to animate the picture-in-picture view.
+  Future<void> setPictureInPictureOverlaySettings({
+    required PictureInPictureOverlaySettings settings,
+  }) async {
+    if (!value.isInitialized || _isDisposed) {
+      return;
+    }
+    await _videoPlayerPlatform.setPictureInPictureOverlaySettings(
+      textureId: _textureId,
+      settings: settings,
+    );
+  }
+
+  /// Starts picture-in-picture mode.
+  Future<void> startPictureInPicture() async {
+    if (!value.isInitialized || _isDisposed) {
+      return;
+    }
+    await _videoPlayerPlatform.startPictureInPicture(_textureId);
+  }
+
+  /// Stops 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,10 +3,10 @@ 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.9.2
+version: 2.10.0
 
 environment:
-  sdk: ^3.4.0
+  sdk: ^3.6.0
   flutter: ">=3.22.0"
 
 flutter:
@@ -25,10 +25,10 @@ dependencies:
   flutter:
     sdk: flutter
   html: ^0.15.0
-  video_player_android: ^2.3.5
-  video_player_avfoundation: ^2.5.6
-  video_player_platform_interface: ^6.2.0
-  video_player_web: ^2.1.0
+  video_player_android: ^2.7.17
+  video_player_avfoundation: ^2.6.5
+  video_player_platform_interface: ^6.2.3
+  video_player_web: ^2.3.3
 
 dev_dependencies:
   flutter_test:
@@ -37,3 +37,12 @@ dev_dependencies:
 topics:
   - video
   - video-player
+
+# 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