After adding a video tag by js - events doesn't work (jQuery)

Question

I have this video player code (simplistically)

<div class="videoPlayer">
  <video width="300" height="200">
    <source src="480p.mp4">
  </video>
  <div>...myControls...</div>
</div>

And by this jQuery code I take its events.

$(document).ready(function(){
  $('video').on('canplay',function(){...});
  $('video').on('timeupdate',function(){...});
  $('video').on('progress',function(){...});
  $('video').on('ended',function(){...});
});

Аnd it works. But when I want to add HTML code with jQuery, the following way.

HTML

<div class="myVideo" data-src="video/480p.mp4"></div>

JS

if($(".videoPlayer").length>0){
  $('.videoPlayer').each(function(){
      var th=$(this),
      vidSrc=th.attr('data-src'),
      playerHTML='<div class="videoPlayer videoPlayerNew"><video width="300" height="200"><source src='+vidSrc+'></video><div>...myControls...</div></div>';
      th.replaceWith(playerHTML);
      $(".videoPlayerNew").find("video").load();
      $(".videoPlayerNew").removeClass("videoBlockNew");
  });
}

canplay, timeupdate, progress and ended events no work.

The remaining properties remain working (play, stop, ...).

How can I get these events (canplay, timeupdate, progress, ended).