Ooyala samples

Interactivity on top of Ooyala

Adways builds the interactivity on top of an Ooyala player already existing

<script type="text/javascript" src="//dj5ag5n6bpdxo.cloudfront.net/libs/interactive/loader.js"></script>
<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 type="text/javascript">
    var experience = new adways.interactive.Experience();
    experience.setPlayerClass('ooyala');
    experience.setPublicationID("mpNHyTH");
    window.onCreate = function(player) {
        experience.setPlayerAPI(player);
        experience.setDelegateParam("playerDOMElement", document.getElementById(player.getElementId()));
        experience.load();
    };
    var playerParam = {'pcode': 'BjamMyOjCX1HvcoctnXC89ejRA3I', 'playerBrandingId': '98d0c0db6595441d960116b69f5baef4',
        'skin': {'config': '//player.ooyala.com/static/v4/stable/latest/skin-plugin/skin.json'},
        'wmode': 'transparent', 'onCreate': window.onCreate};
    OO.ready(function() {
        window.pp = OO.Player.create('container', '9pa212dTpQvgZyiW-DpV-3osZ3OWryp2', playerParam);
    });
</script>

Adways Ooyala Plugin

The plugin can read the video metadatas to get an Adways publication ID

<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"/>

<script type="text/javascript" src="//dj5ag5n6bpdxo.cloudfront.net/libs/plugins/ooyala.js"></script>

<div id='container-2' style='width:640px;height:480px;'></div>
<script type="text/javascript">
    var playerParam = {'pcode': 'BjamMyOjCX1HvcoctnXC89ejRA3I', 'playerBrandingId': '98d0c0db6595441d960116b69f5baef4',
        'skin': {'config': '//player.ooyala.com/static/v4/stable/latest/skin-plugin/skin.json'},
        'wmode': 'transparent'};
    OO.ready(function() {
        window.pp = OO.Player.create('container-2', '9pa212dTpQvgZyiW-DpV-3osZ3OWryp2', playerParam);
    });
</script>

How to set the metadata on an Ooyala content?

See this Adways help section: How to use Ooyala with Adways?