Détection des modifications de la résolution vidéo

Question

Avec certains codecs et conteneurs, il est possible qu'une vidéo change de résolution en cours de flux. Ceci est particulièrement fréquent avec les flux vidéo de type RTC où la résolution peut évoluer vers le haut/bas en fonction de la bande passante disponible. Dans d'autres cas, le périphérique d'enregistrement peut être pivoté et la vidéo peut basculer de portrait en paysage ou vice versa. Lors de la lecture de ces vidéos sur une page Web (simple balise <video>), comment puis-je détecter quand ce changement de taille se produit avec JavaScript? Le meilleur que je peux penser à est de vérifier la taille de la vidéo à chaque image, mais il y a un peu de surcharge à cette méthode. S'il existait un moyen de déclencher un rappel lorsque la vidéo changeait de taille ou qu'un événement se déclenchait, ce serait mieux.

Exemple vidéo redimensionne, sévèrement: https://bugzilla.mozilla.org/attachment.cgi?id=8722238

Answer 1

Vous pouvez utiliser l'événement loadedmetadata pour définir des variables globales ou utiliser Element.dataset pour refléter initial .videoWidth, .videoHeight propriétés de l'élément <video>; à timeupdate cas de <video> initialement stocké et d'événements en cours .videoWidth, .videoHeight valeurs, si l'une des propriétés modifiées appeler la fonction

window.onload = function() { 
    function handleResolutionChange(event) { 
    // do stuff if `.videoWidth` or `.videoHeight` changed from initial value 
    } 
    var video = document.querySelector("video"); 
    video.addEventListener("loadedmetadata", function(event) { 
    event.target.dataset.width = event.target.videoWidth; 
    event.target.dataset.height = event.target.videoHeight; 
    }) 
    video.addEventListener("timeupdate", function(event) { 
    if (+event.target.dataset.width !== event.target.videoWidth 
     && +event.target.dataset.height !== event.target.videoHeight) { 
      // call `handleResolutionChange` one or more times 
      // if `event.target` `.videoWidth` or `.videoHeight` changed 
      handleResolutionChange.call(event.target, event) 
    } 
    }) 
} 

Answer 2

regard si cela aide je ne suis pas sûr.

Link - https://www.w3.org/2010/05/video/mediaevents.html