6

タグの幅と高さを取得しようとしています。次のマークアップを使用しています:

<div class="masked" id="video_container">
    <video id="video" loop="loop" muted="muted" tabindex="0" style="width: 100%; height: 100%;">
        <source src="..." type="..."</source>
        <source src="..." type="..."</source>
    </video>
</div>

重要な部分は、幅と高さの属性が両方とも 100% に設定されていることです。ウィンドウを変更すると、ビデオの縦横比が保存されますが、実際の幅と高さを取得できません。

offsetWidth および offsetHeight プロパティを使用して値を取得しようとしましたが、それらはビデオの実際のサイズを返します。

編集：

これは私のために働くコードです：

var videoActualWidth = video.getBoundingClientRect().width;
var videoActualHeight = video.getBoundingClientRect().height;

var aspect = videoActualWidth / videoActualHeight;

if (w / h > aspect) {
    video.setAttribute("style", "height: 100%");
} else {
    video.setAttribute("style", "width: 100%");
}

ありがとう！

4

1 に答える 1

15

このコードは、ビデオ タグのサイズを示します (ビデオ自体のサイズではありません)。

var video = document.getElementById("video");
var videotag_width = video.offsetWidth;
var videotag_height = video.offsetHeight;

このコードは、現在再生中のビデオのサイズを示します

var video = document.getElementById("video");
var video_height = video.videoHeight;
var video_width = video.videoWidth;
于 2013-05-09T11:46:11.410 に答える