Enable the JavaScript API

Enabling the JavaScript API is necessary in order to make your plugin interactive so, for example, when a viewer pauses the media player the plugin pauses as well.

3Play Media plugins work with a variety of video and audio players as well as open source media players. The modifications that are necessary to enable the JavaScript API between the player and plugin differ depending on which platform is being used to host the content.

Click on the name of the hosting platform below to view the modifications necessary to enable the JavaScript API between the plugin and player.

  1. Brightcove
  2. Kaltura
  3. Limelight
  4. Ooyala
  5. SoundCloud
  6. Vimeo
  7. Wistia
  8. YouTube

 

Brightcove

Add _all to the line of code (JavaScript file) at the beginning of the Brightcove embed code so it goes

FROM:

<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></sc...>

TO:

<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences_all.js"><...

Kaltura

Modify the flashvars parameter in the Kaltura embed code.

"flashvars": {

to:

"flashvars": {
        "streamerType": "rtmp",
        "externalInterfaceDisabled" : false
},

This will establish a connection to the Javascript API.  
Be sure to set allowScriptAccess to “always" if allowScripAccess is present in the Kaltura embed code.

Limelight Delve logo

Add the following code between the Limelight embed code and 3Play Media plugin embed code:

<script type="text/javascript">
function delvePlayerCallback(playerId,eventName,data){
}
</script>

Ooyala logo

This modification defines the Player ID as ooyala_player_handle 
With this necessary modification ooyala_player_handle will always entered in the Player ID field when creating a plugin for an Ooyala asset.

Within the Ooyala HTML embed code add:

window["ooyala_player_handle"] =

 after:

(function() {

SoundCloud logo

When working with SoundCloud add the following JavaScript file into the <body> of your HTML:

<script src="http://w.soundcloud.com/player/api.js"></script>

Vimeo logo

Add Vimeo JavaScript File somewhere on the page:

<script src="https://player.vimeo.com/api/player.js"></script>

 

Wistia logo

Add:

id="wistia_embed_id"

to your Wistia iFrame embed code is looks similar to the example below

<iframe src="http://fast.wistia.com/embed/iframe/62ac859063?videoWidth=640&videoHeight=360&controlsVisibleOnLoad=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="640" height="360" id="wistia_embed_id"></iframe>

After the 3Play Media plugin embed code add:

<script src="//fast.wistia.com/static/iframe-api-v1.js"></script>

After adding this JavaScript file to your HTML document it should look similar to the example below:

<iframe src="http://fast.wistia.com/embed/iframe/534cef38b4?controlsVisibleOnLoa..." allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="640" height="360" id="wistia_embed_id"></iframe>

<script src="http://static.3playmedia.com/p/projects/10013/files/78983/embed.js?..." type="text/javascript"></script>

<script src="//fast.wistia.com/static/iframe-api-v1.js"></script>

YouTube logo

When working with YouTube embed codes you can copy the template below and replace {YOUTUBE_ID} with your YouTube video's unique ID.

<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script
<iframe id="myytplayer" type="text/html" width="440" height="300" src="http://www.youtube.com/embed/{YOUTUBE_ID}?enablejsapi=1
frameborder="0"></iframe>

Though this template lacks a unique YouTube ID this embed code is different from the YouTube iFrame embed code in that 

> An id has been added defining this as id="myytplayer".
>?enablejsapi=1 has been added {YOUTUBE_ID }after /embed/
>The following line of code has been added to the template above as well <script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk