ブラウザ上でローカルの動画を再生したい

Question

ブラウザ上でローカルの動画を再生したい

HTMLと JavaScriptを用いてブラウザ上でローカルファイルにある動画を再生したいと思っています。現在はテキスト・画像のみが表示できる状態なのですが、このコードを変えたら動画が再生できるようになるのでしょうか。それともブラウザ上でローカルの動画は再生することができないのでしょうか。

該当のソースコード

<script type="text/javascript"> if (window.File) { window.alert("File APIが実装されてます。"); document.getElementById("drop").addEventListener("drop", onDrop, false); } else { window.alert("本ブラウザではFile APIが使えません"); } function onDrop(event) { var files = event.dataTransfer.files; var disp = document.getElementById("disp"); disp.innerHTML = ""; for (var i = 0; i < files.length; i++) { var f = files[i]; var reader = new FileReader(); if (!f.type.match('image.*') && !f.type.match('text.*')) { alert("画像ファイルとテキスト・ファイル以外は表示できません。"); continue; } reader.onerror = function (evt) { disp.innerHTML = "読み取り時にエラーが発生しました。"; } if (f.type.match('image.*')) { reader.onload = function (evt) { var li = document.createElement('li'); var img = document.createElement('img'); img.src = evt.target.result; li.appendChild(img); li.innerHTML += "<br />"; disp.appendChild(li); } // readAsDataURLメソッドでファイルの内容を取得 reader.readAsDataURL(f); } if (f.type.match('text.*')) { reader.onload = function (evt) { disp.innerHTML = reader.result; } reader.readAsText(f, 'shift-jis'); } } event.preventDefault(); } function onDragOver(event) { event.preventDefault(); } </script>

 JavaScript

試したこと

JavaScriptを用いてローカルの動画を取り込む方法を調べましたが出てきませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。

[m.ts10806]

あとどこにも「HTMLで動画を再生させるための指示」が書かれていないようですが、
何を試されたのでしょうか。

Answer 1

コードは流し読みですが。

var img = document.createElement('img');

この行で img要素を生成しているところを video要素
を生成するように変えて、他の部分も video要素用にコードを書き換えればいいと思います。
video要素の使い方についてはご自身で調べてください。