Pierwsze prawdziwe HTML5 wysokość i szerokość filmu

Question

Mam elementu wideo:

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

A ja pobierania To źródło poprzez getUserMedia() na 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); 
    } 
); 

Problem polega na tym, że trzeba wiedzieć w „aktywny obszar” z filmu, i to wraca do mnie 0:

video.onloadedmetadata = function(){ 

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

Tak, jak mogę odzyskać prawdziwą wartość s ?:

Answer 1

Należy dodać detektor loadeddata zdarzeń do pliku wideo i spróbować odczytać wielkość wtedy, czyli kiedy został odkodowany mało informacji o strumieniu i wymiary mogą być dokładnie określone.

W niektórych przypadkach czasami trzeba trochę czasu, aby przygotować wymiary, więc możesz spróbować kilka razy (z opóźnieniem), aż zadziała.

Może dlatego nie działa dla Ciebie, ale działa dla Sama.

Oto jak sprawdzić rozmiar wideo z kilku próbach, jeśli to konieczne, w mojej bibliotece gumhelper: https://github.com/sole/gumhelper/blob/master/gumhelper.js#L38

zauważyć, jak staramy się kilka razy, a jeśli to nie działa my „zrezygnować” i domyślnie 640 x 480.

Answer 2

"loadeddata" powinien być uruchamiany tylko raz. Lepiej jest użyć "timeupdate", aby wielokrotnie sprawdzać, czy szerokość i wysokość wideo zostały ustawione, w szczególności w getUserMedia, gdzie nie wstrzymujesz filmu, ale idź od razu do odtwarzania.

Answer 3

Właściwie to wydaje się być błąd w FF: https://bugzilla.mozilla.org/show_bug.cgi?id=926753

Answer 4

Istnieją dwie kwestie tutaj:

1. video.videoWidth i video.videoHeight właściwości nie zostały ustawione uzyskiwanie jak tylko wydarzenie loadedmetadata zwolniony. To był bug in FireFox, który jest teraz naprawiony (dzięki @Martin Ekblom za wskazanie błędu).
2. Sam materiał wideo nie zajmuje całego obszaru elementu wideo, do którego żadna z odpowiedzi nie została rozwiązana. Zamiast tego skaluje się, aby zmieścić się wewnątrz elementu.

Nie sądzę, istnieje bezpośredni sposób, aby uzyskać wymiary obszaru aktywnego, ale po zmaga się z tym sam pisałem sporządzania roztworu obliczyć ją z wartościami wiemy:

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

Zasadniczo przyjmujemy proporcje elementu wideo, proporcje wideo i wymiary elementu wideo, a następnie wykorzystujemy je do określenia obszaru, w którym wideo się znajduje.

Zakłada to, że metoda dopasowania wideo nie została zmodyfikowana za pomocą CSS (nie jest pewne, czy jest to w tej chwili możliwe, ale specyfikacja pozwala na to). Aby uzyskać więcej informacji na ten temat i kilka innych rzeczy, zobacz wpis na blogu, który napisałem ("Finding the true dimensions of an HTML5 video’s active area"), zainspirowany tym pytaniem i brakiem pełnych odpowiedzi.

Warto zauważyć, że choć specyfikacja wyraźnie wspomina o możliwych krawędziach wokół wideo (letterbox i pillarboxing), nie byłem w stanie znaleźć żadnych innych wzmianek o nim oprócz pytania.