JSS: Video [DAM]

This is an example implementation. Adapt the component, helper usage, styling, fallback behavior, and rendering logic to fit your own JSS application.

Parse the XML-wrapped JSON field value and render the selected video file as a plain video element.

DamVideo.tsx

import React from 'react';
import { Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { getFile, getSingleAsset } from '@/lib/bynder-xm-xp-headless';
 
type DamVideoProps = {
  fields: {
    video?: Field<string>;
  };
};
 
const DamVideo = ({ fields }: DamVideoProps) => {
  const video = getFile(getSingleAsset(fields.video));
 
  if (!video?.url) {
    return null;
  }
 
  return (
    <video controls>
      <source src={video.url} />
    </video>
  );
};
 
export default withDatasourceCheck()<DamVideoProps>(DamVideo);

Single File Image General Link