# Video

Like any other experience delivered on the web, Sphere's should adhere to certain best practice approaches regarding file format, size, placement and be considerate of end user's device and connection limitations.

Video files add a heavy load on device memory and require more information to be downloaded to an end user device before the sphere can fully load.

If you don't take certain points in to consideration, you may end up with a less than optimal Sphere experience.

## Things To Be Conscious Of

* Video usage in Sphere's needs to be very considered as any web page, Sphere or other has limits in what can be played in the browser. If you have multiple videos which are all trying to play in the same area (viewport) it puts a heavy load on a device and will affect performance.

{% hint style="info" %}
The viewport is the visible region on any device. As a Sphere is 360 experience, it is the portion of the Sphere which appears at any given time on any given device.
{% endhint %}

* Through testing, we have identified that the <mark style="color:yellow;">**optimal number of videos in a sphere is 5 or less**</mark>, this refers to videos placed on the canvas in Curator. Sphere's with more will work on desktop browsers but hit memory limits when viewed via in-app browsers like Facebook, Instagram, TikTok etc and on certain IOS devices running Safari.
* For best performance, try to keep your videos to 1080p and smaller than 2mb in size.
* Try to limit the amount of videos in the start area to make the initial view of the sphere as smooth as possible, this will also reduce load time as the browser will require less memory to load.
* If your video does not require audio, then remove the audio track as this adds to the overall file size
* Consider the cumulative size of all video files on your Sphere. A standard web page would not function well with multiple mb's worth of video content and neither will a Sphere.&#x20;

{% hint style="info" %}
We optimize video loading wherever we can but ultimately a Sphere is still delivered in a browser and there is only so much the Cozmos platform can do to help with performance.
{% endhint %}

## Colour Masking <a href="#video-color-masking" id="video-color-masking"></a>

Not all browsers support videos with transparent backgrounds and that's where video color masking comes in handy!

1. Apply a one-colored background to your video in your video-editor of choice.
2. Add the video to canvas.
3. Enable "Color masking" and enter the color of video's background.
4. We'll remove the background for you! Done 🎉

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FJuknj3vdurSKu6yQQYUt%2Fimage.png?alt=media&#x26;token=9957352f-1bfa-480f-bcd7-a97b75d7212b" alt=""><figcaption></figcaption></figure>

## Optimising Video Heavy Spheres

#### Compress your videos for use on the web

* [Handbrake](https://handbrake.fr/) is a great open source tool which provides a GUI (Graphic User Interface) for the FFMPG command line transcoding tool.
* Handbrake outputs a .mv4 file which is very similar to .mp4 and as a default makes use of the H.264 codec which is supported across all browser and OS combinations.

### Overview of Handbrake UI

Once you have added a source, ensure 'Web Optimized' is selected:

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FUWMJSc8zxaVSxYuBHBxI%2Fhandbrake-1.png?alt=media&#x26;token=09e0723f-f99d-4b39-b99e-6c3b677d1787" alt=""><figcaption></figcaption></figure>

Go to the Audio tab and 'Clear' the audio track if it is not needed:

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2F0NMPFafMVIxWG2dahn9n%2Fhandbrake-2.png?alt=media&#x26;token=be4b4717-9ae0-48a8-81f5-b4a6ab4b8565" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
To use video files on Sphere please ensure you change the extension of any .mv4 files made using Handbrake to .mp4 you can do this by just changing the file name.
{% endhint %}

### Using the FFMPG command line tool

* If you are comfortable using command line then you can use our suggested input
* `ffmpeg -i`` `<mark style="color:yellow;">`{{input_filename}}`</mark>` ``-c:vlibx264`` `<mark style="color:green;">`(library or codec)`</mark>` ``-an`` `<mark style="color:green;">`(remove audio)`</mark>` ``-crf`` `<mark style="color:green;">`(compression)`</mark> <mark style="color:yellow;">`{{outputfilename}}`</mark>

<table><thead><tr><th width="137">Colour</th><th>Descriptions</th></tr></thead><tbody><tr><td>White</td><td>FFMPEG command</td></tr><tr><td>Green</td><td>What it affects</td></tr><tr><td>Yellow</td><td>User defined file source (input) and output name</td></tr></tbody></table>

* Exclude -an if you want to retain audio
* Visit [FFMPEG](https://ffmpeg.org/) to find out more

### How Curator Can Help

Although Curator cannot optimize your video files you can make certain changes to help deliver a more seamless experience for your viewers

#### Apply a Poster Image

{% hint style="info" %}
A Poster Image is a still image which is displayed until a video is interacted with, or in the case of autoplay videos, until the device has enough memory to play the video
{% endhint %}

If your autoplay video has a Poster Image applied, then no loader will be visible to the end user, only the static image you have set, once their device has enough memory to play the video it will seamlessly load in. This is a great way to create the 'illusion' of quick loading in your Sphere experience even if a viewer does not have a powerful device or fast connection.

To set a poster image, select a video in Curator and use the 'image' function in the Side Panel

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2F9HDnCZfdy72uQCcCcbfa%2Fimage.png?alt=media&#x26;token=0ed383a6-c327-48a2-99fb-c38d69efe02f" alt="Poster Image"><figcaption></figcaption></figure>

We have also reduced the opacity (visibility) of the loader for Autoplay videos which ***do not*** have a Poster Image set, this helps make the loader less obvious.

### Test As You Build

It is very important to test as you go when building Sphere's which contain multiple video objects and to look at the total download size of videos as this will impact the initial sphere load time, subsequent load times will be faster as the data is cached.

Making use of Developer tools in Safari and Chrome is a great way to test load times and Media sizes, we would highly recommend you do this throughout your build process to track the impact changes you make have.

<figure><img src="https://955540963-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgWSBgBDll5yYEIDkdXon%2Fuploads%2FLaBU6fzGJvHRK3LVExkg%2Fchrome-dev-tools.png?alt=media&#x26;token=ab13a8a2-4e1e-44c9-b6e1-5e9788b43377" alt=""><figcaption></figcaption></figure>

## Video doesn't work in some browsers?

While there's no real limitations for Videos on Spheres, they might not work in some browsers, especially on Mobile. If that's the case, we recommend to:

1. Set Codec to **HEVC/H.265**
2. Set file type to **mp4**
3. Reduce video file size (**5-6 MB** is a maximum optimal size)

#### Support:

If you get stuck at any point, please feel free to contact our product team by emailing <support@cozmos.com> and we will be happy to help.