jQueryと外部HTMLファイルのload、video tagの質問です。


以下のようなScriptをHTML中に記述しました。
この場合、loadしたHTMLに含まれるvideo tag "#id_video"の
endedを取得できず、video再生終了時の"ended!"を表示できません。
このendedを取得する方法をご存知でしたら教えてください。
よろしくお願いします。

ちなみに"#id_video"のon clickは検出可能で、
"click!" を表示することはできています。
また、このscriptと同じHTMLに記述されている
video tag"id_video2"からのendedは取得できているので
"ended2!"も表示できています。


function load_movie(){

$('#load_area').load(html);
console.log("load!");

// $("#id_video").on("ended", function() {
$(document).on("ended","#id_video", function() {
console.log("ended!");
})

$(document).on("click","#id_video", function() {
console.log("click!");
})


$("#id_video2").on("ended", function() {
console.log("ended2!");
})
}

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2014/11/13 14:40:50
  • 終了:2014/11/14 11:36:09

ベストアンサー

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312014/11/13 18:52:32

ポイント500pt

 うーん、HTML5の仕様書を斜め読みした限り明記されてないんですが、endedイベントはバブリングしないんじゃないでしょうか。

浮上(bubble up)するものは特定のイベントだけです。浮上するイベントはこのプロパティが true になっています。なので、これを調べることにより、そのイベントが浮上するものかどうかを知ることができます。

event.bubbles - DOM | MDN

 ということですから、

$("#id_video").on("ended", function(e) {
  console.log(e.bubbles);
})

 ↑この結果がfalseなブラウザはイベントバブリングしない、つまりdocumentでendedイベントが起きないので、イベントリスナで拾えない、ということになるかと。

id:jurilog

なるほど! すべてのイベントが上位に伝わるわけではないのですね...おっしゃるとおり、video tagのendedを.bubblesでしらべたところ、OSXのsafariでもchromeでも見事にfalseでした...orz

2014/11/13 19:26:12
id:jurilog

Lhankor_Mhyさんにいただいたご回答で結論のようなので、期限前ですが終了させていただきたいと思います。ありがとうございました。loadしたHTMLの扱いがよくわからず、迷っていたので助かりました。

2014/11/14 11:42:47
  • id:Lhankor_Mhy
    補足お願いします。
    ・ソースコードの順番を
     
    $("#id_video2").on("ended", function() {
    console.log("ended2!");
    })
     
    $(document).on("ended","#id_video", function() {
    console.log("ended!");
    })
     
    に変更した時も"ended2!"だけが表示されますか?
  • id:jurilog
    ご確認ありがとうございます。

    はい。イベント定義の順番を変えても
    おなじ現象が起こります。

    よろしくお願いします。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません