やりたいこと

動画をアップロードする前に、フロント側で再生時間に上限を設けたい

完成形

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video Duration Test</title>
</head>
<body>
<input id="video-input" type="file">
<video id="video" display="none" height=0 width=0 type="video/mp4"></video>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$('#video').on('loadedmetadata', () => {
  const duration = $('#video')[0].duration
  console.log('duration =', duration, 'seconds')
  if (duration > 3600) {
      alert('Too long!')
  }
})

$('#video-input').change(e => {
  $('#video').attr('src', URL.createObjectURL(e.target.files[0]))
  // このタイミングでは取れない
  // console.log($('#video')[0].duration)
})
</script>
</body>
</html>

解説

動画の再生時間を取得するにはvideo要素のdurationを参照する
見えないvideo要素を用意しておき、inputで選択された動画をsrcに指定する
srcを変更した直後にはdurationが取れないため、loadedmetadataイベントを待つ