在iframe中查找课程并更新进度条

Question

我在一个页面中有多个视频。我想在用户点击单页中任何视频的播放按钮时更新进度条。

这是我的视频和进度条代码。

进度条标记

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0"
       aria-valuemin="0" aria-valuemax="100" style="width:0%">
  </div>
</div>

iframe的标记

<div>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/WnRp8FrXGXU"
          frameborder="0" allowfullscreen>
  </iframe>
</div>

进度条脚本

var videos_watched = 0;

$(".video_link").on("click", function() {
  if (!($(this).hasClass("viewed"))) {
    $(this).addClass("viewed");

    videos_watched = videos_watched + 1;
    $("#videos_watched span").html(videos_watched);

    var percent = videos_watched / 4 * 100;
    $(".progress-bar").css("width", percent + "%");
  }
});

$(".progress-bar span").html(percent);