Javascript 在页面上动态嵌入多个Ooyala V4播放器

我有一个场景，我需要在一个带有动态参数的页面上实现多个Ooyala V4播放器

应该是这样的

<div class="video" data-video-id="vid1" data-player-id="player1" data-pcode="pcode1">
  <div id="container1" style="width:100%; height: auto;"></div>

  <script>
    var vid = $('.video').data('video-id');
    var pid = $('.video').data('player-id');
    var pco = $('.video').data('pcode');

    var playerParam = {
      'pcode': pco,
      'playerBrandingId': pid,
      'skin': {
        'config': '//player.ooyala.com/static/v4/stable/latest/skin-plugin/skin.json'
      }
    };
    OO.ready(function() {
      window.pp = OO.Player.create('container1', vid, playerParam);
    });

  </script>
</div>

<div class="video" data-video-id="vid2" data-player-id="player2" data-pcode="pcode2">
  <div id="container2" style="width:100%; height: auto;"></div>

  <script>
    var vid = $('.video').data('video-id');
    var pid = $('.video').data('player-id');
    var pco = $('.video').data('pcode');

    var playerParam = {
      'pcode': pco,
      'playerBrandingId': pid,
      'skin': {
        'config': '//player.ooyala.com/static/v4/stable/latest/skin-plugin/skin.json'
      }
    };
    OO.ready(function() {
      window.pp = OO.Player.create('container2', vid, playerParam);
    });

  </script>
</div>

<div class="video" data-video-id="vid3" data-player-id="player3" data-pcode="pcode3">
  <div id="container3" style="width:100%; height: auto;"></div>

  <script>
    var vid = $('.video').data('video-id');
    var pid = $('.video').data('player-id');
    var pco = $('.video').data('pcode');

    var playerParam = {
      'pcode': pco,
      'playerBrandingId': pid,
      'skin': {
        'config': '//player.ooyala.com/static/v4/stable/latest/skin-plugin/skin.json'
      }
    };
    OO.ready(function() {
      window.pp = OO.Player.create('container3', vid, playerParam);
    });

  </script>
</div>

var vid=$（'.video'）.data（'video-id'）；
变量pid=$（'.video'）.data（'player-id'）；
变量pco=$（'.video'）。数据（'pcode'）；
变量playerParam={
“pcode”：pco，
“playerBrandingId”：pid，
“皮肤”：{
“config”：“//player.ooyala.com/static/v4/stable/latest/skin plugin/skin.json”
}
};
OO.ready（函数（）{
window.pp=OO.Player.create（'container1'，vid，playerParam）；
});
var vid=$（'.video'）.data（'video-id'）；
变量pid=$（'.video'）.data（'player-id'）；
变量pco=$（'.video'）。数据（'pcode'）；
变量playerParam={
“pcode”：pco，
“playerBrandingId”：pid，
“皮肤”：{
“config”：“//player.ooyala.com/static/v4/stable/latest/skin plugin/skin.json”
}
};
OO.ready（函数（）{
window.pp=OO.Player.create（'container2'，vid，playerParam）；
});
var vid=$（'.video'）.data（'video-id'）；
变量pid=$（'.video'）.data（'player-id'）；
变量pco=$（'.video'）。数据（'pcode'）；
变量playerParam={
“pcode”：pco，
“playerBrandingId”：pid，
“皮肤”：{
“config”：“//player.ooyala.com/static/v4/stable/latest/skin plugin/skin.json”
}
};
OO.ready（函数（）{
window.pp=OO.Player.create（'container3'，vid，playerParam）；
});

这里的数据视频id、数据播放器id、数据pcode和id=“container1”对于每个div都是唯一的，应该传递给div中的每个脚本

我没有任何想法来实现这一点。有人能帮我吗

提前谢谢！

---

干杯

还有一个问题：到底什么东西不起作用？从div中检索的数据似乎与属性的名称不同；例如，data（'video-id'）vs'data video-id…您好，我需要var vid、var pid和var pco值应该是每个div的值。属性是正确的，因为我正在使用data（）。谢谢你的回复。