🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

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
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.
Mar 27, 2022, 1:30 AM
Is working!!! I was missing to add a simple
at the beginning
Mar 27, 2022, 3:25 AM
I took the example from here:
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}`}
....more code

Mar 27, 2022, 3:28 AM

Sanity– build remarkable experiences at scale

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

Was this answer helpful?