Exposio Motion Player

Exposio Motion Player is a custom JavaScript player that allows you to add interactive Motions to your website. With the player, you can easily replace static images with dynamic Motions that add a new level of engagement and interactivity to your site.

Installation

  1. Download the latest version of Exposio Motion Player (link available on demand)
  2. Add the exposio-motion-player.js file to the scripts folder of your website
  3. Add the following script tag to your HTML file:
<script src="/path/to/scripts/exposio-motion-player.js"></script>

Usage

  1. Set the src and data-motion attributes on the image tags you want to replace with Motions. The src attribute should contain the URL of the source image, and the data-motion attribute should contain the URL of the Motion file.
<img
  src="https://.../9aaf86dd395de8ab9295873dec5d7777.jpg"
  data-motion="https://.../9aaf86dd395de8ab9295873dec5d7777.motion"
>

Since every website is different, the automatic replacement of the images might not work for you. If it doesn't, please reach out to us and we will update the Exposio Motion Player to support your website.

Features

Loading with no impact on performance

The Exposio Motion Player is designed to load Motions in a way that minimizes their impact on the performance of your website. The player uses a loading logic that loads each Motion right after the page has finished loading.

This means that all the Motions will be loaded in the background, and ready to be played as soon as they are downloaded, providing a smooth experience.

Caching

The Exposio Motion Player utilizes browser caching to improve its performance on your website. When a Motion is first loaded, it is stored in the browser's cache. When the same Motion is requested again, the cached version is used instead of requesting it again from the server. This reduces the amount of data that needs to be downloaded and speeds up the loading time of the Motion.

Furthermore, the player uses a limited number of different sky videos to create Motions, which allows the browser to cache them efficiently and reduces the number of requests sent to the server. This means that once the sky videos have been downloaded by the browser, they will be stored in the browser's cache and can be reused without needing to be redownloaded. See the preload() method for further control on this behavior.

Video Streaming

The Exposio Motion Player uses video streaming to load the Motions. This means that the Motions are loaded in chunks, which allows the player to start playing the Motion as soon as the first chunk of the video has been downloaded. This reduces the loading time of the Motion and provides a smoother experience.

Options

You can pass options to the Exposio Motion Player by adding additional attributes to the image tag.

Autoplay

You can set the data-autoplay attribute to true to autoplay the Motion as soon as they are ready. However, by default, the Motion will be played on mouse hover.

Moreover, on mobile devices, the Motion closest to the center of the screen will always be played automatically irrespective of the value of the data-autoplay attribute.

Warning: Autoplaying videos can have a negative impact on the performance of your website. Please make sure to test the performance of your website before enabling autoplay and limit the number of autoplaying videos.

Example:

<img
  src="https://.../9aaf86dd395de8ab9295873dec5d7777.jpg"
  data-motion="https://.../9aaf86dd395de8ab9295873dec5d7777.motion"
  data-autoplay="true"
>

Methods

preload()

The preload() method can be used to preload the Motion sky videos. This method is useful if you want to preload the Motion sky videos before the user interacts with the page that contains the Motions. Preloading the Motion sky videos will improve the loading time of the Motions since the sky videos will already be cached by the browser.

ExposioMotionPlayer.preload();

Browser Compatibility

The Exposio Motion Player uses the canvas and video elements and is therefore compatible with the latest versions of modern browsers, including Chrome, Firefox, Safari, and Edge. It has been tested on these browsers and is known to work correctly.

However, as with any web-based technology, there may be slight variations in how the player behaves across different browsers. If you encounter any issues with the player in a particular browser, please reach out to our support team for assistance.

Troubleshooting

If you encounter any issues when using the Exposio Motion Player, please check the following: