html 5 video duration is not working with append

Question

I am appending the video data like this:

Html:  <div id="videoData"></div>

HTML after append:

<div id="videoData">
  <video width="75%" style="max-width: 60em;" autoplay="" controls="" class="center-block" id="video">
    <source type="video/mp4" src="http://amerytech.net/lc_production/uploads/course_videos/Probability/Probability1.mp4" style="max-width: 60em;"></source>
    <source type="video/ogg" src="http://amerytech.net/lc_production/uploads/course_videos/Probability/Probability1.mp4"></source>
    Probability1.mp4
  </video>
</div>

$.ajax({
  url: "check_result.php",
  method: "POST",
  // async:    false,
  data: {
    'action': 'playVideoCheck', 
    'course_id': course_id,
    'videoId' : videoId
  },
  dataType: "json",
  success: function (response) {
    if (response["success"] == true) {
     $("#success_message").show();
     $("#success_message").html(response["message"]);
     var path = response["videoPath"];

      $("#videoData").append('<video id="video" width="75%" class="center-block" controls autoplay style="max-width: 60em;"><source style="max-width: 60em;" src="' + path + '" type="video/mp4"/><source src="' + path + '" type="video/ogg"/>' + response["videoName"] + '</video>');
    } 
  }
});

After appending the video when I try to get the total time it is not coming, But it is coming fine when i give two alerts. so the problem is i want to get the video time after it fully appended how can i do that..?

$(document).ajaxStop(function () { 
  var video = document.querySelector('video');
  if (video) {
    //alert ("coming");   //when commented affecting bottom
    alert (video.duration); //when commented top line it is not working
  } else {
    alert ("not coming");
  }
});