JavaScriptで video タグのサイズが取得できない場合の対処法

Google Chromeの拡張機能を制作する過程で、HTMLの video タグで再生される動画の横幅や高さを取得する方法について備忘録的に投稿しておきます。

動画がロードされた状態で取得

imgタグも同様ですが基本的に、タグにコンテンツがロードされた後で取得するのが王道。

画像と違い、動画はタグがコンテンツをロードするまでに待ち時間が多いので取得するタイミングによっては正しく取得できない可能性があります。

具体的には、”loadeddata” のイベントを待ってから取得ができました。

v.src = url;
v.addEventListener("loadeddata", async () => {
    const video_width = v.videoWidth;
    const video_height = v.videoHeight;
    console.log(video_width);
    console.log(video_height);
});

.videowidth / .videoheight で取得

video タグには、.width / .height の汎用的な幅と高さのプロパティの他に、.videowidth / .videoheight があります。

.width / .height プロパティでは正しく取得されない場合、.videowidth / .videoheight に変更すると取得ができました。

const video_width = v.videoWidth;
const video_height = v.videoHeight;

まとめ

今回は、HTMLの video タグで再生される動画の横幅や高さを取得する方法について書きました。

JavaScriptで video タグに設定された動画ファイルの幅や高さを取得するには “loadeddata” のイベントを待ってから、.videowidth / .videoheight を使って取得が可能です。

HTMLに追加した video タグに読み込まれる動画の幅や高さを取得したい人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただきありがとうございます。