回答:
<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
上記の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を考慮していません。
loadedmetadata
ます。Chromium 69で見たところです。リスニングの方loadeddata
が安全です。
これは、ドキュメントの内容を変更せずに、ビデオのサイズを非同期で返す、すぐに使用できる関数です。
// ---- 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
loadedmetadata
ユーザーエージェントがメディアリソースの期間とサイズを決定した直後にディスパッチされるイベントをリッスンします
https://www.w3.org/TR/html5/semantics-embedded-content.html#eventdef-media-loadedmetadata
videoTagRef.addEventListener('loadedmetadata', function(e){
console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
});