HTML5ビデオの寸法


105

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


あきらめましたか ここに答えとして良い手がかりがあります!
ファンメンデス

回答:


105
<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


ビデオにそのようなメタデータが含まれないと思うので、これはogg形式で可能ですか?
Elliot

:@Elliot私はこのデモでChromeでテストしたpeople.opera.com/howcome/2007/video/controls.htmlを ...、それが動作します
サイムVIDAS

リンクが再び壊れているようです
マーティンデリル

申し訳ありませんが、リンクは実際には壊れていません
マーティンデリル2017年

137

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

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

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

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

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


幅と高さの両方に100の値を取得していますが、ビデオに100pxがありません。理由がわからない...
ミケル

2
これは残念ながらChrome for Android 49では機能しません。ビデオが情報の再生を開始したときにのみ、情報が利用可能になります。これについてさらに洞察はありますか?PS1:ファイルセレクターinput要素を使用して選択されたローカルファイルへのURLでのみこれを試しました。PS2:iOS Safariでは動作します。
Visionscaper 2016年

:私は、クロムバグトラッカーでこの問題を作成しbugs.chromium.org/p/chromium/issues/detail?id=598218
Visionscaper

2
これは100%の確率で機能しません。まれに、発砲時にvideoWidthとvideoHeightがゼロになりloadedmetadataます。Chromium 69で見たところです。リスニングの方loadeddataが安全です。
cleong 2018

18

すぐに使える機能

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

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

ご覧になりたい場合は、スニペットに使用されている動画をご覧ください。BigBuck Bunny


ビデオタグデータを非同期で配信するという約束を
うまく活用

優れたコードと適切なブラウザサポート:Chrome 32、Opera 19、Firefox 29、Safari 8、Microsoft Edgeでは、デフォルトでプロミスが有効になっています。
ジェフクレイトン

13

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

正しいリンク:w3.org/TR/html5/...
Visionscaper

1
@Visionscaper修正、ありがとうございます。元の意図を変更しない場合は、他の人の回答を少し編集してください。
ファンメンデス

Donwvoter:これを改善できるように説明をお願いします!
ファンメンデス

1

これは、Vueでそれを行う方法です。

<template>
    <div>
        <video src="video.mp4" @loadedmetadata="getVideoDimensions"></video>
    </div>
</template>

<script>
export default {
    methods: {
        getVideoDimensions (e) {
            console.log(e.target.videoHeight)
            console.log(e.target.videoWidth)
        }
    }
}
</script>

-1

Vuejsでは、マウントされたタグで次のコードを使用します。

var app = new Vue({
    el: '#id_homepage',
    mounted: function () {
        var v = document.getElementById("id_video");
        var width = v.offsetWidth;
        v.height = Math.floor(width*(9/16)); // dynamically setting video height to maintain aspect ratio
    },
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.