現在2映像を同じウィンドウで再生できるようにするプログラムを作成しております。
videoタグとfileapiを用いて、一つの映像を再生することは可能なのですが2映像以上を再生できません。
HTML
1 <video id="myvideo" controls width="640" height="360"> 2 </video> 3 <input id="afile" type="file" multiple>
HTMLでファイル情報を読み込むためのボタンを作成し
javascript
1if(window.File && window.FileReader) { 2 //File APIが対応 3 } 4 else{ 5 alert("File APIをサポートしていません"); 6 } 7 8 9 10 //onchangeイベントを登録 11 window.onload = function(){ 12 $$("#afile").addEventListener( 13 'change', afile_changeHandler); 14 } 15 16 function afile_changeHandler(evt){ 17 var files = evt.target.files; 18 var s = ""; 19 for(var i = 0; i < files.length; i++){ 20 var f = files[i]; 21 } 22 23 $$('#info').innerHTML = s; 24 var e = document.createElement('source'); 25 e.src = f.name; 26 $$("#myvideo").appendChild(e); 27 28 } 29 30 function $$(id) { 31 return document.querySelector(id); 32 }
こちらでファイル名を取得しています。
ファイル名をsrc属性としてvideoタグに渡し再生しているという状況です。
同じようにボタンをもう一つ用意してid等が対応するように下記のように書き換えました。
javascript
1if(window.File && window.FileReader) { 2 //File APIが対応 3 } 4 else{ 5 alert("File APIをサポートしていません"); 6 } 7 8 9 10 //onchangeイベントを登録 11 window.onload = function(){ 12 $$("#afile2").addEventListener( 13 'change', afile_changeHandler); 14 } 15 16 function afile_changeHandler(evt){ 17 var files = evt.target.files; 18 var s = ""; 19 for(var i = 0; i < files.length; i++){ 20 var f = files[i]; 21 /* s += 22 'name;' + escape(f.name); + '<br>' + 23 'size;' + f.size + ' Bytes<br>' + 24 'type;' + f.type + '<br>' + 25 'date;' + f.lastModifiedDate + '<hr>'; 26 */ 27 } 28 29 $$('#info').innerHTML = s; 30 var e = document.createElement('source'); 31 e.src = f.name; 32 $$("#myvideo2").appendChild(e); 33 34 } 35 36 function $$(id) { 37 return document.querySelector(id); 38 }
<head>でこの二つのjavascriptのコードを読み込んでいるのですが、下に来た(後に読み込まれた?)コードの方だけが正常に動作します。 原因がわからない状況です。 どこで問題が発生しているか、もっと良い書き方があれば教えていただきたいです。 よろしくお願いいたします。HTML
1 <video id="myvideo2" controls width="640" height="360"> 2 </video> 3 <input id="afile2" type="file" multiple>
回答3件
あなたの回答
tips
プレビュー