tech_memo

ローカルの動画ファイルを選択してページで再生する方法

Media Source Extensionsというものがある。これがURL.createObjectURLを拡張しているので普通にURLを作成してvideo.srcに指定できる。

<html>
  <body>
    <div>
      <input type="file" id="file" accept="video/*">
    </div>
    <div>
      <video controls id="video">
    </div>
    <script>
      const fileSelector = document.getElementById('file')
      fileSelector.addEventListener('change', () => {
        const file = fileSelector.files[0]
        const video = document.getElementById('video')
        video.src = URL.createObjectURL(file)
      })
    </script>
  </body>
</html>