質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2919閲覧

File APIで取得したファイル情報について

yuzusenbei

総合スコア19

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

1クリップ

投稿2016/07/08 10:36

File APIでファイル情報を取得し、その情報を個々で取り出す方法がわかりません。
具体的にはファイル名だけを取り出したいと思っております。
ファイル名を取り出し、その動画ファイルを再生することを実装したいと思っております。

こちらでファイル情報を取得し

HTML
<input id="afile" type="file" multiple>

javascript
window.onload = function(){
$("#afile").addEventListener(
'change', afile_changeHandler);
}

function afile_changeHandler(evt){
var files = evt.target.files;
var s = "";
for(var i = 0; i < files.length; i++){
var f = files[i];
s +=
'name;' + escape(f.name) + '<br>' +
'size;' + f.size + ' Bytes<br>' +
'type;' + f.type + '<br>' +
'date;' + f.lastModifiedDate + '<hr>';

} $('#info').innerHTML = s;

}

function $(id) {
return document.querySelector(id);
}

こちらのsample.mp4,ogv,webmなどのファイル名を書く場所に取得したファイル名を入れたいと思っております。

<video id="video" width="400" height="300"> <source src="sample.mp4"> <source src="sample.ogv"> <source src="sample.webm"> </video>

もしくは他の方法で良いものがあれば、そちらも教えていただきたいです。
また、今後はjavascriptを使い、ローカルの動画を再生するシステムを作っていきたいと思っているのですが、参考になるサイト、書籍などがあれば教えていただきたいです。

よろしくお願いいたします。

whowhat👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shi_ue

2016/07/08 10:41

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
Lhankor_Mhy

2016/07/08 10:58

ご提示されているコードは動作すると思うんですが、何が問題ですか?
yuzusenbei

2016/07/08 11:06

ご指摘ありがとうございます。 今後気をつけていきたいと思います。
guest

回答1

0

ベストアンサー

File APIでファイル情報を取得し、その情報を個々で取り出す方法がわかりません。

ちゃんと取り出せてるじゃないですか。
そのf.namevideoの子要素sourceを作ってappendしてやればいいですよ。

でも、File APIで取得したファイル名はパス情報がありませんが、大丈夫ですか?

追加

forの中で f.nameとして取れているので、

javascript

1var e = document.createElement('source'); 2e.src = f.name; 3$("video").appendChild(e); 4```ってやれば足せます。でも最初にvideoの子要素を削除しておかないと、どんどん増えていきますよ。 5もう少し調べて頑張ってみてください。 6 7またFile APIのnameにパスが無い件ですが、htmlが置かれているディレクトリに直接ファイルが無いと、この方法では再生できません。

投稿2016/07/08 10:55

編集2016/07/08 11:17
shi_ue

総合スコア4437

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuzusenbei

2016/07/08 11:12

回答ありがとうございます。 <sourse src="sample.mp4> のコードをどのように書き換えればよいでしょうか? その他にも加筆するところはありますか? パス情報がなければフォルダの中に入っているファイルにアクセスできないという感じですかね...?
shi_ue

2016/07/08 11:19 編集

ちょっとヒントを書きました。 もう少し、DOMの操作を勉強したほうがいいですよ。要素を足したり、削除したりをどのようにやるのか、検索してみてください。いっぱい出てくると思います。
yuzusenbei

2016/07/08 12:29

ありがとうございます。 DOMについて少し調べてみました。 $("video").appendChild(e);でeはvideoタグ内で使える変数になるのでしょうか? <souse>内でどのように記述すればよいのかがわかりません...
shi_ue

2016/07/08 14:42

少し調べるのではなく、もっと調べたほうがいいです。 createElementとappendChildの意味が分かっていなければ、その後は出来ませんよ。
yuzusenbei

2016/07/09 15:20

appendChildを完全に理解できたわけではありませんがDOMについて調べ、実装することができました。今後のためにももっと調べていきます。 たくさん教えていただき、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問