Video Streaming for JAMStack Websites and Apps

Video is great for creating beautiful customer experiences. When building your site using the JAMStack strategy you can use the Crystallize API to easily add streamable HD videos. Transcoding and delivery all managed for you. You just need to focus on the frontend experience, Crystallize handles the rest. Here is how.

Your visitors have different devices and different bandwidth so you want to make sure you have your videos nicely transcoded for your audience. The videos are automatically transcoded to different bitrates so you can stream videos from a mobile device with low bandwidth or a full HD experience on a desktop computer with fibre internet connection.

Summarised when you upload a video to Crystallize we do the following:

• Automatically transcoded to different sizes & bitrates
• Generates media presentation description (MPD)
• Generates m3u8 playlist files
• Distribute the video files on a global CDN

When working with videos you need to make sure that you are not affecting your site speed. Site speed really affects Google SEO Ranking, so you want to be fast. For videos in a JAMStack setting this means that you want to load your videos lazy.

If you use the JAMStack eCommerce boilerplate in NextJS then you already have a setup where videos are loaded lazy and does not affect your site speed.

Videos are easily uploaded in Crystallize using the PIM admin user interface. You can also use the GraphQL eCommerce API, but for editorial users it is simpler just to upload videos using drag and drop.

When it comes to serving videos you can use the GraphQL API in Crystallize. Here you immediately get access to the transcoded videos in both Mpd and M3U8 formats for simple streaming. All served up from a globally distributed CDN. Fast and simple.

You can check out an example of video usage on our Furniture demo shop. Here videos are used to create a richer customer experience by combining products, long form articles and videos. This demo shop uses the JAMStack eCommerce boilerplate running on top of the Crystallize service.