Ottenere il vero video di HTML5 larghezza e altezza

Ho un video elemento:

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

E sto recuperando la fonte via getUserMedia() su 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);
    }
);

Il problema è che ho bisogno di sapere la “area attiva” di video, e mi restituisce 0:

video.onloadedmetadata = function(){

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

Così, come posso recuperare i valori REALI?:
Ottenere il vero video di HTML5 larghezza e altezza

  • Quando sono in esecuzione il codice utilizzando FF, questo.larghezza e questo.altezza restituire la dimensione effettiva del l’elemento video. Giusto per prova ho impostato il video.larghezza e video.altezza pari a 400 e la prima linea di consolle restituito 400×400.
InformationsquelleAutor gal007 | 2013-06-12

 

4 Replies
  1. 13

    Ci sono due problemi:

    1. video.videoWidth e video.videoHeight proprietà non erano sempre insieme non appena il loadedmetadata evento generato. Questo è stato un bug in FireFox, che è stato ora risolto (grazie a @Martin Ekblom per segnalare il bug).
    2. Il video in sé non occupa tutta l’area dell’elemento video, che nessuna delle risposte sembrano essere risolti. Invece, scale per adattarsi all’interno dell’elemento.

    Io non credo che ci sia un modo diretto per ottenere le dimensioni dell’area attiva, ma dopo aver lottato con questo me stesso, ho scritto una soluzione per calcolare i valori sappiamo:

    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
      };
    }

    Essenzialmente, prendiamo il rapporto di aspetto dell’elemento video, le proporzioni del video, e le dimensioni dell’elemento video, e usare quelli per determinare l’area in cui il video è situato.

    Questo presuppone che il video giusto metodo non è stato modificato tramite CSS (non so se è ancora possibile in questo momento, ma la spec permette). Per maggiori informazioni e poche altre cose, vedere il blog di post che ho scritto (“Trovare le vere dimensioni di un video HTML5 area attiva”), ispirata a questa domanda e la sua mancanza di risposte complete.

    È interessante notare che, mentre la spec menziona specificamente il possibile bordi intorno a un video (le bande nere e il pillarbox), non ero in grado di trovare eventuali menzioni di esso, a parte la tua domanda.

    • Non vedo questo essere fissato in Sviluppatori di FireFox edizione 51.0a2. Dopo loadedmetadata evento viene generato il videoWidth/videoHeight viene segnalato per me, 640 x 480, che nel mio caso è sbagliato.
    • Il video è stato caricato da un file con un <video> tag, o è da getUserMedia?
    • getUserMedia. Sono stato in grado di utilizzare il clientWidth e clientHeight di elemento video.
    • Il tuo sito web è morto. Per tutti gli altri, potete leggere il suo post del blog che posto qui: nathanielpaulus.wordpress.com/2016/09/04/…
    • Sì, mi dispiace. Grazie per aver postato il link. Ho bisogno di essere riparato. È andato giù quando mi toccare involontariamente cancellati dal server.
    • Grazie per il video.offset.. non noti questi valori
    • Impressionante funzione, grazie!

  2. 9

    Si dovrebbe aggiungere un loadeddata listener di eventi per il video e provate a leggere il formato, che è quando un numero sufficiente di informazioni circa il flusso è stato decodificato e dimensioni può essere determinato con precisione.

    Ancora, a volte ci vuole un po’, in alcuni casi, per ottenere le dimensioni pronto, così si potrebbe desiderare di provare diverse volte (con ritardo) fino a quando funziona.

    Che potrebbe essere perché non funziona per voi, ma funziona per Sam.

    Ecco come faccio a controllare le dimensioni del video, con diversi tentativi, se necessario, a mio gumhelper libreria:
    https://github.com/sole/gumhelper/blob/master/gumhelper.js#L38

    Notare come ci prova più volte e se non funziona si “arrende” e di default a 640×480.

    • Ho avuto lo stesso problema, cambiato poi loadeddata da loadedmetadata e ha funzionato. Grazie!
  3. 2

    “loadeddata” deve fuoco solo una volta. È meglio usare “timeupdate” per verificare più volte se la larghezza e l’altezza sono state definite, in particolare con getUserMedia, dove non si ha realmente mettere in pausa il video, ma andare direttamente in riproduzione.

Lascia un commento