How to create a 360 Video Player with JavaScript using Clappr

360 videos are delivered as regular video file or stream. They usually doesn't work as expected out of the box even at the more recent browsers as they will be shown as a normal video and the user will see the entire panorama in a box. However, it's better to provide the user the usual interface that allows him to drag the video and see the entire video as a lot of video players do today (FB, YouTube etc). The interactive video player then remaps it to show only the entire field of view the user is looking at.

In this article we'll show you how to implement a 360 video player using Clappr.

1. Include Clappr and 360 video plugin

The only library you will need to include to create your own 360 video player is Clappr. Clappr is simply an extensible media player for the web. Clappr is under heavy development but production-ready so you can open issues and send pull requests.

The project is on npm so you can install it as a dependency on your project using the following command:

npm install clappr

You will need to install the 360 video plugin for Clappr that allows you to play 360 videos on the video player easily:

npm install clappr-video360

Finally, you will need to include the main file of the player namely clappr.js and from the 360 video player plugin clappr-video360.min.js. Alternatively, if you don't use a package manager download the minified version of clappr from the repository here and a copy of the 360 video plugin here. Or if you are only willing to test the library on your project, use a CDN:

<!-- Include Clappr -->
<script src="https://cdn.jsdelivr.net/gh/clappr/clappr@latest/dist/clappr.min.js"></script>

<!-- Include the 360 videoplayer plugin -->
<script src="https://cdn.rawgit.com/thiagopnts/clappr-video360/master/dist/clappr-video360.min.js"></script>

For more information and documentation of the Clappr player, please visit the official repository at Github here. For more information about the 360 Video Plugin, visit the repository at Github here. Including both files will add about 185KB download size to your webpage.

2. Setting up 360 Video Player

The implementation of a video player with Clappr is very simple, you will need at least provide the URL of the video that you want to play in the source parameter and the id of the DIV element in the document where you want to create the video player. That would implement a basic player, but if you want to allow to play 360 degrees videos, you will need to inject the Vide360 plugin in the container.

The following examples show how to implement a basic 360 video player in the browser with VanillaJS and requiring the modules if you use a module bundler (webpack, browserify etc):

A. With VanillaJS (directly in the browser)

// The URL to the 360 video player 
var Video360Url = 'video360.mp4';

// Configure your Clappr player.
var PlayerInstance = new Clappr.Player({
    source: Video360Url,
    plugins: {
        container: [Video360],
    },
    parentId: '#player',
});

// Important to disable the click to pause native plugin of clappr
// otherwise you won't be able to use correctly the player
PlayerInstance.getPlugin('click_to_pause').disable();

The plugin creates a global variable in the window namely Video360 that needs to be injected as a plugin in Clappr.

B. Using module bundlers

If you work with a module bundler, you will need to require every module as shown in the following example:

// require modules
var Clappr = require("clappr");
var Video360 = require("clappr-video360");

// The URL to the 360 video player
var Video360Url = 'video360.mp4';

// Configure your Clappr player.
var PlayerInstance = new Clappr.Player({
    source: Video360Url,
    plugins: {
        container: [Video360],
    },
    parentId: '#player',
});

// Important to disable the click to pause native plugin of clappr
// otherwise you won't be able to use correctly the player
PlayerInstance.getPlugin('click_to_pause').disable();

Final example

The following document creates a basic 360 video player using the CDN files, so you can simply copy the code and run it from a local server. You will only need to replace the URL to the 360 video and that's it:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Clappr Video360</title>
    </head>
    <body>
        <!-- 1. Create a div where the player will be placed -->
        <div id="player"></div>

        <!-- 2. Include Clappr and the 360 videoplayer plugin-->
        <script src="https://cdn.jsdelivr.net/gh/clappr/clappr@latest/dist/clappr.min.js"></script>
        <script src="https://cdn.rawgit.com/thiagopnts/clappr-video360/master/dist/clappr-video360.min.js"></script>

        <!-- 3. Configure video player-->
        <script>
            // The URL to the 360 video player 
            var Video360Url = 'video360.mp4';

            // Configure your Clappr player.
            var PlayerInstance = new Clappr.Player({
                source: Video360Url,
                plugins: {
                    container: [Video360],
                },
                parentId: '#player',
            });

            // Important to disable the click to pause native plugin of clappr
            // otherwise you won't be able to use correctly the player
            PlayerInstance.getPlugin('click_to_pause').disable();
        </script>
    </body>
</html>

Happy coding !