HTML5のvideoタグでローカル（ハードディスク上）の動画ファイルを再生する方法

HTML5の<video>タグを使えば、ブラウザ上で手軽に動画を再生できます。対応している主な動画形式は、MP4、WebM、Oggの3種類です。

本記事では、ユーザーがハードディスク上から選択したローカルの動画ファイルを、<video>タグで再生する方法を段階的に解説します。

1. input要素でファイルを選択する

まず、<input type="file">要素を使用して、ユーザーにローカルの動画ファイルを選択させます。accept属性にvideo/*を指定すると、動画ファイルのみが選択対象になります。

2. changeイベントが発火する

ファイルが選択されると、<input>、<select>、<textarea>などのフォーム部品ではchangeイベントが発火します。このイベントは、ユーザーによって要素の値が変更されたタイミングで発生するため、ここをフックにしてJavaScriptによる処理を開始します。

3. Fileオブジェクトを取得する

Fileインターフェースは、ファイルに関する情報（名前・サイズ・種類など）を提供し、Webページ上のJavaScriptからその内容へアクセスすることを可能にします。このオブジェクトは、HTMLの<input>要素のfilesプロパティから取得でき、これにより<input type="file">で選択されたファイルのリストにアクセスできます。単一選択の場合はfiles[0]で先頭のファイルを参照します。

4. Fileオブジェクトを指すオブジェクトURLを作成する

次に、静的メソッドURL.createObjectURL()を使用します。このメソッドは、引数に渡したオブジェクトを表すURLを含むDOMStringを生成します。作成されたオブジェクトURLにより、ローカルファイルをサーバーへアップロードすることなく、ブラウザ内で直接参照できるようになります。

5. オブジェクトURLをvideo.srcプロパティに設定する

最後に、生成したオブジェクトURLを<video>要素のsrc属性に設定します。src属性には動画ファイルの場所（URL）を指定するため、ここにオブジェクトURLを代入すれば、選択したローカル動画が画面上に表示され、再生可能になります。

まとめ

「input要素でファイル選択 → changeイベントで検知 → Fileオブジェクトを取得 → URL.createObjectURL()でURLを生成 → video.srcに設定」という流れを実装するだけで、サーバー通信なしにローカルの動画ファイルをHTML5のvideoタグで再生できます。プレビュー機能付きのアップロードフォームなどにも応用できる、実用的なテクニックです。