Vidéo avancé

Différentes fonctionnalités permettent de rendre l'expérience vidéo des internautes encore plus élaborées.

Fullscreen

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.

requestFullscreen()

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().

exitFullscreen()

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().

Événement

Il est possible d'écouter des événements en lien avec le mode plein écran.

• fullscreenchange lorsqu'une vidéo démarre ou quitte le mode plein écran.

:fullscreen

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

Picture-in-Picture

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 ladite vidéo 👀.

requestPictureInPicture()

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().

exitPictureInPicture()

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 lorsqu'une vidéo démarre le mode Picture-in-Picture.

• leavepictureinpicture lorsqu'une vidéo quitte le mode Picture-in-Picture.

:picture-in-picture

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