Skip to main content

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 are all managed for you. You just need to focus on the frontend experience, Crystallize handles the rest. Here is how.

Video upload in Crystallize PIM UI

Automatic transcoding delivered on edge

Your visitors have different devices and different bandwidths 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 a fiber 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

Fast site speed with lazy loaded videos

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 do not affect your site speed.

Uploading videos

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.

Crystallize video upload drag and drop

Serving videos via the GraphQL API

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.

Serving videos via the GraphQL API

Example video usage

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.