web-dev-qa-db-ja.com

HTML5ビデオの寸法

JavaScriptを使用してページにオーバーレイするビデオのサイズを取得しようとしていますが、ビデオがロードされる前に計算されているように見えるため、実際のビデオではなくポスター画像のサイズを返しています。

javascriptjqueryhtml5-video
82
Elliot
<video id="foo" src="foo.mp4"></video>

var vid = document.getElementById("foo");
vid.videoHeight; // returns the intrinsic height of the video
vid.videoWidth; // returns the intrinsic width of the video

仕様： https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element

79
Šime Vidas

「loadedmetadata」イベントが発生するまでvideoWidthおよびvideoHeightプロパティが設定されないため、Sime Vidasによる上記の現在受け入れられているソリューションは、実際には最新のブラウザーでは機能しないことに注意してください。

VIDEO要素がレンダリングされた後、これらのプロパティのクエリを十分に実行すると、動作する場合がありますが、ほとんどの場合、両方のプロパティに対して値0が返されます。

正しいプロパティ値を取得することを保証するには、次の行に沿って何かをする必要があります。

var v = document.getElementById("myVideo");
v.addEventListener( "loadedmetadata", function (e) {
    var width = this.videoWidth,
        height = this.videoHeight;
}, false );

注：ブラウザーの9以前のバージョンはHTML5ビデオをサポートしていないため、addEventListenerの代わりにattachEventを使用するInternet Explorerの9以前のバージョンについては考慮しませんでした。

119
natlee75

機能を使用する準備ができて

これは、ドキュメント内の何も変更せずに、ビデオのサイズを非同期に返すすぐに使用できる関数です。

// ---- Definitions ----- //

/**
 Returns the dimensions of a video asynchrounsly.
 @param {String} url Url of the video to get dimensions from.
 @return {Promise} Promise which returns the dimensions of the video in 'width' and 'height' properties.
 */
function getVideoDimensionsOf(url){
        return new Promise(function(resolve){
                // create the video element
                let video = document.createElement('video');

                // place a listener on it
                video.addEventListener( "loadedmetadata", function () {
                        // retrieve dimensions
                        let height = this.videoHeight;
                        let width = this.videoWidth;
                        // send back result
                        resolve({
                                height : height,
                                width : width
                        });
                }, false );

                // start download meta-datas
                video.src = url;
        });
}


// ---- Use ---- //
getVideoDimensionsOf("http://clips.vorwaerts-gmbh.de/VfE_html5.mp4")
   .then(({width, height}) => {
        console.log("Video width: " + width) ;
        console.log("Video height: " + height) ;
    });

ご覧になりたい場合にスニペットに使用されているビデオは次のとおりです。 Big Buck Bunny

14
Yairopro

ユーザーエージェントがメディアリソースの期間とサイズを決定したときにディスパッチされるloadedmetadataイベントをリッスンします

セクション4.7.10.16イベント概要

https://www.w3.org/TR/html5/semantics-embedded-content.html#eventdef-media-loadedmetadata

videoTagRef.addEventListener('loadedmetadata', function(e){
    console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
});
12
Juan Mendes