L'API Image-in-Ipture pour la vidéo

L'API Image-in-Ianting (PIP) permet à la vidéo de jouer dans une fenêtre flottante pendant que les utilisateurs naviguent ailleurs; 1. Vérifiez la prise en charge via «PictureInpictureEenabled» et l'attribut DisablePictureInpicture de Video; 2. Déclenchez PIP avec DequestPictureInpiCture () sur le geste de l'utilisateur; 3. Gérer les modifications de l'État avec les événements d'entreprise et les événements de la prise en charge de la réduction; La fonctionnalité nécessite une interaction utilisateur, ne permet qu'une seule fenêtre PIP à la fois, a une prise en charge mobile limitée, peut exclure le contenu DRM et n'offre aucun contrôle de style, mais améliore le multitâche lorsqu'il est utilisé de manière appropriée avec des vérifications de rétroaction et d'assistance appropriées.

Image-in-Insacture (PIP) est une fonctionnalité pratique qui permet aux utilisateurs de continuer à regarder une vidéo dans une petite fenêtre flottante pendant qu'ils naviguent ailleurs sur leur appareil, comme naviguer dans une autre page ou utiliser une autre application. Sur le Web, cette fonctionnalité est activée via l' API d'image dans la situation , une API Web relativement nouvelle mais de plus en plus prise en charge qui donne aux développeurs le contrôle du comportement PIP pour les éléments <video></video> .

Voici ce que vous devez savoir pour l'utiliser efficacement.

Ce que fait l'API PIP

L'API Image-in-Impicture permet à une page Web de saisir et de quitter le mode PIP par programmation pour une vidéo. Une fois activée, la vidéo sort du navigateur dans une petite fenêtre mobile qui reste au-dessus des autres applications, permettant aux utilisateurs de transformer les utilisateurs sans interrompre la lecture.

Il ne fonctionne qu'avec <video></video> des éléments et nécessite l'interaction utilisateur pour initier (pour des raisons de sécurité et d'expérience utilisateur). Des navigateurs comme Chrome, Edge et certaines versions de Safari le soutiennent, mais Firefox et d'autres ne le font pas encore.

Comment utiliser l'API PIP

L'utilisation de l'API est simple. Voici les parties clés:

1. Vérifiez le support et la disponibilité

Avant d'essayer d'utiliser PIP, vérifiez si le navigateur le prend en charge:

 if ('pictureInpictureNabled' dans le document) {
  Console.log («PIP est pris en charge!»);
}

Vous pouvez également vérifier si une vidéo spécifique peut entrer dans PIP:

 if (! video.disablePictureInpicture) {
  // La vidéo est autorisée à entrer dans PIP
}

Remarque: Utilisez l'attribut disablePictureInPicture sur la balise <video> pour empêcher PIP si nécessaire.

2. Demande le mode PIP

Pour entrer PIP, appelez requestPictureInPicture() sur l'élément vidéo:

 fonction asynchrone openpip () {
  essayer {
    attendre la vidéo.requestPictureInpiCture ();
  } catch (err) {
    Console.Error ("Échec de la saisie de PIP:", ERR);
  }
}

Cela doit être déclenché par un geste de l'utilisateur (comme un clic), ou il échouera.

3. Gérer les modifications de l'état PIP

Vous pouvez écouter lorsque Pip commence ou se termine:

 video.AddeventListener ('EnterPictureInpiCture', (événement) => {
  Console.log ('Entré Pip');
  // ajuster l'interface utilisateur, par exemple, les commandes de masque
});

video.AddeventListener ('waitspictureInpicture', (événement) => {
  Console.log («Overy Pip»);
  // restaurer l'interface utilisateur
});

Ces événements aident à maintenir votre interface en synchronisation.

Exemple pratique: ajoutez un bouton PIP

 <Video ID = "MyVideo" Contrôles>
  <source src = "Demo.mp4" type = "vidéo / mp4">
</ vidéo>
<Button id = "Pipbutton"> Togle Pip </futton>

 const video = document.getElementById ('myVideo');
const pipbutton = document.getElementById ('pipbutton');

pipbutton.addeventListener ('click', async () => {
  if (document.pictureInpiCtureElement) {
    // sortir si déjà dans PIP
    attendre document.exitPictureInpiCture ();
  } autre {
    // Entrez PIP
    attendre la vidéo.requestPictureInpiCture ();
  }
});

// bouton désactiver lorsque PIP n'est pas disponible
pipbutton.disabled =! Document.PictureInpiCtureAnabled;

Cela crée un bouton de bascule simple qui respecte l'état PIP actuel.

Notes et limitations importantes

• Geste de l'utilisateur requis : vous ne pouvez pas démarrer automatiquement PIP lorsqu'une page se charge.
• Une seule fenêtre PIP à la fois : si une autre vidéo (ou application) est dans PIP, celle actuelle quittera.
• La prise en charge mobile est limitée : la plupart des navigateurs mobiles ne prennent pas en charge PIP en raison des contraintes d'interface utilisateur.
• Toutes les vidéos ne peuvent pas entrer dans PIP : le contenu ou les vidéos protégé par DRM avec certaines restrictions peuvent être bloqués.
• Limites de style : la fenêtre PIP est contrôlée par le navigateur OS /, vous ne pouvez donc pas personnaliser son apparence.

Conclusion

L'API Image-in-Ipture est un outil puissant mais simple pour améliorer l'expérience utilisateur avec le contenu vidéo. En permettant aux utilisateurs de garder les vidéos visibles lors de la navigation, cela ajoute la commodité, en particulier pour les tutoriels, les vidéos ou les flux en direct.

Utilisez-le réfléchi: fournissez des contrôles clairs, respectez l'intention de l'utilisateur et vérifiez toujours la prise en charge. Avec l'adoption croissante du navigateur, PIP devient une fonctionnalité standard pour la vidéo Web moderne.

Fondamentalement, ce n'est pas magique - juste une petite API qui rend le multitâche beaucoup plus fluide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!