web-dev-qa-db-ja.com

実際のHTML5ビデオの幅と高さを取得する

私はビデオ要素があります：

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

そして、Firefoxで getUserMedia（） を介してソースを取得しています：

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

問題は、ビデオの「アクティブな領域」を知る必要があることです。これにより、0が返されます。

video.onloadedmetadata = function(){

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

では、REAL値を取得するにはどうすればよいですか？ enter image description here

javascripthtmlfirefox-addonhtml5-videofirefox-addon-sdk
24
gal007

ここには2つの問題があります。

  1. video.videoWidthおよびvideo.videoHeightプロパティは、loadedmetadataイベントが発生した直後に設定されていませんでした。これは FireFoxのバグ でしたが、現在は修正されています（バグを指摘してくれた@Martin Ekblomに感謝）。
  2. ビデオ自体はビデオ要素の領域全体を占めるわけではありません。その答えのどれも対処していないようです。代わりに、要素内に収まるようにスケーリングされます。

アクティブな領域のサイズを直接取得する方法はないと思いますが、これを自分で試した後、私が知っている値からそれを計算するための解決策を書きました：

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

基本的に、ビデオ要素のアスペクト比、ビデオのアスペクト比、およびビデオ要素のサイズを取得し、それらを使用してビデオが占める領域を決定します。

これは、ビデオのフィッティングメソッドがCSS経由で変更されていないことを前提としています（現時点でそれが可能かどうかは不明ですが、仕様では許可されています）。それと他のいくつかの詳細については、私が書いたブログ投稿（ "HTML5ビデオのアクティブ領域の本当の大きさを見つける" ）を参照してください。この質問と完全な答えの欠如に触発されました。

仕様がビデオ（レターボックス化とピラーボックス化）の周辺の可能性について具体的に言及している一方で、質問以外に、それに関する他の言及を見つけることができなかったことに注目するのは興味深いことです。

15
Nateowami

loadeddataイベントリスナーをビデオに追加し、サイズを読み取ってみてください。これは、ストリームに関する十分な情報がデコードされ、サイズを正確に決定できるときです。

それでも、場合によっては、ディメンションを準備するのに少し時間がかかることがあります。そのため、機能するまで数回（遅延して）試行する必要がある場合があります。

それがあなたのために働いていない理由かもしれませんが、それはサムのために働いています。

これは、ガムヘルパーライブラリでビデオサイズを確認する方法です。必要に応じて数回試行します。 https://github.com/sole/gumhelper/blob/master/gumhelper.js#L38

何回か試してみて、うまくいかない場合は「あきらめて」、デフォルトで640x480にしてください。

9
sole

「loadeddata」は1回だけ起動する必要があります。 「timeupdate」を使用して、ビデオの幅と高さが設定されているかどうかを繰り返し確認することをお勧めします。特に、ビデオを実際に一時停止するのではなく、直接再生に入るgetUserMediaを使用することをお勧めします。

2
Silvia

実際、これはFFのバグのようです： https://bugzilla.mozilla.org/show_bug.cgi?id=92675

1
Martin Ekblom