This article describes how to use the Clipchamp API with the popular jQuery library. It is taking a closer look at a useful aspect of the API and provides more insights and some further examples to help you get set up. All available options of our HTML5 video API are listed on its documentation page.

Using the jQuery bindings of the Clipchamp API represents an alternative to using its plain JavaScript flavour.

jQuery helps in working around quirky browser APIs to manipulate and query the DOM and provides a cross-browser API for the aforementioned capabilities that normalises browser differences. The Clipchamp API automatically integrates into jQuery when loaded on a website to give you exactly that: a further productivity boost in interfacing with the Clipchamp API.

Loading jQuery and the Clipchamp API

In order to use the Clipchamp API with jQuery, you need to make sure that the jQuery script is loaded before the Clipchamp script. This is trivially accomplished when synchronously loading both scripts like so:

<html>
<head>

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://api.clipchamp.com/YOUR_API_KEY/button.js"></script>

</head>
<body>

<!-- Use the jQuery bindings of the Clipchamp API here. -->

</body>
</html>

see also: index.html 

In the example above, we first synchronously load the jQuery script from the official jQuery CDN and then synchronously load the Clipchamp API script. This will work and make sure that the Clipchamp API script finds jQuery to be already loaded when it is instantiated. Other than that, synchronously loading the scripts (in particular when doing so in the <head> section of the page) has the usual detrimental effects on page load times.

You can use the supported means of asynchronously loading scripts, but will need to make sure that when doing so:

  1. jQuery is available when the Clipchamp API script finishes loading and is instantiated (i.e., has run);
  2. The Clipchamp API script was instantiated before it is later used (e.g., to inject the Clipchamp button into the DOM)

It is beyond the scope of this article to explain the options and intricacies of asynchronous script loading techniques. For a basic understanding of built-in browser capabilities, take a look at the semantics of the <script> element's async and defer attributes. Other techniques such as dynamic script injection and polling for the availability of the Clipchamp API may come in handy too.

For instance, the following example shows how to first asynchronously load jQuery, wait until it has finished loading, then dynamically inject the <script> tag to load the Clipchamp API, and then apply a polling pattern to wait for the Clipchamp API to finish loading:

<html>
<head>
  <script async src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
</head>

<body>
  <!-- Build up your initial document statically here. -->
 
  <script type="text/javascript">
    (function waitFor(condition, callback) {
     
      (function poll() {
        if (condition()) return callback();
        else setTimeout(poll, 100);
      })();
     
    })(function() {
      return typeof $ === 'function';
    }, function() {
      $('body').append('<script src="https://api.clipchamp.com/YOUR_API_KEY/button.js"></script>');
     
      waitFor(function() {
        return !!$.clipchamp;
      }, function() {
         // use the Clipchamp API with jQuery here
      });
    });
  </script>
</body>
</html>

see also index.html

Using the jQuery bindings of the Clipchamp API

The Clipchamp API makes itself available just like any other jQuery plugin. That is, it adds the clipchamp(...) function to the jQuery object (or its shorthand symbol $). This lets you use regular jQuery selectors to search for the wrapper element(s) in the DOM before injecting the Clipchamp button:

<html>
<head>

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://api.clipchamp.com/YOUR_API_KEY/button.js"></script>

</head>
<body>

<div class="clipchamp-wrapper" data-label="First button" data-s3-bucket="foo">Please wait...</div>
<div class="clipchamp-wrapper" data-label="Second button" data-s3-bucket="bar">Please wait...</div>

<script type="text/javascript">
  $('.clipchamp-wrapper').clipchamp({
    output: 's3'
  });
 
 
</script>
</body>
</html>

see also index.html

The example above demonstrates the power of using the jQuery bindings of our API in combination with custom data attributes on the "wrapper" elements. Data attributes represent an alternative way to parameterise the Clipchamp button. The jQuery selector ".clipchamp-wrapper" will select both <div> elements, which happen to be members of the "clipchamp-wrapper" CSS class.

By means of the clipchamp(...) call, the Clipchamp API will inject a Clipchamp-themed button into both of them and make both upload the videos to the configured Amazon S3 account. However, by means of the "data-s3-bucket" attribute, they will upload their videos into different buckets within the same AWS S3 account. Also, the button labels will be different (as per "data-label" attribute on the wrapper elements). That's how flexible the Clipchamp API is. 

Did this answer your question?