3Play Plugin: Enable the JavaScript API

Avatar
David Zylber
Follow

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.

NOTE: The examples below do not include the 3Play Plugin embed code unless necessary for demonstrative purposes.

  1. Able Player
  2. Brightcove
  3. Flowplayer
  4. HTML5
  5. Kaltura
  6. Limelight
  7. Ooyala
  8. SoundCloud
  9. SoundManager2
  10. Viddler
  11. VIDEOJS
  12. Vimeo
  13. Wistia
  14. YouTube

 

Able Player logo

Copy the Video Target from your 3Play Plugin Template and add it as the ID to <video> tag within the Able Player code similarly to the example below.

<video id="tpm-plugin-abcdef-0987654321" preload="auto" width="480" height="360" poster="../media/wwa.jpg" data-able-player playsinline>
<source type="video/mp4" src="//pathto/myawesomevideo.mp4"/>
</video>

Brightcove

Copy the Video Target from your 3Play Plugin Template and add it to the Advanced Brightcove video embed code similarly to the example below.

The Brightcove Advanced video embed code should go from looking like this...

<video data-video-id="1234"
data-account="4321"
data-player="default"
data-embed="default"
data-application-id
class="video-js"
controls
width="720"
height="480"></video>
<script src="//players.brightcove.net/1234/default_default/index.min.js"></script>

to looking like this...

<video
id="tpm-plugin-abcdef-0987654321"
data-video-id="1234"
data-account="4321"
data-player="default"
data-embed="default"
data-application-id
class="video-js"
controls
width="720"
height="480"></video>
<script src="//players.brightcove.net/1234/default_default/index.min.js"></script>

Flowplayer logo

Add the Video Target from the 3Play Media Plugin Template twice to the Flowplayer embed code so it looks similar to the example below...

<div id="tpm-plugin-abcdef-0987654321"></div>

<script>
flowplayer('#tpm-plugin-abcdef-0987654321', {
splash: 'https://flowplayer.com/media/img/demos/functional@x2.jpg',
aspectRatio: "12:5",
key: '$77068834645103',
clip: {
hlsQualities: [-1, 1, 3, 6, 7],
sources: [
{ type: 'application/x-mpegurl', src: 'https://edge.flowplayer.org/functional.m3u8' },
{ type: 'video/mp4', src: 'https://edge.flowplayer.org/functional.mp4' }
]
}
})
</script>

 

HTML5 logo

Copy the Video Target from your 3Play Plugin Template and define it as the ID within the HTML5 embed code similarly to the example below...

<video id="tpm-plugin-abcdef-0987654321" width="400" controls>
<source src="http://pathto/myawesomevideo.mp4" type="video/mp4">
</video>

 

Kaltura

Replace the div id and tagetId from the Kaltura Dynamic embed with the Video Target ID from the 3Play Media plugin template. Please note that the Kaltura Dynamic embed will need to be used.

So the Kaltura embed code should be changed from this:

<script src="http://cdnapi.kaltura.com/p/1234/sp/4321/embedIframeJs/uiconf_id/1234/partner_id/1234321"></script>

<div id="kaltura_player_01234" style="width: 560px; height: 395px;"></div>
<script>
kWidget.embed({
"targetId": "kaltura_player_01234",
"wid": "_1234",
"uiconf_id": 43210,
"flashvars": {
"streamerType": "auto"
},
"cache_st": 12341234,
"entry_id": "1_abcd987"
});
</script>

to looking like this...

<script src="http://cdnapi.kaltura.com/p/1234/sp/4321/embedIframeJs/uiconf_id/1234/partner_id/1234321"></script>
<div id="tpm-plugin-abcdef-0987654321" style="width: 560px; height: 395px;"></div>
<script>
kWidget.embed({
"targetId": "tpm-plugin-abcdef-0987654321",
"wid": "_1234",
"uiconf_id": 43210,
"flashvars": {
"streamerType": "auto"
},
"cache_st": 12341234,
"entry_id": "1_abcd987"
});
</script>

Limelight Delve logo

No modifications need to be taken to embed a 3Play Plugin along with a Limelight player on a webpage! Simply paste the 3Play Media plugin embed code below the Limelight HTML player embed code.

The Limelight embed code should look similar to the example below...

<div id="limelight_player_1234"></div>
<script src="//video.limelight.com/player/limelightjs-player.js"></script>
<script>LimelightPlayerUtil.embed({"height":576,"playerForm":"Player","playerId":"limelight_player_1234","width":1024,"mediaId":"abcdefghijklmno12345"});</script> 

Ooyala logo

Ooyala V4

Replace the div id and the 2nd instance of container_123456 from the Ooyala embed code with the Video Target ID from the 3Play Media plugin template.

In addition to those two changes, add this snippet of code to the Ooyala HTML embed code:

window["{3Play_VIDEO_TARGET_HERE}"] =

 after:

(function() {

The published Ooyala embed code should look similar to the example below...

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

window.pp = OO.Player.create('tpm-plugin-abcdef-0987654321', 'VnZXNmZjE6sikyXWeE6uJu9XXOGCtXRl', playerParam);});
</script>

Ooyala V3

For Ooyala V3 embeds, the steps are the same as above however the container_ within the Ooyala V3 embed code will display as ooyalaplayer_1234556. Replace the ooyalaplayer_ with the 3Play Video Target as well as add window["{3Play_VIDEO_TARGET_HERE}"] = to the Ooyala embed code.

SoundCloud logo

