Bodymovin Animation in H5P

Hi. I'd like to add Bodymovin animation inside of H5P Course Presentation. I've added an example here where I've place the animation on a wordpress site. This was pretty simple, but I'm unsure of the best way to incorporate this into your plugin. 

If it helps, here are the steps that I used to add bodymovin to wordpress.

Insert this code into functions.php of your child theme to allow for uploading the js and json files into the wp-content/uploads directory.

function my_myme_types($mime_types){
$mime_types['json'] = 'json';
$mime_types['js'] = 'js';
return $mime_types;
}
add_filter('upload_mimes', 'my_myme_types', 1, 1);

In your Javascript file (e.g. "bodymovin.js"). Go to var params = { . Here, delete the line animationData: animationData. We will replace it: Before the closing brace, add two new parameters. path for the url to the *.json file and assetsPath for the images, if you need them. Images are usually unnecessary. The code should look similar to this:

var params = {
container: document.getElementById('lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
path: '/wp-content/uploads/data.json',
assetsPath: '/wp-content/uploads/'
}; 

Change "lottie" to whatever id you want.

Place your Bodymovin <div>-tag

<div id = "lottie"></div>

anywhere you like. Change "lottie" to whatever id you want. Make sure it's the same as in your Javascript file container: document.getElementById('lottie').

The last step is to reference to your uploaded Javascript file. I did this in the "footer.php" right above the closing body tag </body>. Add this line:

<script src="/wp-content/uploads/bodymovin.js" type="text/javascript"></script>