If you don't find an answer, please click here to post your question.
Reply
Occasional Contributor
Posts: 2
Registered: ‎02-04-2018

Embed code doesn't support multiple videos

Hi guys,

In Ooyala player version 4 we found the embed code doesn't work when there are mutiple videos on the page, the example as follow:

<!DOCTYPE html>
<html>
<body>
<!-- This embed code automatically includes and packages standard Player V4 plugins. If you need a different mix of plugins, please use the Advanced embed option. To see the included plugins, please refer to this doc: http://help.ooyala.com/video-platform/concepts/pbv4_release_notes.html -->
<script src="//player.ooyala.com/core/[Player_ID]"></script>
<!-- The following div will contain the instantiated player, and is identified by id -->
<div id='container_1517535575' ></div>
<!-- Player parameter modify some basic player behaviors and looks -->
<script>
var playerParam = {
'autoplay':false,
'loop':false
};
OO.ready(function() {window.pp = OO.Player.create('container_1517535575', '[Video_ID_1]', playerParam);});

</script>

 

<script src="//player.ooyala.com/core/[Player_ID]"></script>
<!-- The following div will contain the instantiated player, and is identified by id -->
<div id='container_1517535576' ></div>
<!-- Player parameter modify some basic player behaviors and looks -->
<script>
var playerParam = {
'autoplay':false,
'loop':false
};
OO.ready(function() {window.pp = OO.Player.create('container_1517535576', '[Video_ID_2]', playerParam);});

</script>
</body>
</html>

What we found is there is a <div class="oo-player-skin"> tag being add twice. The result of that is the video is not clickable anymore.

 

Is this an issue in Ooyala, or if I miss anything?

 

Cheers,

Yilun

 

 

 

 

 

Ooyalan
Posts: 5
Registered: ‎01-22-2017

Re: Embed code doesn't support multiple videos

[ Edited ]

Hi Yilun,

 

Thanks for contacting us!

 

You can try the following code and it should help in supporting multiple videos.

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script language="javascript" src="http://player.ooyala.com/static/v4/production/latest/core.js"></script>
    <script src="http://player.ooyala.com/static/v4/production/latest/video-plugin/main_html5.js"></script>
    <script src="http://player.ooyala.com/static/v4/production/latest/skin-plugin/html5-skin.min.js" ></script> 
    <link  rel="stylesheet"  href="http://player.ooyala.com/static/v4/production/latest/skin-plugin/html5-skin.min.css"></script>
</head>
<body>
 <div id='container1' style='text-align:right;display:block'>
      <div id='player1' style='width:480px;height:360px;display:inline-block'></div>
    </div>
    <div id='container2' style='text-align:topLeft;display:block'>
      <div id='player2' style='width:480px;height:360px;display:inline-block'></div>
    </div>
    <div id='OOYALA_TEST’></div>
</body>
</html>
<script>
      OO.ready(function() {
        window.pp1 = OO.Player.create('player1', ‘EMBED_CODE’, {
          "playerBrandingId”:”PLAYER_ID”,
          "pcode”:”YOUR_PCODE”,
          "skin":{
          "config":"https://player.ooyala.com/static/v4/stable/4.20.8/skin-plugin/skin.json"}]
        }
        });

        window.pp2 = OO.Player.create('player2', ‘EMBED_CODE’, {
          "playerBrandingId":"PLAYER_ID",
          "pcode":"YOUR_PCODE",
          "skin":{
          "config":"https://player.ooyala.com/static/v4/stable/4.20.8/skin-plugin/skin.json"}]
        }
        });
      });
</script>

 

 

Please let us know how it goes! 

 

Thanks,
Vidya