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

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

ただいまの
回答率

90.37%

  • JavaScript

    21585questions

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

  • jQuery

    8580questions

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

  • HTML5

    5459questions

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

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 752

yuzusenbei

score 13

現在2映像を同じウィンドウで再生できるようにするプログラムを作成しております。
videoタグとfileapiを用いて、一つの映像を再生することは可能なのですが2映像以上を再生できません。

<video id="myvideo" controls width="640" height="360">     
            </video>    
    <input id="afile" type="file" multiple>


HTMLでファイル情報を読み込むためのボタンを作成し

if(window.File && window.FileReader) {
            //File APIが対応
        }
        else{
            alert("File APIをサポートしていません");
        }



        //onchangeイベントを登録
        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];
                }

                $$('#info').innerHTML = s;
                    var e = document.createElement('source');
                    e.src = f.name;
                   $$("#myvideo").appendChild(e);

        }                   

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


こちらでファイル名を取得しています。

ファイル名をsrc属性としてvideoタグに渡し再生しているという状況です。

同じようにボタンをもう一つ用意してid等が対応するように下記のように書き換えました。

if(window.File && window.FileReader) {
            //File APIが対応
        }
        else{
            alert("File APIをサポートしていません");
        }



        //onchangeイベントを登録
        window.onload = function(){
            $$("#afile2").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;
                    var e = document.createElement('source');
                    e.src = f.name;
                   $$("#myvideo2").appendChild(e);

        }                   

        function $$(id) {
            return document.querySelector(id);
        }
<video id="myvideo2" controls width="640" height="360">  
            </video>    
    <input id="afile2" type="file" multiple>

<head>でこの二つのjavascriptのコードを読み込んでいるのですが、下に来た(後に読み込まれた?)コードの方だけが正常に動作します。
原因がわからない状況です。
どこで問題が発生しているか、もっと良い書き方があれば教えていただきたいです。
よろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/08/26 18:28

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

    キャンセル

回答 3

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/26 18:06

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

    キャンセル

  • 2016/08/26 18:08

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

    キャンセル

  • 2016/08/26 18:55

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

    キャンセル

check解決した方法

0

window.onload = function(){};


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

$(function(){});


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

問題点:

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

    //onchangeイベントを登録
    window.onload = function(){
        $$( '#afile'  ).addEventListener( 'change', afile_changeHandler );
        $$( '#afile2' ).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 ]; // 複数ある場合最後の1つだけになっています(そういう仕様で問題なければ良い)
        }
        var tgt = ( evt.target.id.indexOf( '2' ) > -1 );
        var e = document.createElement('source');
        e.src = f.name;
        $$( '#myvideo' + ( tgt ? '2': '' ) ).appendChild( e );
    }
} else {
    alert( 'File APIをサポートしていません' );
}

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/26 19:03

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

    キャンセル

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

  • ただいまの回答率 90.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21585questions

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

  • jQuery

    8580questions

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

  • HTML5

    5459questions

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