👀 See Sanity in action: Watch product demo now →

Fetching MP4 or WEBM Assets with Next.js - Error: Failed to Resolve Asset ID from Source

2 replies
Last updated: Mar 27, 2022
Question for the channel… someone has experience fetching mp4/webm or any other type of data besides images? I’m trying to work with
@sanity/asset-utils
but I’m stuck here Failed to resolve asset ID from source, if someone can share me a hint, tutorial, snippet code from where to keep figuring out I’ll really appreciate.
Thanks!
Mar 27, 2022, 1:30 AM
Is working!!! I was missing to add a simple
value.
at the beginning
Mar 27, 2022, 3:25 AM
I took the example from here:
https://www.harrytheo.com/blog/2021/07/replace-gif-with-video-in-sanity-gatsby/
To make it works in Next JS:


function videoAssetFor(source) {
  return getFileAsset(source, client.config());
}

const ptComponents = {
  types: {
    videoAnimation: ({ value }) => {
      if (!value.webm || !value.fallback) {
        return null;
      }
      const webmAsset = videoAssetFor(value.webm);
      const fallbackAsset = videoAssetFor(value.fallback);

      return (
        <video title={webmAsset.alt} loop muted autoPlay playsInline>
          <source src={webmAsset.url} type={`video/${webmAsset.extension}`} />
          <source src={fallbackAsset.url} type={`video/${fallbackAsset.extension}`}
          />
        </video>
      );
    },
....more code

Mar 27, 2022, 3:28 AM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in