[SWIFT] Picture-in-picture à partir d'iOS14

1.Tout d'abord

Picture-in-picture, déjà introduit sur iPad, est désormais compatible avec iOS. Je décrirai désormais le déroulement de l'introduction à l'application.

2. À propos de l'image dans l'image

En introduisant l'image dans l'image, la lecture vidéo sera possible sur d'autres applications.

De plus, l'application prend en charge l'image dans l'image, Si la lecture automatique est activée, elle démarre lorsque vous appuyez sur le bouton d'accueil.

2-1. À propos de la lecture automatique de l'image dans l'image

Si votre application prend en charge l'image dans l'image Il existe un paramètre de comportement dans l'application des paramètres lorsque vous appuyez sur le bouton d'accueil pendant que vous regardez.

2-1-1. Éléments ajoutés à l'application des paramètres

Je ne pense pas que l'utilisateur moyen d'iPhone en soit conscient. Il est ajouté à l'endroit où vous plongez à environ 2 niveaux de l'application de réglage.

article iOS14 iPadOS13
hiérarchie Paramètres → Général → Image dans l'image Paramètres → Écran d'accueil et Dock → Multitâche
nom de l'article Lire automatiquement une image dans l'image Image dans l'image
Texte explicatif Lorsque cette option est activée, la vidéo continuera à être lue dans la superposition même lorsque vous appuyez sur le bouton d'accueil. le même

2-1-2. Présentation du comportement des applications prises en charge

Ensuite, j'ai étudié comment le comportement change selon que le paramètre de lecture automatique d'image dans l'image est activé / désactivé. J'ai également vérifié s'il y avait un autre fil qui démarrerait l'image dans l'image.

Comportement de l'application TV (Apple authentique) </ b> https://apps.apple.com/jp/app/apple-tv/id1174078549

opération Lecture automatique ON Lecture automatique désactivée
Appuyez sur le bouton d'accueil Passez à l'écran d'accueil et démarrez l'incrustation d'image Transition vers l'écran d'accueil, la lecture s'arrête et le son s'arrête * 1
Appuyez sur le bouton d'image dans l'image Passez à l'écran d'accueil et démarrez l'incrustation d'image Passez à l'écran d'accueil et démarrez l'incrustation d'image
Glissez vers le bas sur l'écran de lecture Visualisation des arrêts Visualisation des arrêts
  • 1 ・ ・ ・ La voix peut être reprise à partir du centre de contrôle </ b>.

Comportement Twitch </ b>

opération Lecture automatique ON Lecture automatique désactivée
Appuyez sur le bouton d'accueil Passez à l'écran d'accueil et démarrez l'incrustation d'image Transition vers l'écran d'accueil, la lecture s'arrête et le son s'arrête * 1
Appuyez sur le bouton d'image dans l'image Passez à l'écran d'accueil et démarrez l'incrustation d'image Passez à l'écran d'accueil et démarrez l'incrustation d'image
Glissez vers le bas sur l'écran de lecture Le mini-lecteur propriétaire démarre Le mini-lecteur propriétaire démarre
  • 1 ・ ・ ・ La voix peut être reprise à partir du centre de contrôle </ b>.

2-1-3. Résumé des comportements

Pour amener l'utilisateur à démarrer une image dans l'image Utilisez le bouton d'accueil et préparez un bouton d'image dans l'image.

Le comportement lorsque le bouton d'accueil est enfoncé suit les paramètres du système d'exploitation </ b>. Lorsque vous appuyez sur la touche d'image dans l'image, lance l'image dans l'image </ b> comme d'habitude.

3. En fait, présenter

3-1. Prérequis

Il existe AVPlayerView, AVPlayerViewController et AVPlayerLayer pour implémenter le lecteur. Cependant, cette fois, nous décrirons l'implémentation en utilisant AVPlayerLayer.

3-2. Éléments correspondants pour introduction

3-2-1. Vérifiez si l’image dans l’image est prise en charge

Vérifiez-le car il peut ne pas être pris en charge par un système d'exploitation tel que iOS12.

3-2-2. Commencez à préparer la lecture de l'image dans l'image

Informez le système d'exploitation que l'image dans l'image sera lue et préparée.

3-2-3. Attendez que l'image dans l'image devienne lisible

Attendez que le système d'exploitation soit prêt pour la lecture image dans l'image.

3-2-4. Démarrez la lecture d'image dans l'image

La commande de démarrage est exécutée uniquement lors du démarrage avec le bouton image dans l'image.

3-3. Voir un exemple d'application

https://developer.apple.com/documentation/avkit/adopting_picture_in_picture_in_a_custom_player

SamplePlayer.swift


func setupPictureInPicture() {
    // Ensure PiP is supported by current device.
    if AVPictureInPictureController.isPictureInPictureSupported() {
        // Create a new controller, passing the reference to the AVPlayerLayer.
        pictureInPictureController = AVPictureInPictureController(playerLayer: playerLayer)
        pictureInPictureController.delegate = self
        
        pipPossibleObservation = pictureInPictureController.observe(\AVPictureInPictureController.isPictureInPicturePossible,
                                                                    options: [.initial, .new]) { [weak self] _, change in
            // Update the PiP button's enabled state.
            self?.pictureInPictureButton.isEnabled = change.newValue ?? false
        }
    } else {
        // PiP isn't supported by the current device. Disable the PiP button.
        pictureInPictureButton.isEnabled = false
    }
}

@IBAction func togglePictureInPictureMode(_ sender: UIButton) {
    if pictureInPictureController.isPictureInPictureActive {
        pictureInPictureController.stopPictureInPicture()
    } else {
        pictureInPictureController.startPictureInPicture()
    }
}

AVPictureInPictureController.isPictureInPictureSupported() Correspond à 3-2-1. Ici, il est déterminé si le périphérique cible prend en charge l'image dans l'image.

AVPictureInPictureController(playerLayer: playerLayer) Correspond à 3-2-2. Je crée un AVPictureInPictureController. En créant cet AVPictureInPictureController, il sera automatiquement enfoncé lorsque le bouton d'accueil est enfoncé. La lecture image dans l'image commencera.

AVPictureInPictureController.isPictureInPicturePossible Correspond à 3-2-3. Il y a un délai de plusieurs secondes </ b> entre la génération de AVPictureInPictureController et son activation. Puisqu'il change dynamiquement, il semble que l'exemple d'application utilise observer. Si vous utilisez Rx, je pense qu'il est possible de surveiller les paramètres avec Rx.

pictureInPictureController.startPictureInPicture() Correspond à 3-2-4. Demande un démarrage lorsque le bouton d'image dans l'image est enfoncé après qu'il est prêt. Il n'est pas nécessaire lorsque vous appuyez sur le bouton d'accueil pour démarrer la lecture automatique.

3-4. Notes détaillées, etc.

Créer AVPictureInPictureController

Comme décrit dans la section précédente, il y a un délai entre la génération de AVPictureInPictureController et son activation. Par conséquent, si le processus est lancé après avoir appuyé sur le bouton, la réponse sera médiocre.

isPictureInPicturePossible devient vrai mais peut ne pas démarrer

En cours d’enquête </ b> Lorsque AVPictureInPictureController est généré, il devient vrai pendant un moment, mais revient immédiatement à faux. C'est peut-être un phénomène qui ne se produit que dans mon environnement, mais je vais le décrire au cas où.


Ce qui précède est un aperçu de l'image dans l'image. Il peut être introduit dans plus d'une douzaine de lignes, alors pourquoi ne pas l'envisager?

Recommended Posts