在Plyr视频播放器上切换信号源

Question

我正在使用this method来切换Plyr视频播放器的源。

该示例通常可用，但是我想使用来自API的网址动态加载<li>元素。基本上我要做的是：

for (var i = 0; i < response.data.courses[0].videos.length; i++) {
    $("#playlist-list" ).append("<li class='player-src' 
    data-type='mp4' data-src='"+vidsUrl+"'>"+licontentstuff+"</li>");
}

这使我基本上与示例中的元素相同。 You can see the elements here (Top li from example, bottom loaded from ajax). 他们什么也没做。

这是示例代码的关键：

$(document).ready(() => {

   $('.player-src').on('click', function () {

      src = $(this).data("src");
      type = 'video/' + $(this).data("type");
      poster = $(this).data("poster")||"";

      player.source = {
        type: 'video',
        title: 'Example title',
        sources: [
         {
              src: src,
              type: type,
              size: 720
          }
        ],
        poster: poster
      };

     player.play();

   });
})

我的猜测基本上是我加载的元素加载得太晚了，并且无法被该函数识别，尽管我不知道为什么会这样。老实说，请注意，我没有完全理解示例的代码。