11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Picture-in-picture sous Firefox

Bonsoir,

J'ai implanté hier le picture-in-picture pour mon player HTMLMediaElement (le bouton se trouve dans le menu du player) : page de démonstration.

Aucun problème avec Chrome (Desktop ou Android), mais ça ne fonctionne pas sous Firefox :
const togglePictureInPicture = media => {
  if (document.pictureInPictureElement) document.exitPictureInPicture()
  else if (document.pictureInPictureEnabled) media.requestPictureInPicture()
}

Le comble, car j'ai trouvé ce code sur MDN et je n'ai modifié que les variables. D'ailleurs leur exemple de démonstration ne fonctionne pas non plus sur leur navigateur :
Picture-in-Picture_API (scrollez jusqu'à leur exemple).
Je suis allé voir d'autres players qui implémentent cette fonctionnalité et, effectivement, celle-ci est désactivée sous Firefox. Pourtant lorsque je repasse en lecteur vanilla, sur l'une ou l'autre vidéo (mais pas sur toutes) le picture-in-picture peut m'être proposé.

Alors qu'en est-il selon vous ? Y-a-t-il une solution de contournement ou est-ce une fin de non recevoir ? J'ai du mal à trouver des infos à ce sujet.
La honte ! Autant pour moi : Firefox ne supporte pas cette fonctionnalité, c'est bien indiqué en bas de la page que j'ai mis en lien (en plus).

Faute d’inattention. Ce qui m'a induit en erreur est le fait que Firefox semble s'essayer à faire du picture-in-picture en proposant la fonctionnalité de temps à autre sur une vidéo. Du coup je n'était même pas allé voir la fonctionnalité, cela me paraissait évident...

Edit : ha ba non en fait, ce n'est pas aussi évident que cela :
"https://caniuse.com/picture-in-picture" a écrit :
La prise en charge partielle de Firefox fait référence au fait que Mozilla fournit une fonctionnalité propriétaire équivalente, qui permet aux utilisateurs d'utiliser le mode Image dans l'image pour toutes les vidéos en cours de lecture.

Je suis allé voir sur Firefox : sur la vidéo en cours > clic droit > "Mode PiP".

Si vous avez de l'expérience en la matière j'aimerais avoir votre avis. Je mettrais "résolu" un peu plus tard sinon.
Modifié par Olivier C (26 Apr 2023 - 00:57)
Au final je n'affiche le bouton picture-in-picture : que s'il remplit la condition de support pour la fonction ad hoc :
if (media.tagName === 'VIDEO' && document.pictureInPictureEnabled) {
  const firstChildExtendMenu = media.nextElementSibling.lastElementChild.firstElementChild
  firstChildExtendMenu.insertAdjacentHTML('beforebegin', pictureInPictureTemplate)
}

Je même, un peu plus loin, pour la gestion de cette fonctionnalité :
media.tagName === 'VIDEO' && document.pictureInPictureEnabled && pictureInPictureButton.addEventListener('click', () => {
  buttonState(!document.pictureInPictureElement, pictureInPictureButton) // @note Ne pas mettre avec les clics généraux
  togglePictureInPicture(media)
})
J'ai trouvé plus simple :
const removeControls = (media, fullscreenButton, pictureInPictureButton) => {
  // @note Le code est plus simple et robuste si l'on se contente de supprimer des boutons déjà présents dans le player plutôt que de les ajouter (cibler leur place dans le DOM, rattacher les fonctionnalités...)
  if (media.tagName === 'AUDIO' || !document.fullscreenEnabled) fullscreenButton.remove()
  if (media.tagName === 'AUDIO' || !document.pictureInPictureEnabled) pictureInPictureButton.remove()
}

pictureInPictureButton.addEventListener('click', () => {
  buttonState(!document.pictureInPictureElement, pictureInPictureButton) // @note Ne pas mettre avec les clics généraux
  togglePictureInPicture(media)
})
Prévenir un modérateur
Répondre au sujet
Aller à