ローカル動画を表示する方法
ユーザーの端末にあるローカル動画を表示するには、Blob URLを利用します。ローカル画像の表示の仕方の応用です。
サンプルコード
Blob URLを作成して、それをvideo要素のsrc属性に指定します。
<input id="target" type="file" multiple>
document.getElementById( "target" ).addEventListener( "change", function() {
var fileList = this.files ;
for( var i=0,l=fileList.length; l>i; i++ ) {
var blobUrl = window.URL.createObjectURL( fileList[i] ) ;
}
} ) ;
デモ
// <input type="file" id="target" multiple>にchangeイベントを設定
document.getElementById( "target" ).addEventListener( "change", function() {
// フォームで選択された全ファイルを取得
var fileList = this.files ;
// 個数分の動画を表示する
for( var i=0,l=fileList.length; l>i; i++ ) {
// Blob URLの作成
var blobUrl = window.URL.createObjectURL( fileList[i] ) ;
// HTMLに書き出し (src属性にblob URLを指定)
document.body.innerHTML += '<video src="' + blobUrl + '" controls></video>' ;
}
} ) ;
関連記事
- Data URIからBlob(File)を作成する方法
- Data URIの文字列からBlob(File)を作成します。
- クリックした位置を取得する方法
- マウスでクリックした位置を取得するには、eventオブジェクトのpageX、pageYを参照します。
- リロードする方法
- ページを再読み込みするには、location.reload()を実行します。
- ローカル画像を表示する方法
- ユーザーの端末に保存されているローカル画像を表示します。
- 動画のサイズを取得する方法
- 動画の本来のサイズを取得するには、video要素のvideoWidthとvideoHeightを参照します。