JavaScriptで動画読み込み

JavaScriptで動画ファイルを読み込み、動画の縦横サイズを取得するまでを解説する。<br>
動画読み込みまで完了すれば再生やシークなどできるようになる。

## HTML

```
<input type="file">
<button type="button">読み込み</button>
```
inputタグ、buttonタグのみ。formタグで囲む必要は無い。

## ボタンをクリック

```
document.querySelector('button').addEventListener('click',loadFile);
```
ボタンクリックでloadFileファンクションへ制御が移る。

## ファイル読み込み

```
function loadFile() {
	const file = document.querySelector('input').files[0];
	const reader = new FileReader();
	reader.addEventListener('load', (e) => {readerOnLoad(e);});
	reader.readAsDataURL(file);
}
```
ファイルはFileReaderで読み込む。読み込んだらreaderOnLoadファンクションへ制御を移す。

## 動画メタデータ読み込み

```
function readerOnLoad(e) {
	const video = document.createElement('video');
	const src = e.currentTarget.result;
	video.addEventListener('loadedmetadata', (e) => {videoOnLoad(e);});
	video.setAttribute('src',src);
}
```
videoタグを用意して読み込んだファイルをセットする。メタデータが読み込まれたらvideoOnLoadファンクションへ制御を移す。

## メタデータ取得

```
function videoOnLoad(e) {
	const targetVideo = e.explicitOriginalTarget || e.path[0];	//Firefox || Chrome
	console.log(targetVideo.videoWidth,targetVideo.videoHeight);
}
```
Event.explicitOriginalTarget はFirefox固有の非標準機能である。<br>
Event.pathが執筆時点で存在しない為、代用である。

## まとめ

適宜エラー処理を追加すること。

```
<input type="file">
<button type="button">読み込み</button>

//ファイル読み込み
function loadFile() {
	const file = document.querySelector('input').files[0];
	const reader = new FileReader();
	reader.addEventListener('load', (e) => {readerOnLoad(e);});
	reader.readAsDataURL(file);
}

//動画読み込み
function readerOnLoad(e) {
	const video = document.createElement('video');
	const src = e.currentTarget.result;
	video.addEventListener('loadedmetadata', (e) => {videoOnLoad(e);});
	video.setAttribute('src',src);
}

//メタデータ取得
function videoOnLoad(e) {
	const targetVideo = e.explicitOriginalTarget || e.path[0];	//Firefox || Chrome
	console.log(targetVideo.videoWidth,targetVideo.videoHeight);
}
</script>
```

JavaScriptで動画読み込み

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

カレンダー系

IPv4,IPv6

インターネット

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Aタイプ) 抽選機+カード

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他