SYNCERのロゴ
アイキャッチ画像

ローカル動画を表示する方法

ユーザーの端末にあるローカル動画を表示するには、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>' ;
	}
} ) ;

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年7月29日 (土)
コンテンツを公開しました。