Picture in Picture

La fonction Picture in Picture (PiP) (ou l'incrustation d'image) permet de regarder une deuxième chaîne sur l'écran d'une télévision. Une première chaîne est affichée en plein écran alors que la seconde est affichée dans une petite fenêtre.

La fonction Picture in Picture requiert l'utilisation de deux tuners indépendants, un pour chaque chaine. On peut aussi utiliser un lecteur DVD ou VHS, ou n'importe quel autre appareil multimédia comme source pour le PiP.

Navigateur Web

Aujourd'hui la fonction Picture in Picture (PiP) est utilisé dans les navigateurs web pour afficher une vidéo ou de la musique (Spotify par exemple) par-dessus toutes les autres fenêtres.

Pour comprendre la manière dont fonctionne la fonction Picture-in-Picture sous Google Chrome par exemple, il faut au préalable comprendre comment fonctionne le navigateur lui-même.

L'en-tête de la page web en question (le html head) ne contient rien de spécial, excepté que les images ou les vidéos se doivent d'être mises en ligne dans un fichier avec une extension supporté par le navigateur en question, qui est le cas du *.gif, *.png, *.jpg, *.svg, *.webp et pour les vidéos *.mp4, *.webm, *.ogv.

Le système de navigateur sous Google Chrome à partir de la version 54 permet d'ajouter une fonctionnalité dans la barre d'adresse : la fonction Picture-in-Picture (sous Firefox, la fonction est de base intégrée).

Au lieu d'être affiché dans le navigateur, la vidéo ou l'image est affichée dans une fenêtre flottante. Celle-ci peut être déplaçée, redimensionnée, en plus, elle permet de basculer de la lecture de la vidéo ou de la musique à l'arrêt. L'usage de la fonctionnalité consiste à utiliser les touches du clavier suivants :

• Le bouton Alt pour basculer la fonctionnalité de mise en avant et de mise en arrière-plan.
• Le bouton +< pour redimensionner la fenêtre à l'agrandissement.
• Le bouton -< pour redimensionner la fenêtre à la réduction.
• Le bouton Echap pour fermer la fenêtre de la fonctionnalité.

Fonctionnement technique

Lorsque la fonction Picture-in-Picture est activée, le navigateur lance un tuner virtuel dans la machine hôte. Il s'agit d'une fonction logicielle de la fonctionnalité.

La fonctionnalité fait référence à une fenêtre parente en CSS avec la fonctionnalité window. Elle crée ensuite un élément (de type div) avec des attributs spéciaux. Le div contient alors l'image ou la vidéo, le div ayant la fonction de définir l'aire affichée et la définition.

Une fonction JS nommée createPictureInPictureElement est utilisée pour générer la fenêtre flottante de la fonctionnalité. Lorsque la fenêtre flottante est sélectionné pour son redimensionnement, la fonction JS fitImageSizeToVideoAspectRatio est utilisé pour contrôler la taille de l'image (ou de la vidéo) et de redimensionner la fenêtre flottante en conséquence.

La fonctionnalité est activée lors de l'activation du navigateur et elle est arrêté lors de la fermeture du navigateur.

Smartphone

Android

Les smartphones munis d’Android Oreo (8.0) ou supérieur, permettent également d’utiliser la fonction Picture in Picture (PiP). Elle permet aux applications mobiles qui l’implémentent, de se lancer par-dessus toute autre application en cours d’exécution.