IIIFPlayer Component - samvera-labs/ramp GitHub Wiki

IIIFPlayer is the main component of this component library, while the others are supporting components. All the other components needs to be wrapped by the parent IIIFPlayer component, with the exception of Transcript component (more details in the Transcript component documentation).

Props explained

The following props are accepted by the IIIFPlayer component, while some are required others are not;

  • manifestUrl (URL): URL of a manifest in the wild to be fetched
  • manifest (JSON) : local manifest data in a JSON format manifest : accepts a JSON object representing data in a IIIF Manifest

** Either manifestUrl or manifest is REQUIRED. If both props are given then manifest takes precedence over manifestUrl. At least one of the props should be provided when initializing the component

  • customErrorMessage: accepts a message to display to the user in the unlikely event of the component crashing, this has a default error message and it is not required. The message can include HTML markup. (supported from @samvera/ramp 3.0.0 onward)

  • emptyManifestMessage: accepts a message to display to the user when the given IIIF Manifest has no canvases (items) in it yet. e.g.: a playlist manifest without any items added to it yet. This has a default message and it is not required. The message can include HTML markup (supported from Ramp 3.2.0 onward). (supported from @samvera/ramp 3.2.0 onward)

  • startCanvasId: accepts a valid Canvas ID that exists within the given Manifest, this can specify the Canvas to show in Ramp on initialization. This can be mapped to the start property in a IIIF Manifest. (supported from @samvera/ramp 3.0.0 onward)

  • startCanvasTime: accepts a valid number for a time in seconds to start playback in the Canvas shown in Ramp on initialization. (supported from @samvera/ramp 3.0.0 onward)

** startCanvasId and startCanvasTime props takes precedence over the start property in a given IIIF Manifest. Defining either prop in the IIIFPlayer component overrides the start property in the IIIF Manifest.

How to use the IIIFPlayer component?

import { IIIFPlayer, MediaPlayer } from '@samvera/ramp';
import 'video.js/dist/video-js.css';
import '@samvera/ramp/dist/ramp.css';

<IIIFPlayer manifestUrl="http://example.com/manifest.json">
  <MediaPlayer />
</IIIFPlayer>