Recipe #229: Behavior with Ranges #304
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| --- | ||
| title: Adding Thumbnail Navigation and no-nav to a Video Resource | ||
| id: 229 | ||
| layout: recipe | ||
| tags: structure | ||
| summary: "How to tell a viewer to create a thumbnail-based visual navigation of a video as well as to exclude a segment of that video from any such navigation." | ||
| viewers: | ||
| topic: | ||
| - structure | ||
| --- | ||
|
|
||
| ## Use Case | ||
|
|
||
| You would like to provide visitors with the ability to navigate a video visually using thumbnails, excluding portions of the video with no meaningful video or audio. | ||
|
|
||
| ## Implementation Notes | ||
|
|
||
| This recipe shows two ways that `behavior` can serve in a Range to tell clients how navigation should work. (For a fuller discussion of Ranges, see [the Presentation API Range section][prezi3-range].) | ||
|
|
||
| One of the present ways to influence navigation behavior is to use the `no-nav` value, telling a client explicitly to not include a portion of the resource in navigation. When this value appears, whatever Canvases or portions of Canvases are used in the `items` part of the Range should not appear in the interface's navigation. The `id` of a Canvas in the `items` section indicates a Canvas from the Manifest's own `items` section or can be such an `id` with a bounding fragment for AV resources. | ||
|
|
||
| The other value used in this recipe is the `thumbnail-nav` value, which directs the consuming client to present an alternate, visual navigation structure using the thumbnail(s) with this `behavior` value. The API is quite clear that a traditional table of contents is not the place to put this visual navigation. Something more akin to thumbnail scrubbing is the metaphor to aim for. This can work with AV resources, where thumbnails might be put along a timeline to represent key moments a viewer might want to use in navigation. It can also be used with still images, where thumbnails might be employed usefully to navigate very large images (long, tall, or both dimensions). For those large still images, thumbnail based navigation — independent of the manifest's Canvases' thumbnails — may be arranged in any way that presents a helpful experience. | ||
|
Comment on lines
+20
to
+22
Contributor
There was a problem hiding this comment. I think this section would be stronger if it followed the
Contributor
There was a problem hiding this comment. @markpbaggett Could you elaborate a bit? "Followed" as in conceptual order or "followed" as in "text differing only in what is different in this recipe" or as in something else? |
||
|
|
||
| Note that `behavior` values are inherited. In order to determine the behaviors governing a particular resource, [there are four inheritance rules to observe](https://iiif.io/api/presentation/3.0/#behavior), two of which apply to Ranges: | ||
| > + Canvases inherit behaviors from their referencing Manifest, but **DO NOT** inherit behaviors from any referencing Ranges, as there might be several with different behaviors. | ||
| > + Ranges inherit behaviors from any referencing Range and referencing Manifest. | ||
|
|
||
| The cookbook discusses elsewhere several other uses of the `behavior` property, collected in the Related Recipes section below. | ||
|
|
||
| ## Restrictions | ||
|
|
||
| None known. | ||
|
|
||
| ## Example | ||
|
|
||
| This example uses a video (roughly 55 minutes long) of a live opera performance. The first nine seconds of the video are marked, in the first subsidiary Range, with `no-nav` because they contain no meaningful video and audio. Subsequent peer Ranges divide the video into ten segments, each assigned a `thumbnail` property and a thumbnail image. While in an authentic environment these might be created from moments that are structurally, semantically, pedagogically, or otherwise significant, here they are merely an equal amount of running time except for the final one. | ||
|
|
||
| {% include manifest_links.html manifest="manifest.json" %} | ||
|
|
||
| {% include jsonviewer.html src="manifest.json" config='data-line="52,57"'%} | ||
|
|
||
| ## Related Recipes | ||
|
|
||
| * [Simple book][0009] gives an example of a basic paging interface | ||
| * [Book paging variations][0011] shows selected `behavior` options for a book | ||
| * [Viewing direction and its effect on navigation][0010] uses `behavior` for objects with other than left-to-right, top-to-bottom viewing directions | ||
| * [Simple Annotation — Tagging][0021] notes, but does not show, how `behavior` in a tagging annotation can be used to hide the annotation | ||
| * [Table of contents: Book chapters][0024] | ||
| * [Table of contents: One video resource on one canvas][0064] | ||
| * [Table of contents: One video resource on multiple canvases][0065] | ||
| * [Multi-volume work with individually-bound volumes][0030] uses `behavior` to distinguish a multi-volume Collection from other Collection types | ||
| * [Foldouts, flaps, and maps][0035] uses `behavior` to mark a Manifest as paged and a Canvas within the Manifest as not participating in the paging | ||
|
|
||
| {% include acronyms.md %} | ||
| {% include links.md %} | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,260 @@ | ||
| { | ||
| "@context": [ "http://iiif.io/api/presentation/3/context.json" ], | ||
| "id": "{{ id.url }} ", | ||
| "type": "Manifest", | ||
| "label": { | ||
| "en": ["Video navigation with thumbnails in a Range"] | ||
| }, | ||
| "items": [ | ||
| { | ||
| "id": "{{ id.path }}/canvas/1", | ||
| "type": "Canvas", | ||
| "height": 1080, | ||
| "width": 1920, | ||
| "duration": 3307.22, | ||
| "items": [ | ||
| { | ||
| "id": "{{ id.path }}/canvas/1/annotation_page/1", | ||
| "type": "AnnotationPage", | ||
| "items": [ | ||
| { | ||
| "id": "{{ id.path }}/canvas/1/annotation_page/1/annotation/2", | ||
| "type": "Annotation", | ||
| "motivation": "painting", | ||
| "body": { | ||
| "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/vae0637_accessH264_low_act_2.mp4", | ||
| "type": "Video", | ||
| "format": "video/mp4", | ||
| "height": 1080, | ||
| "width": 1920, | ||
| "duration": 3307.22 | ||
| }, | ||
| "target": "{{ id.path }}/canvas/1" | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ], | ||
| "structures": [ | ||
| { | ||
| "id": "{{ id.path }}/range/1", | ||
| "type": "Range", | ||
| "label": { "en": [ "Thumbnail Navigation" ] }, | ||
| "behavior": "thumbnail-nav", | ||
| "items": [ | ||
| { | ||
| "type": "Range", | ||
| "id": "{{ id.path }}/range/1.1", | ||
| "behavior": "no-nav", | ||
| "items": [ | ||
| { | ||
| "type": "Canvas", | ||
| "id": "{{ id.path }}/canvas/1#t=0,9" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "type": "Range", | ||
| "id": "{{ id.path }}/range/2", | ||
| "label": { "en": [ "9s – 305s" ] }, | ||
| "items": [ | ||
| { | ||
| "type": "Canvas", | ||
| "id": "{{ id.path }}/canvas/1#t=9,305" | ||
| } | ||
| ], | ||
| "thumbnail": [ | ||
| { | ||
| "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/thumbnails/thumb-nav-01.png", | ||
| "type": "Image", | ||
| "format": "image/png", | ||
| "height": 1266, | ||
| "width": 2250 | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "type": "Range", | ||
| "id": "{{ id.path }}/range/3", | ||
| "label": { "en": [ "305s – 610s" ] }, | ||
| "items": [ | ||
| { | ||
| "type": "Canvas", | ||
| "id": "{{ id.path }}/canvas/1#t=305,610" | ||
| } | ||
| ], | ||
| "thumbnail": [ | ||
| { | ||
| "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/thumbnails/thumb-nav-02.png", | ||
| "type": "Image", | ||
| "format": "image/png", | ||
| "height": 1266, | ||
| "width": 2250 | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "type": "Range", | ||
| "id": "{{ id.path }}/range/4", | ||
| "label": { "en": [ "610s – 915s" ] }, | ||
| "items": [ | ||
| { | ||
| "type": "Canvas", | ||
| "id": "{{ id.path }}/canvas/1#t=610,915" | ||
| } | ||
| ], | ||
| "thumbnail": [ | ||
| { | ||
| "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/thumbnails/thumb-nav-03.png", | ||
| "type": "Image", | ||
| "format": "image/png", | ||
| "height": 1266, | ||
| "width": 2250 | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "type": "Range", | ||
| "id": "{{ id.path }}/range/5", | ||
| "label": { "en": [ "915s – 1220s" ] }, | ||
| "items": [ | ||
| { | ||
| "type": "Canvas", | ||
| "id": "{{ id.path }}/canvas/1#t=915,1220" | ||
| } | ||
| ], | ||
| "thumbnail": [ | ||
| { | ||
| "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/thumbnails/thumb-nav-04.png", | ||
| "type": "Image", | ||
| "format": "image/png", | ||
| "height": 1266, | ||
| "width": 2250 | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "type": "Range", | ||
| "id": "{{ id.path }}/range/6", | ||
| "label": { "en": [ "1220s – 1525s" ] }, | ||
| "items": [ | ||
| { | ||
| "type": "Canvas", | ||
| "id": "{{ id.path }}/canvas/1#t=1220,1525" | ||
| } | ||
| ], | ||
| "thumbnail": [ | ||
| { | ||
| "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/thumbnails/thumb-nav-05.png", | ||
| "type": "Image", | ||
| "format": "image/png", | ||
| "height": 1266, | ||
| "width": 2250 | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "type": "Range", | ||
| "id": "{{ id.path }}/range/7", | ||
| "label": { "en": [ "1525s – 1830s" ] }, | ||
| "items": [ | ||
| { | ||
| "type": "Canvas", | ||
| "id": "{{ id.path }}/canvas/1#t=1525,1830" | ||
| } | ||
| ], | ||
| "thumbnail": [ | ||
| { | ||
| "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/thumbnails/thumb-nav-06.png", | ||
| "type": "Image", | ||
| "format": "image/png", | ||
| "height": 1266, | ||
| "width": 2250 | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "type": "Range", | ||
| "id": "{{ id.path }}/range/8", | ||
| "label": { "en": [ "1830s – 2135s" ] }, | ||
| "items": [ | ||
| { | ||
| "type": "Canvas", | ||
| "id": "{{ id.path }}/canvas/1#t=1830,2135" | ||
| } | ||
| ], | ||
| "thumbnail": [ | ||
| { | ||
| "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/thumbnails/thumb-nav-07.png", | ||
| "type": "Image", | ||
| "format": "image/png", | ||
| "height": 1266, | ||
| "width": 2250 | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "type": "Range", | ||
| "id": "{{ id.path }}/range/9", | ||
| "label": { "en": [ "2135s – 2440s" ] }, | ||
| "items": [ | ||
| { | ||
| "type": "Canvas", | ||
| "id": "{{ id.path }}/canvas/1#t=2135,2440" | ||
| } | ||
| ], | ||
| "thumbnail": [ | ||
| { | ||
| "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/thumbnails/thumb-nav-08.png", | ||
| "type": "Image", | ||
| "format": "image/png", | ||
| "height": 1266, | ||
| "width": 2250 | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "type": "Range", | ||
| "id": "{{ id.path }}/range/10", | ||
| "label": { "en": [ "2440s – 2745s" ] }, | ||
| "items": [ | ||
| { | ||
| "type": "Canvas", | ||
| "id": "{{ id.path }}/canvas/1#t=2440,2745" | ||
| } | ||
| ], | ||
| "thumbnail": [ | ||
| { | ||
| "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/thumbnails/thumb-nav-09.png", | ||
| "type": "Image", | ||
| "format": "image/png", | ||
| "height": 1266, | ||
| "width": 2250 | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "type": "Range", | ||
| "id": "{{ id.path }}/range/11", | ||
| "label": { "en": [ "2745s – end" ] }, | ||
| "items": [ | ||
| { | ||
| "type": "Canvas", | ||
| "id": "{{ id.path }}/canvas/1#t=2745,3307.22" | ||
| } | ||
| ], | ||
| "thumbnail": [ | ||
| { | ||
| "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/thumbnails/thumb-nav-10.png", | ||
| "type": "Image", | ||
| "format": "image/png", | ||
| "width": 2250, | ||
| "height": 1266 | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.