Embedding the Captions Plugin Below Media Player

Let's say you want to embed a Captions Plugin with the following setup:

• You are using a YouTube player with ID "myytplayer"
• Your 3Play Public Collection has API Key ABCDEFG_12345
• You are working with 3Play file_id 12345
• You want the Captions Plugin to be 400px in width

<div id="captions_1"></div>
<script type="text/javascript">
  window.p3_async_init = function(){
    P3.init({
      "myytplayer" : {
        file_id: 12345,
        player_type: "youtube",
        captions: {
          target: "captions_1",
          width: "400px"
        }
      }
    },"ABCDEFG_12345");
  }
</script>
<script type="text/javascript" src="http://p3.3playmedia.com/p3.js"></script>

Embed the Captions Plugin Overlayed on Media Player

Let's say you want to embed a Captions Plugin with the following setup:

• You are using a YouTube player
• Your 3Play Public Collection has API Key ABCDEFG_12345
• You are working with 3Play file_id 12345
• You want the Captions Plugin to be overlayed on the media player

<div id="captions_1"></div>
<script type="text/javascript">
  window.p3_async_init = function(){
    P3.init({
      "myytplayer" : {
        file_id: 12345,
        player_type: "youtube",
        captions: {
          target: "captions_1",
          width: "400px",
          overlay: true
        }
      }
    },"ABCDEFG_12345");
  }
</script>
<script type="text/javascript" src="http://p3.3playmedia.com/p3.js"></script>

Nuts & Bolts

The following settings are available for the Captions Plugin:

Setting	Example Values	Default Value	Description
Setting	Example Values	Default Value	Description
file_id	12345, 765433	false	[Required] 3Play File ID that you are loading with the video. If platform_integration is set to true, the API will look for the video_id, instead of the 3Play File ID. File must be accessible from a public collection, corresponding to the API Key.
target	"transcript_1", "my_div"	false	[Only if overlay is false] Element ID that you want to render the Interactive Transcript into. For example, use "transcript_1" if you want the transcript inside <div id="transcript_1"></div>
width	300px, 500px	280px	Set the width of the Caption Plugin (height is not adjustable, and set to 40px)
skin	light	dark	Skin for the Captions Plugin. Defaults to dark skin.
overlay	true, false	false	Render the Caption Plugin as an overlay on top of the media player.
overlay_offset_x	-2, 10, 50	0 (centered)	Offset the Caption Plugin in the x-direction in overlay mode.
overlay_offset_y	-2, 10, 50	0 (bottom)	Offset the Caption Plugin in the y-direction in overlay mode.
overlay_offset_minimized_x	-2, 10, 50	0 (Right)	Offset the Caption Plugin when it is minimized in the x-direction, in overlay mode.
overlay_offset_minimized_y	-2, 10, 50	0 (Bottom)	Offset the Caption Plugin when it is minimized in the y-direction, in overlay mode.
minimize_onload	true, false	false	If true, the Caption Plugin will start in the minimized state, in overlay mode.
tracks	{English: "http://www.mydomain.com/path/to/english.srt", Swahili: "http://mydomain.com/path/to/swahili.srt"}	false	If defined, links to alternate tracks for the Caption Plugin.
cross_domain_loader	true, false	false	When setting tracks or your own hosted SRT files, set to true if you are loading cross-domain (JSONP setup is required)
cross_domain_dynamic_callback	true, false	false	When true, the Caption Plugin will automatically set the JSONP callback for the cross-domain loader.
menubar	true, false	true	If true, and tracks are defined for the Caption Plugin, the tracks menu will be visible to the user.
searchbar	true, false	true	If true, the user can search the captions track currently loaded in the Caption Plugin.
toggler_enabled	true, false	false	Enable a toggle button to show and hide captions, not in overlay mode.
toggler_show_text	Any HTML string	<span>Show Closed Captions</span>	UI for toggling closed captioning, when toggler_enabled is true, not in overlay mode.
toggler_hide_text	Any HTML string	<span>Hide Closed Captions</span>	UI for toggling closed captioning, when toggler_enabled is true, not in overlay mode.
toggler_hide_onload	true, false	false	If true, captions will be hidden when the page loads.