video再生時の表示しているサイズのみの取得

Question

videoタグ内で動画を再生している時にの表示しているサイズのみを取得したいと思っています。

document.getElementById("video1").videoWidth;

だと動画自体のサイズが取得されるので望んでいるものと違います。
widthなどでも要素のサイズが取得されるので...

よろしくお願いいたします。

Answer 1

元の動画のサイズとvideoタグのサイズを比較して、計算するのが良いですかねぇ…。

var v = document.getElementById("video");
v.onloadedmetadata = function () {
	// 元の動画のサイズ
	var orgW = v.videoWidth;
	var orgH = v.videoHeight;
	var orgR = orgH / orgW;

	// videoタグのサイズ
	var videoW = v.clientWidth;
	var videoH = v.clientHeight;
	var videoR = videoH / videoW;

	// 描画されている部分のサイズ
	var screenW, screenH;
	if(orgR > videoR){
		screenH = v.clientHeight;
		screenW = screenH / orgR;
	}else{
		screenW = v.clientWidth;
		screenH = screenW * orgR;
	}
	console.log(screenW, screenH);
}

Comments

[dakarann104]

色々勉強になりました...