Vidéo avancé

3

Fullscreen API

Le Fullscreen API permet de mettre un élément (div, iframe, video, etc.) en plein écran, masquant ainsi momentanément tous les autres éléments de l'écran.

Activation

Pour demander au navigateur de mettre un élément en plein écran, il suffit de lui indiquer l'élément en question et d'appeler la méthode .requestFullscreen()

Voir le CodePen de Simon Arnold (@smnarnold).

Attention, si vous tentez d'activer le mode plein-écran dans un contexte qui n'est pas lié à une action de l'utilisateur, par exemple au chargement de la page, le navigateur bloquera la demande.

Désactivation

Par défaut, l'utilisateur peut sortir par lui-même du mode plein-écran en appuyant sur la touche esc ou encore f11.

Il est aussi possible de désactiver le mode plein écran en appelant la méthode document.exitFullscreen().

Apparence

Pour modifier l'apparence d'un élément en plein écran, par exemple sa couleur d'arrière-plan, il est possible de le cibler grâce à la pseudo-classe :fullscreen.

Biggie Smalls 🤴🏿 codepen.io/smnarnold/pen/vYXLQyJ

Pour en savoir plus, voir cet article de MDN🦖 sur l'API Fullscreen

Picture-in-Picture API

Le Picture-in-Picture API permet de détacher la vidéo de la page. Ainsi, l'utilisateur peut continuer à naviguer tout en continuant de regarder du coin de l'oeil une vidéo.

Activation

Pour demander au navigateur de mettre une vidéo en mode Picture-in-Picture (pip), il suffit de lui indiquer l'élément en question et d'appeler la méthode .requestPictureInPicture()

Voir le CodePen de Simon Arnold (@smnarnold).

Désactivation

Par défaut, l'utilisateur peut sortir par lui-même du mode picture-in-picture en appuyant sur les options supplémentaires surimposées par-dessus la vidéo.

Il est aussi possible de désactiver ce mode en appelant la méthode .exitPictureInPicture().

Événements

Il est possible d'écouter des événements en lien avec le mode Picture-in-Picture.

  • enterpictureinpicture déclenché lorsqu'une vidéo entre en mode picture-in-picture.
  • leavepictureinpicture déclenché lorsqu'une vidéo quitte en mode picture-in-picture.

Pour en savoir plus, voir cet article de MDN🦖 sur picture-in-picture

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme