JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://player.ooyala.com/v3/b02b206743c64734828648c0e5879d69?platform=html5-priority"></script>
working (ugly) chromeless example:
<div id='ooyalaplayer' style='width:640px;height:360px'></div>

JavaScript

/**
* ©2012-2013 Ooyala, Inc.All Rights Reserved.*/
// sampleV3module.js
// Each custom module must be defined using the OO.plugin method
// The first parameter is the module name
// The second parameter is a factory function that will be called by
// the player to create an instance of the module. This function must
// return a constructor for the module class (see the end of this example)

OO.plugin("SampleUIModule", function (OO, _, $, W) {
    /**
     * Custom UI Sample Module
     * Modules developed using this template can later be embedded 
     * within Ooyala's™ player for syndication.
     *
     * A sample UI module to demonstrate how to build a custom UI
     * instead of loading our default UI. This module contains a 
     * simple play/pause button and scrubber bar. 
     * Parameters:
     * OO, namespace for PlayerV3
     * _, a reference to underscore.js lib.
     * $, a reference to jQuery lib.
     * W, a reference to window object.
     */

    // load jquery UI lib and css:
    var Sample = {};
    $('head').append('<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">');

    // This section contains the HTML content to be used as the UI
    var CUSTOMER_TEMPLATE = 
         '<div class="customer_ui" style="position:relative; top:20px;' +
         'height:80px; left:31px; width:640px;">' +
            '<input class="playButton" type="button" value="play">' +
            '<input class="pauseButton" type="button" value="pause">' +
            '<span>Current Time:</span><span class="currentTime"></span>' +
            '<span>Duration:</span><span class="duration"></span>' +
            '<div class="slider" style="margin-top:20px; width:640px;"></div>' + 
          '</div>';

    // A constructor for the module class
    // will be called by the player to create an instance of the module
    // First parameter is a reference to a message bus object, which
    // is required to...