HTMLとjavascriptを利用し、アップロードする動画ファイルの再生時間をクライアント側で取得する方法

f:id:zenet-tech:20210316165551j:plain

こんにちは。システム事業部の三浦です。

最近動画のアップロードをする入力フォームを作る機会がありました。

アップロード可能な動画ファイルの条件として、再生時間が300秒以内という条件がありました。(ファイル形式他諸々もチェックしましたが、今回は割愛します)

初めは、アップロードする動画ファイルをサーバサイドでffmpegを利用し解析し、duretionを取得してチェックするような実装を行いました。

しかし、この方法ではアップロードの時間を待たされた上、失敗するといったユーザビリティがとても悪いものになっていました・・・

「入力フォームの段階でjavascriptを利用して、再生時間をチェックしよう！」という方針になったのですが、
その方法で少しつまずくこととなったので、
最終的に完成した方法を簡略化し共有させていただきます。

以下のようなコードで実現可能です。(モダンな書き方でなくすみません・・・)

<!DOCTYPE html>
<html>
  <script type="text/javascript">

    // 動画の再生時間上限
    MAX_DURATION = 300

    window.onload = function() {
      // ファイル選択時のイベントを設定
      document.getElementById("movie-input").onchange = function(e){
        var file = e.target.files[0];
        // 選択されたファイルをチェック用のメソッドに渡す
        checkVideoDuration(file);
      }
    }

    // 再生時間チェック用メソッド
    var checkVideoDuration = function(file) {
      var video = document.createElement('video');
      var fileURL = URL.createObjectURL(file);
      video.src = fileURL;
      video.ondurationchange = function() {
        if(parseInt(this.duration) > MAX_DURATION) {
          alert("動画長さが" + MAX_DURATION + "秒を超えています。");
        } else {
          alert(this.duration);
        }
        URL.revokeObjectURL(this.src);
      };
      console.log("この部分は非同期処理");
    }

  </script>

  <head>
    <meta charset="utf-8">
    <title>動画時間チェック</title>
  </head>

  <body>
    <input type="file" id="movie-input" name="movie-input">
  </body>

</html>