Previous: Calling the Boclips API

Integrating the Boclips Player into your web app

In order to integrate our video player into your web application, you’re going to need just a couple of things:

  1. a way to fetch Boclips API access tokens (described here and here),

  2. the Boclips player sources,

  3. a video to display!

Now let’s see how to put this together and show a playable video to your users! 🛠

<html>
  <head>
    <script type="text/javascript" (1)
      src="https://unpkg.com/boclips-player@6.10.6/dist/boclips-player.js">
    </script>
    <link rel="stylesheet" type="text/css" (1)
      href="https://unpkg.com/boclips-player@6.10.6/dist/boclips-player.css"
    />
  </head>
  <body>
    <div id="container"></div> (2)
    <script>
      const renderPlayer = () => {
        const container = document.querySelector('#container'); (2)
        const playerOptions = {
          api: {
            tokenFactory: () => YourService.getBoclipsAccessToken() (3)
          }
        }
        const player = Boclips.PlayerFactory.get(container, playerOptions);
        player.loadVideo('https://api.boclips.com/v1/videos/5c542aba5438cdbcb56de630'); (4)
      };
      window.onload = (_event) => renderPlayer();
    </script>
  </body>
</html>
1 Player sources
2 A container to render the player in
3 A factory function to return Boclips API tokens
4 Loading the video into the player (URL hardcoded for simplicity, consider using links instead)

Above is a minimal example that you can copy to get yourself started quickly.

Our player repository contains a few demo projects too — give them a go if you’re interested in the different ways of setting it up.

Next: Detailed Guides