La véritable vidéo HTML5 de largeur et de hauteur

J'ai un élément de vidéo:

var video = window.content.document.createElement("video");
video.width = width;
video.height = height; 
video.style.backgroundColor = "black";
window.content.document.body.appendChild(video);

Et je suis de la récupération de la source via getUserMedia() sur Firefox:

window.navigator.getMedia = ( window.navigator.getUserMedia || window.navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia || window.navigator.msGetUserMedia);

window.navigator.getMedia( //constraints, sucessCallback, errorCallback
    {video: true, audio: false},
    function(stream) {
        if (window.navigator.mozGetUserMedia) 
            video.mozSrcObject = stream;
        else 
        {
            var vendorURL = window.URL || window.webkitURL;
            video.src = vendorURL.createObjectURL(stream);
        }
        video.play();
    },
    function(err) {
        console.log("Error: " + err);
    }
);

Le problème est que j'ai besoin de connaître la "zone active" de la vidéo, et c'est le retour de moi 0:

video.onloadedmetadata = function(){

    console.log(this.width + "x" +this.height); 
    console.log(this.videoWidth + "x" +this.videoHeight);
}

Alors, comment puis-je récupérer les valeurs RÉELLES?:
La véritable vidéo HTML5 de largeur et de hauteur

Quand je suis en cours d'exécution de votre code à l'aide de FF, ce.la largeur et la ce.hauteur de retourner les dimensions réelles de l'élément vidéo. Juste pour tester j'ai mis la vidéo.la largeur et la vidéo.hauteur égale à 400 et la première console de ligne retourné 400x400.

InformationsquelleAutor gal007 | 2013-06-12

13

Il y a deux problèmes ici:
1. video.videoWidth et video.videoHeight propriétés n'étaient pas fixée dès que la loadedmetadata événement déclenché. C'était un bug dans FireFox, qui est maintenant résolu (merci à @Martin Ekblom d'avoir signalé le bug).
2. La vidéo elle-même ne prend pas la totalité de la zone de l'élément vidéo, dont aucune des réponses semblent l'avoir abordé. Au lieu de cela, il met à l'échelle pour s'adapter à l'intérieur de l'élément.
Je ne pense pas qu'il y a un moyen direct d'obtenir les dimensions de la zone active, mais après avoir lutté avec moi-même, j'ai préparé une solution pour le calculer à partir des valeurs que nous savons:
```
function videoDimensions(video) {
  //Ratio of the video's intrisic dimensions
  var videoRatio = video.videoWidth / video.videoHeight;
  //The width and height of the video element
  var width = video.offsetWidth, height = video.offsetHeight;
  //The ratio of the element's width to its height
  var elementRatio = width/height;
  //If the video element is short and wide
  if(elementRatio > videoRatio) width = height * videoRatio;
  //It must be tall and thin, or exactly equal to the original ratio
  else height = width / videoRatio;
  return {
    width: width,
    height: height
  };
}
```
Essentiellement, nous prenons le ratio d'aspect de la vidéo de l'élément, le ratio d'aspect de la vidéo, et les dimensions de l'élément vidéo, et utilisez-les pour déterminer la zone de la vidéo occupe.

Cela suppose la vidéo de la méthode de l'ajustement n'a pas été modifiée via CSS (pas sûr si c'est encore possible à ce moment, mais la spec le permet). Pour plus de détails sur cela, et quelques autres choses, voir le billet de blog que j'ai écrit ("Trouver les véritables dimensions de la vidéo HTML5 zone active"), inspiré par cette question, et son manque de réponses complètes.

Il est intéressant de noter que, bien que la spec mentionne expressément la possible bords autour d'une vidéo (bandes noires et pillarboxing), je n'ai pas pu trouver d'autres mentions, à l'exception de votre question.
- Je ne vois pas cela étant fixée Développeurs de FireFox édition 51.0a2. Après loadedmetadata événement se déclenche la videoWidth/videoHeight est signalé pour moi à 640 x 480, ce qui dans mon cas est erroné.
- La vidéo est chargée à partir d'un fichier avec un <video> tag, ou est-il de getUserMedia?
- getUserMedia. J'ai été en mesure d'utiliser le clientWidth et clientHeight de l'élément vidéo.
- Votre site web est mort. Pour tous les autres, vous pouvez lire son blog ici: nathanielpaulus.wordpress.com/2016/09/04/...
- Ouais, désolé à ce sujet. Merci de poster le lien. J'ai besoin de le faire réparer. Il est allé vers le bas quand j'ai par mégarde supprimé du serveur.
- Merci pour la vidéo.décalage.. n'a pas connu ces valeurs
- Génial fonction, merci!
InformationsquelleAutor Nateowami
9

Vous devez ajouter un loadeddata écouteur d'événement pour la vidéo, et essayer de lire la taille, ce qui n'est quand assez d'informations sur les flux a été décodé et les dimensions peuvent être déterminés avec précision.

Encore, il faut parfois attendre un peu, dans certains cas, pour obtenir les dimensions prêt, de sorte que vous voudrez peut-être essayer plusieurs fois (avec retard) jusqu'à ce que cela fonctionne.

Qui explique peut-être pourquoi il ne fonctionne pas pour vous, mais il travaille pour Sam.

Voici comment j'ai vérifier la taille de la vidéo, avec plusieurs tentatives, si nécessaire, dans mon gumhelper de la bibliothèque:
https://github.com/sole/gumhelper/blob/master/gumhelper.js#L38

Remarquez comment nous avons essayer plusieurs fois et si ça ne fonctionne pas de nous "donner" et par défaut à 640x480.
- J'ai eu le même problème alors changé de loadeddata de loadedmetadata et cela a fonctionné. Merci!
InformationsquelleAutor sole
2

"loadeddata se" doit se déclencher une seule fois. Il est préférable d'utiliser des "timeupdate" à plusieurs reprises vérifier si la vidéo la largeur et la hauteur ont été fixés, en particulier avec getUserMedia où vous n'avez pas vraiment mettre la vidéo en pause, mais aller directement dans la lecture.

InformationsquelleAutor Silvia
1

En fait, ce qui semble être un bug dans FF:
https://bugzilla.mozilla.org/show_bug.cgi?id=926753
- Ressemble à ce bogue a été corrigé dans FireFox 37 (version actuelle est de 48).
InformationsquelleAutor Martin Ekblom

Vous devez vous connecter pour publier un commentaire.