| title | id | layout | tags | summary | viewers | topic | property | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
Load a Preview Image Before the Main Content |
13 |
recipe |
video, audio, image, av |
Provide the user with something to look at before they choose to start interacting with the main content, and/or while they wait for it to load/buffer. |
|
|
placeholderCanvas |
You have an exceptionally large video to present to site visitors. As each visitor's connection reliability and bandwidth are unknown and unpredictable, you want to show them a still image preview of the video (which will load more quickly) until the video has finished loading or has sufficiently buffered.
Across a Manifest and its resources, you may use more than one placeholderCanvas, allowing you to have an authentic placeholderCanvas for each appropriate resource (Collection, Manifest, Canvas, and Range).
The target of the Annotation of a placeholderCanvas should have as its value the id of the placeholderCanvas, not the id of the resource that has the placeholderCanvas.
Always keep in mind the wide latitude given conforming clients: It is up to the client whether and in what sort of UI to display content you place in a placeholderCanvas property. Do not use this property for content that must be displayed. On the other hand, placing content in a placeholderCanvas does communicate to a conforming client that the content, if displayed, should be displayed before the resource to which it is attached.
Each instance of placeholderCanvas may only contain one Canvas, and as such may specifically not contain an additional placeholderCanvas or an accompanyingCanvas.
In the example, the main content is a video of a performance of Donizetti's L'elisir d'amore and the placeholderCanvas is a still frame from the video. For a site visitor with limited bandwidth, showing the still frame allows them to get an advance look at performance aspects such as costuming, staging, and set design.
{% include manifest_links.html manifest="manifest.json" %}
{% include jsonviewer.html src="manifest.json" config="data-line='17-43'"%}
- [Simplest Manifest - Video][0003]
- [Audio Presentation with Accompanying Image][0014], using
accompanyingCanvasto present one resource simultaneously with another.
{% include acronyms.md %} {% include links.md %}