Player HTML5 : gestion d'un media si la durée est "Infinity"

Bonjour,

Je continue de peaufiner le développement de mon player HTML5. J'ai bien avancé et réglé tous mes problèmes du moment. Je peu donc avancer à nouveau et ajouter une nouvelle fonctionnalité, à savoir la gestion d'un flux en streaming (exemple du WebRTC). Et je tombe sur une problématique qui est la gestion de durée qui, dans le cas d'un flux continu, est "Infinity" (cf. MDN .duration). Je n'ai pas trop d'idées pour gérer ce cas de figure, peut-être attendre l'information (mais de quelle manière ?) puis remplacer les informations sur la durée par un string affichant "flux continu" ou quelque chose du genre, qu'en pensez-vous ?

Mon problème c'est surtout que l'information arrive après coup (après le téléchargement total de toutes les informations ?) et que pour l'instant je ne sais pas comment l'attendre.

Pour rappel, ma page de démonstration : Media players (édit : c'est le player avec le tag "streaming")

Mon code JavaScript à jour : Github
Modifié par Olivier C (10 May 2023 - 13:04)

Bonjour,

Je mettrais une durée égale à la durée déjà écoulée.

Amicalement,

parsimonhi a écrit :
Je mettrais une durée égale à la durée déjà écoulée.

Bonjour Parsimonhi,

Je tenterais ta solution pour voir, en rentrant chez moi ce soir. Mais vu que .currentTime est quand même actif, et que par ailleurs les autres lecteurs n'ayant pas été lus seront chacun à .currentTime === .duration, je me demande si cette solution ne m'apporterais pas plus de problème qu'elle n'en résoudra. On verra, je ferais un retour... Merci.

En fait, je fais cela pour changer l'apparence de mon lecteur, et notamment supprimer certaines fonctionnalités, comme la barre de progression, l'avance rapide, etc.

Certains disent que la fonctionnalité de récupération de la durée (.duration) est buguée sur les navigateurs, ils font tout un mic-mac pour forcer le navigateur à lire le fichier (ex : .currentTime = Number.MAX_SAFE_INTEGER, puis réinitialisation avec setTimeout + .currentTime = 0).

Pour l'instant je teste un truc comme cela :

['loadeddata', 'loadedmetadata', 'play'].forEach(event => {
  media.addEventListener(event, () => {
  if (media.duration === Infinity) {
    time.innerHTML = 'Lecture en continu' // @todo À évaluer
    time.style.marginRight = 'auto'
    progressbar.remove()
    menu.remove()
    extendMenu.remove()
    }
  })
})

Modifié par Olivier C (12 May 2023 - 17:37)