To start integrating your Ooyala V4 player into the *Plugin SDK, click on your video within the Ooyala backlot (under the manage tab) and click on the embed tab at near the bottom of the screen. Find the HTML5 v4 embed code and click “Copy.” This will copy a chunk of JavaScript and HTML code that should look something like this:
<!DOCTYPE html> <script src="//player.ooyala.com/static/v4/stable/latest/core.min.js"></script><script src="//player.ooyala.com/static/v4/stable/latest/video-plugin/main_html5.min.js"></script><script src="//player.ooyala.com/static/v4/stable/latest/skin-plugin/html5-skin.min.js"></script><script src="//player.ooyala.com/static/v4/stable/latest/video-plugin/bit_wrapper.min.js"></script><script src="//player.ooyala.com/static/v4/stable/latest/video-plugin/osmf_flash.min.js"></script><link rel="stylesheet" href="//player.ooyala.com/static/v4/stable/latest/skin-plugin/html5-skin.min.css"/><div id='container' style='width:640px;height:480px;'></div><script> var playerParam = {'pcode':'gzYWo6WjQb-ME6DXK-evfOpU10JK','playerBrandingId':'ODFjYmU3NmNiN2VkNDg1YjNlMGMwYTIz','skin': {'config': '//player.ooyala.com/static/v4/stable/latest/skin-plugin/skin.json'} };OO.ready(function() { window.pp = OO.Player.create('container', 'IwYTJhNDE6FadS6DCqzHzG3Nps40eHwM', playerParam); }); </script>
You can throw all of that code inside of the p3sdk-container div. Player_type should be set to "ooyala_v4". The window.pp variable (highlighted in pink above) must be changed to window["ooyala_player"] & the player_id must be changed to ooyala_player. Your final code should look something like the following:
<div class="p3sdk-container p3sdk-debug-not" player_id="ooyala_player" player_type="ooyala_v4">
<script src="http://player.ooyala.com/static/v4/stable/latest/core.min.js"></script>
<script src="http://player.ooyala.com/static/v4/stable/latest/video-plugin/main_html5.min.js"></script>
<script src="http://player.ooyala.com/static/v4/stable/latest/skin-plugin/html5-skin.min.js"></script>
<script src="http://player.ooyala.com/static/v4/stable/latest/video-plugin/bit_wrapper.min.js"></script>
<script src="http://player.ooyala.com/static/v4/stable/latest/video-plugin/osmf_flash.min.js"></script>
<link rel="stylesheet" href="http://player.ooyala.com/static/v4/stable/latest/skin-plugin/html5-skin.min.css"/>
<div id='container' style='width:640px;height:482px;'></div>
<script> var playerParam = {'pcode':'gzYWo6WjQb-ME6DXK-evfOpU10JK','playerBrandingId':'ODFjYmU3NmNiN2VkNDg1YjNlMGMwYTIz','skin': {'config': 'http://player.ooyala.com/static/v4/stable/latest/skin-plugin/skin.json'}};
OO.ready(function() {
window["ooyala_player"] = OO.Player.create('container', 'xxcjRkNDE6CuzqDRfUDXmGN_syJ6oxbw', playerParam); }); </script><div class="p3sdk-interactive-transcript" remote-src = "http://static.3playmedia.com/p/projects/10013/files/78983/transcript.html" light_scroll="true">
<div class="p3sdk-interactive-transcript-content"><script src="http://p3.3playmedia.com/p3sdk.current.js"></script>
</div></div>
*The Plugin SDK is sometimes referred to as "P3SDK"