Copy the Video Target from your 3Play Plugin template and add it to the SoundCloud embed code. Additionally add this line of code to the <body> of the HTML:

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

Once these two modifications have been made the SoundCloud embed code should look similar to the example below:

<iframe id="tpm-plugin-abcdef-0987654321" width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/450895584&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
<script src="http://w.soundcloud.com/player/api.js"></script>

 

SoundManager2 logo
Copy the Video Target from your 3Play Plugin template and add it to SoundManager2 embed code similarly to the example below...

<script src="/path/to/soundmanager2.js"></script>
<script>
soundManager.setup({
url: '/path/to/swf-files/',
onready: function() {
var mySound = soundManager.createSound({
id: 'tpm-plugin-abcdef-0987654321',
url: '/path/to/an.mp3'
});
mySound.play();
},
ontimeout: function() {
// Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
}
});
</script>

Viddler logo

Copy viddler_player_handler from the Viddler Arpeggio embed code and paste this string into the Video Target field within the 3Play Plugin Builder interface and copy the updated plugin code to generate the 3Play Plugin embed code that contains this string.

<div id="my-player"></div>
<script type="text/javascript" src="//static.cdn-ec.viddler.com/js/arpeggio/v3/build/main-built.js"></script>
<script type="text/javascript">
var viddler_player_handler = new ViddlerEmbed({
videoId: '5f8b3844',
width: '600px',
target: '#my-player'
}); </script>
</div>

<div id='3p-plugin-target-1234abcd' class='p3sdk-target'></div><script type='text/javascript' src='//plugin.3playmedia.com/ajax.js?embed=ajax&height=500px&itx=1&itx_collapse_on_load=0&itx_collapsible=0&itx_downloadable=1&itx_highlight_by_caption_frames=0&itx_keywords=0&itx_light_scroll=0&itx_multi_text_track=0&itx_progress_bar=0&itx_progressive_tracking=0&mf=1347721&p=20419&player_type=viddler&plugin_skin=light&target=3p-plugin-target-1347721-5h12vdoj&vembed=0&video_target=viddler_player_handler&width=500px'></script>

videoJS logo

Use the Video Target from your 3Play Media Plugin Template to define the ID within the VIDEOJS embed code similarly to the example below...

<head>
<link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
</head>

<body>
<video id="tpm-plugin-abcdef-0987654321" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="MY_VIDEO.mp4" type='video/mp4'>
<source src="MY_VIDEO.webm" type='video/webm'> type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="https://vjs.zencdn.net/7.0.3/video.js"></script>
</body>

Vimeo logo

 

Modify the Vimeo embed code by adding id="{3Play_Video_Target}" after <iframe.
Once the Vimeo video embed code has been modified it should look similar to the example below:

<div style="padding:56.25% 0 0 0;position:relative;"><iframe id="tpm-plugin-abcdef-0987654321" src="https://player.vimeo.com/video/272436863" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

Wistia logo

Add the Video Target from your 3Play Plugin template to the Wistia iFrame embed code:

id="{3Play_VIDEO_TARGET_HERE}"

So when complete the code should look similar to example below:

<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><iframe id="tpm-plugin-abcdef-0987654321" src="https://fast.wistia.net/embed/iframe/lt4nvd?seo=false&videoFoam=true" title="Wistia video player" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="100%" height="100%"></iframe></div></div>
<script src="https://fast.wistia.net/assets/external/E-v1.js" async></script>

<div id='3p-plugin-target-abcdef-0987654321' class='p3sdk-target'></div><script type='text/javascript' src='//plugin.3playmedia.com/ajax.js?embed=ajax&height=500px&itx=1&itx_collapse_on_load=0&itx_collapsible=0&itx_downloadable=1&itx_highlight_by_caption_frames=0&itx_keywords=0&itx_light_scroll=0&itx_multi_text_track=0&itx_progress_bar=0&itx_progressive_tracking=0&mf=2595760&p=26985&player_type=wistia&plugin_skin=light&target=3p-plugin-target-2595760-zy3fnhbm&vembed=0&video_target=tpm-plugin-abcdef-0987654321&width=500px'></script>

YouTube logo

Add the following line of code to the beginning of the YouTube video embed code:

<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>

Add the 3Play Video Target from your plugin template id="{3Play_Video_Target}" to the YouTube video embed code.
Add ?enablejsapi=1 to end of the src link within the YouTube video embed code.

Once these 3 modifications have been made to the YouTube video embed code, the final product should now look similar to this example...

<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script> 
<iframe id="tpm-plugin-abcdef-0987654321" type="text/html" width="440" height="300" src="http://www.youtube.com/embed/abcd1234?enablejsapi=1" 
frameborder="0"></iframe>

<div id='3p-plugin-target-abcdef-0987654321"' class='p3sdk-target'></div><script type='text/javascript' src='//plugin.3playmedia.com/ajax.js?embed=ajax&height=500px&itx=1&itx_collapse_on_load=0&itx_collapsible=0&itx_downloadable=1&itx_highlight_by_caption_frames=0&itx_keywords=0&itx_light_scroll=0&itx_multi_text_track=0&itx_progress_bar=0&itx_progressive_tracking=0&mf=2344037&p=26985&player_type=youtube&plugin_skin=light&target=3p-plugin-target-2344037-7rp2vdfl&vembed=0&video_id=lfZDeE6wQLs&video_target=tpm-plugin-abcdef-0987654321"&width=500px'></script>

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk