HTML5ビデオ寸法

Question

JavaScriptを使用してページにオーバーレイしているビデオの寸法を取得しようとしていますが、ビデオがロードされる前に計算されているように見える実際のビデオの代わりにポスター画像の寸法を返しています。

Answer 1

<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

Answer 2

videowidthとvideoheightプロパティが「Loadedmetadata」イベントが発生した後まで設定されていないため、Sime Vidasによって現在認められているソリューションは実際には最新のブラウザでは機能しないことに注意してください。

ビデオ要素がレンダリングされた後に十分な遠くにこれらのプロパティをクエリした場合、それは時々機能する可能性がありますが、ほとんどの場合、これは両方のプロパティで0の値を返します。

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

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

注：とにかく、ブラウザの9以前のバージョンがHTML5ビデオをサポートしていないため、AddEventListenerの代わりにAdcitionEventを使用するInternet Explorerの9以前のバージョンの会計を気にしませんでした。

Answer 3

機能を使用しました

これは、ビデオの寸法を非同期に返す準備ができている関数です。 ドキュメントに何も変更せずに.

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

これが、あなたがそれを見たいなら、スニペットに使用されるビデオです： ビッグバックバニー

Answer 4

を聞いてください 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);
});

Answer 5

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