IIIFPlayer Component

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.

• 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).

• 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.

• startCanvasTime: accepts a valid number for a time in seconds to start playback in the Canvas shown in Ramp on initialization.

** 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>