📼Video
Video content is a great way to bring movement to your Sphere experience but it's important to understand the limits before you plan your design.
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.
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.
Through testing, we have identified that the optimal number of videos in a sphere is 5 or less, 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.
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.
What You Can Do To Optimize Video Heavy Spheres
Compress your videos for use on the web
Handbrake 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:
Go to the Audio tab and 'Clear' the audio track if it is not needed:
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.
Using the FFMPG command line tool
If you are comfortable using command line then you can use our suggested input
ffmpeg -i{{input_filename}}-c:vlibx264(library or codec)-an(remove audio)-crf(compression){{outputfilename}}
| Colour | Descriptions |
|---|---|
White | FFMPEG command |
Green | What it affects |
Yellow | User defined file source (input) and output name |
Exclude -an if you want to retain audio
Visit FFMPEG 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
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
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
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.
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.
Last updated
