2017-04-24 11 views
0

私は以前にインラインoncanplayスクリプトを持っていた動的に追加されたビデオ要素を持っています。jQueryでhtml5ビデオcanplayイベント

<video id="videoCurrent" type="video/mp4" oncanplay="displayVideoChapters(this);" controls> 

video要素が静的divの

<div id="videoDisplay"> </div> 

に追加された私は今<head>

$(document).ready(function() { 
    $("#videoDisplay").on('canplay', 'video#videoCurrent', function() { 
    console.log(this); 
    }); 
}); 
にリンクされたスクリプトファイルからjQueryを使ってvideo要素に canplayイベントを添付しようとしています

しかし、何も起こりません。私は他のイベントを試みました。 loadstart,pause,playと同じ結果が得られました。 mouseoverは私がconsole.log(これ)を引き起こすことができる唯一のイベントです。 私は何を理解していないのですか?

答えて

0

私は、サムネイル画像リンクから動的ビデオプレーヤーを取得するコールバック関数にcanplayイベントを追加することでこれを解決しました。

$('#staticVideoPlayerContainer').on('click', 'a.videoUrl', function() { 
    $.get('url', function(data) { 
     $("#videoDisplay").html(data);     //Dynamic video player is added 
     $("#videoCurrent")[0].oncanplay = function() { //Event listener attached 
      console.log(this);       //Logs video on canplay 
     } 
    }); 
}); 
1

私はこのcanplayイベントのW3Cの学校ではなく、プレーンなJavaScriptで見たようにjqueryのは、「canplay」イベントを持っているかどうかを知りません:

var vid = document.getElementById("videoCurrent"); 
vid.oncanplaythrough = function() { 
    console.log("Can play through video without stopping"); 
    vid.play() 
}; 

あなたが最初の最初の部分で試してみてくださいそれがうまくいくかどうかを確認してください。また、JavaScriptでビデオを再生するために.play()関数が使用されていることを思い出してください。

+0

ああ、あなたが正しいと思われる、https://api.jquery.com/category/events/はplay()イベントをリストしません。 – Thomas

関連する問題