Bắt thực chiều rộng đoạn video HTML5 và chiều cao

Question

Tôi có một yếu tố video:

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

Và tôi lấy đó là nguồn qua getUserMedia() trên 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); 
    } 
); 

Vấn đề là tôi cần phải biết "khu vực hoạt động" của video và video trả lại cho tôi 0:

video.onloadedmetadata = function(){ 

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

Vì vậy, làm cách nào tôi có thể truy xuất giá trị REAL s ?:

Answer 1

Bạn nên thêm loadeddata trình xử lý sự kiện vào video và cố gắng đọc kích thước, đó là khi đủ thông tin về luồng đã được giải mã và kích thước có thể được xác định chính xác.

Tuy nhiên, đôi khi phải mất một chút trong một số trường hợp để có được kích thước sẵn sàng, vì vậy bạn có thể muốn thử nhiều lần (với sự chậm trễ) cho đến khi nó hoạt động.

Đó có thể là lý do tại sao nó không hoạt động cho bạn nhưng nó làm việc cho Sam.

Đây là cách tôi kiểm tra kích thước video, với nhiều nỗ lực nếu cần, trong thư viện gumhelper tôi: https://github.com/sole/gumhelper/blob/master/gumhelper.js#L38

Thông báo như thế nào chúng tôi cố gắng nhiều lần và nếu nó không hoạt động chúng ta "bỏ cuộc" và mặc định 640x480.

Answer 2

"loadeddata" chỉ được kích hoạt một lần. Tốt hơn nên sử dụng "timeupdate" để liên tục kiểm tra xem chiều rộng và chiều cao của video đã được đặt chưa, đặc biệt với getUserMedia nơi bạn không thực sự tạm dừng video, nhưng đi thẳng vào phát lại.

Answer 3

Thực ra đây có vẻ là một lỗi trong FF: https://bugzilla.mozilla.org/show_bug.cgi?id=926753

Answer 4

Có hai vấn đề ở đây:

1. video.videoWidth và video.videoHeight tính được không nhận được thiết lập ngay sau khi sự kiện loadedmetadata bị sa thải. Đây là bug in FireFox, hiện đã được sửa (nhờ @Martin Ekblom chỉ ra lỗi này).
2. Bản thân video không chiếm toàn bộ khu vực của phần tử video mà không có câu trả lời nào dường như đã giải quyết. Thay vào đó, nó vảy để vừa với phần tử bên trong.

Tôi không nghĩ rằng có một cách trực tiếp để có được kích thước của khu vực hoạt động, nhưng sau khi đấu tranh với bản thân mình, tôi đã viết lên một giải pháp để tính toán nó từ các giá trị chúng ta biết:

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

Về cơ bản, chúng tôi lấy tỷ lệ co của phần tử video, tỷ lệ co của video và kích thước của phần tử video và sử dụng các yếu tố đó để xác định khu vực video đang chiếm.

Điều này giả định phương pháp phù hợp của video chưa được sửa đổi qua CSS (không chắc chắn rằng điều đó thậm chí có thể thực hiện tại thời điểm này, nhưng thông số cho phép). Để biết thêm chi tiết về điều đó và một vài điều khác, hãy xem bài đăng trên blog tôi đã viết ("Finding the true dimensions of an HTML5 video’s active area"), lấy cảm hứng từ câu hỏi này và thiếu câu trả lời hoàn chỉnh.Điều thú vị cần lưu ý là mặc dù đặc tả cụ thể đề cập đến các cạnh có thể xung quanh một video (hộp thư và hộp thư), tôi không thể tìm thấy bất kỳ đề cập nào khác về nó, ngoài câu hỏi của bạn.