2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

アップロードされた動画の縦横サイズ情報をjavaScriptで取得する方法

Posted at

前提

htmlのinputタグにてアップロードされた動画の縦横サイズ情報を取得して、サーバーサイドにpostする必要があり、その際に作成したコードになります。
fileinputから直接取得はできなかったた、一度videoタグに展開してから、縦横のサイズを取得しています。

実装

sample.js
// ファイル選択時にhandleFileSelectを発火
    fileInput.addEventListener('change', () => {
        // 複数の画像やサイズがmultipleでアップロードされていた場合を想定
        for (let i = 0; i < fileInput.files.length; i++) {
            let file = fileInput.files[i];
            // 動画のみ処理を行う。今回はmp4のみ
            if (file.type === "video/mp4") {
                let element = document.createElement( "video" ) ;
                let name = file.name;
                element.src = URL.createObjectURL(file);
                element.ondurationchange = () => {
                    // videoタグから画像の高さ、横幅を取得する
                    let height = element.videoHeight;
                    let width = element.videoWidth;
                }
            }
        }
    });   

限られたシチュエーションだとは思うのですが、誰かの役に立てば幸いです。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?