Recipe #229: Behavior with Ranges

_includes/links.md

@@ -53,6 +53,7 @@
 
 [0232]: {{ site.cookbook_url | absolute_url }}/recipe/0232-image-thumbnail-canvas/ "Implementation discussion: Thumbnails on Canvases"
 [0219]: {{ site.cookbook_url | absolute_url }}/recipe/0219-using-caption-file/ "Using Caption and Subtitle Files with Video Content"
+[0229]: {{ site.cookbook_url | absolute_url }}/recipe/0229-behavior-ranges/ "Adding Thumbnail Navigation and `no-nav` to a Video Resource"
 [0230]: {{ site.cookbook_url | absolute_url }}/recipe/0230-navdate/ "Navigation by Chronology"
 [0231]: {{ site.cookbook_url | absolute_url }}/recipe/0231-transcript-meta-recipe/ "Transcripts, Captions, and Subtitles - General Considerations"
 

index.md

@@ -100,6 +100,7 @@ _(leading on to segmentation examples later)_
 * [Table of Contents for Book Chapters][0024]
 * table of contents (ranges) - articles in a newspaper
 * [Table of contents for A/V content][0026] (26)
+* [Adding Thumbnail Navigation and `no-nav` to a Video Resource][0229]
 * Alternative Sequence (via `sequence` Range) (20,22,23)
 * `sequence` Range with partial canvases
 

recipe/0229-behavior-ranges/index.md

@@ -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.
+
+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="78,83"'%}
+
+## 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 %}

recipe/0229-behavior-ranges/manifest.json

@@ -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
+			}
+		  ]
+        }
+      ]
+    }
+  ]
+}