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

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

解決済

3回答

1897閲覧

[HTML] [javascript] 2映像を同じウィンドウに映し出す方法について

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グッド

0クリップ

投稿2016/08/26 07:30

現在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 }

HTML

1 <video id="myvideo2" controls width="640" height="360"> 2 </video> 3 <input id="afile2" type="file" multiple>
<head>でこの二つのjavascriptのコードを読み込んでいるのですが、下に来た(後に読み込まれた?)コードの方だけが正常に動作します。 原因がわからない状況です。 どこで問題が発生しているか、もっと良い書き方があれば教えていただきたいです。 よろしくお願いいたします。
Diawel👍を押しています

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

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

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

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

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

kei344

2016/08/26 09:28

まだ質問が「受付中」になっていますが、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。
guest

回答3

0

iframeを使って、動画をひとつだけ流せるページを二つ表示してみてはいかがですか?

投稿2016/08/26 08:58

Diawel

総合スコア190

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

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

yuzusenbei

2016/08/26 09:06

ご回答ありがとうございます。 iframeについて見てみました。すごく使い勝手が良さそうなもので興味深いです。ローカルの動画を再生することも可能なのでしょうか??
Diawel

2016/08/26 09:08

というより、ひとつの動画を再生するだけのページを作り、それをiframeで二つ表示させればいいかと思いました。
yuzusenbei

2016/08/26 09:55

ありがとうございます。iframeは複製用で使うということですね。試してみます。
guest

0

まず、インデントがおかしいのでそこを何とかしましょう。コードエディタなどを使われたほうがいいと思います。

問題点:
0. FileReaderを使えるかの分岐をしているが、alertを出す以外意味が無い
普通ファイルAPIを使うであろう部分をif内に記述します。
0. window.onload = function(){} は2つのイベントを追加できない
2個目のイベントで上書きされます。addEventListener なら複数のイベントを追加可能です。
0. afile_changeHandler を同じスコープ内で2回書いている
今の書き方は、window.afile_changeHandler = function(){} と同じことをされています。
0. $$('#info') に相当するものが無い
たぶん質問文に書かれていないだけだと思いますが、一応指摘します。

JavaScript

1if ( window.File && window.FileReader ) { 2 //File APIが対応 3 4 //onchangeイベントを登録 5 window.onload = function(){ 6 $$( '#afile' ).addEventListener( 'change', afile_changeHandler ); 7 $$( '#afile2' ).addEventListener( 'change', afile_changeHandler ); 8 } 9 10 function afile_changeHandler( evt ){ 11 var files = evt.target.files; 12 var s = ''; 13 for( var i = 0; i < files.length; i++ ){ 14 var f = files[ i ]; // 複数ある場合最後の1つだけになっています(そういう仕様で問題なければ良い) 15 } 16 var tgt = ( evt.target.id.indexOf( '2' ) > -1 ); 17 var e = document.createElement('source'); 18 e.src = f.name; 19 $$( '#myvideo' + ( tgt ? '2': '' ) ).appendChild( e ); 20 } 21} else { 22 alert( 'File APIをサポートしていません' ); 23} 24 25function $$( id ) { 26 return document.querySelector( id ); 27}

投稿2016/08/26 09:27

kei344

総合スコア69364

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

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

yuzusenbei

2016/08/26 10:03

丁寧な回答ありがとうございます。一応解決はしておりましたが理解が曖昧だったのですごく参考になります。
guest

0

自己解決

javascript

1window.onload = function(){};

を複数回読み込むことに問題がありました。

javascript

1$(function(){});

jquerhyを用いることでそれぞれの関数を読み込むことが可能になり、解決いたしました。
参考: http://qiita.com/furu-s/items/72e9d202b78016e8adf2

投稿2016/08/26 09:00

yuzusenbei

総合スコア19

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問