Video files in my prismic site

Prismic for Content Creators
,
1

Hi,
I am using Prismic, NextJs, SliceMachine latest version.
I looking for best solution for Implement Video to my site from Media Library.
When I using link component then slice.primary.video.url get an error:

Property 'url' does not exist on type 'LinkField'.
Property 'url' does not exist on type 'EmptyLinkField<"Any">'.

My Code:

import { Content } from "@prismicio/client";
import { SliceComponentProps } from "@prismicio/react";
import Bounded from "@/components/Bounded";


/**
 * Props for `Video`.
 */
export type VideoProps = SliceComponentProps<Content.VideoSlice>;


/**
 * Component for "Video" Slices.
 */

const Video = ({ slice }: VideoProps): JSX.Element => {

  return (
    <Bounded
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      <video playsInline autoPlay muted loop>
        <source src={slice.primary.video.url} type="video/mp4" />
      </video>
    </Bounded>
  );
};

export default Video;

How can I fix this issue or what is best way to implement video file?
Regards,
Rezso

3

Hi Reszo,

I suspect that the problem is because the video field might be unfilled, therefore slice.primary.video.url will be undefined. You could guard against this like:

(prismic.isFilled.linkToMediaField(slice.primary.video) &&
  <source src={slice.primary.video.url} type="video/mp4" />
)

(I haven't tested the code, but it should look something like that.)

However, I should also warn: serving videos from the Media Library can very quickly eat up your bandwidth allowance. You might want to consider a dedicated video hosting service, like YouTube, Vimeo, or Wistia. If you do choose to host your videos on Prismic, keep a close eye on your bandwidth usage.

Sam

5

Hi Sam,
Thank you for your quick answer.
slice.primary.video is defined as object.
Looks all good and working in localhost but it has an error when I build it.
Please follow my screenshot from VSCode

Screenshot 2023-10-13 at 7.41.53 am
Screenshot 2023-10-13 at 7.41.53 am1408×478 63.4 KB

Looks like didn't see .url not sure why because it is working in localhost.

Thank You

6

Hi Sam,
I changed prismicio-types.d.ts

From:

Blockquote
export interface VideoSliceDefaultPrimary {
video: prismic.LinkField;
}

To:

Blockquote
export interface VideoSliceDefaultPrimary {
video: prismic.LinkField.url;
}

Problem solved.

8

Hi @rezso.dubiczki,

That won't solve the problem. prismicio-types.d.ts is auto-generated by Slice Machine. The next time you make a change in Slice Machine, your change will be overwritten.

In my last comment, I suggested that you use prismic.isFilled.linkToMediaField() to create a guard. Did you try this?

Sam