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

Question

我有一个场景需要在具有动态参数的页面上实现多个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>

这里是data-video-id，data-player-id，data-pcode和id =＆＃34; container1＆＃34;对于每个div都是唯一的，它应该传递给div中的每个脚本。

我无法实现这一目标。有人可以帮我吗？

提前致谢！ 干杯！