Merge pull request #151 from IIIF/0013-placeholderCanvas

Recipe #13 — Poster Image Displayed Before Interaction

_includes/links.md

@@ -5,6 +5,7 @@
 [0003]: {{site.baseurl}}/recipe/0003-mvm-video/ "Simplest Manifest - Video"
 [0007]: {{site.baseurl}}/recipe/0007-string-formats/ "Embedding HTML"
 [0008]: {{site.baseurl}}/recipe/0008-rights/ "Rights"
+[0013]: {{site.baseurl}}/recipe/0013-placeholderCanvas/ "Load a Preview Image Before the Main Content"
 
 [0068]: {{site.baseurl}}/recipe/0068-newspaper/ "A newspaper"
 

index.md

@@ -36,7 +36,7 @@ _The corresponding 2.1 test fixture(s) is given like this, where appropriate: ..
 * Book (simplest, > 1 canvas) (19)
 * Book (viewingDirection variations) (11,12,13,14)
 * Book (paging variations) (15,16,17) 
-* placeholderCanvas
+* [Load a Preview Image Before the Main Content][0013]
 * accompanyingCanvas
 * start (65)
 

recipe/0013-placeholderCanvas/index.md

@@ -1,43 +1,41 @@
 ---
-title: "Posters: placeholderCanvas"
+title: "Load a Preview Image Before the Main Content"
 id: 13
 layout: recipe
-tags: [tbc]
-summary: "tbc"
+tags: video, audio, image, av
+summary: "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."
 ---
 
-
 ## Use Case
 
-Why is this pattern is important?
+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. 
 
 ## Implementation notes
 
-How does one implement the pattern?
+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.
 
 ## Restrictions
 
-When is this pattern is usable / not usable? Is it deprecated? If it uses multiple specifications, which versions are needed, etc.? (Not present if not needed.)
+Each instance of `placeholderCanvas` may only contain one Canvas, and as such may specifically not contain an additional `placeholderCanvas` or an `accompanyingCanvas`.
 
 ## Example
 
-Describe in prose and provide examples, e.g.: 
+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.
 
-``` json-doc
-{
-  "@context": [
-    "http://www.w3.org/ns/anno.jsonld",
-    "http://iiif.io/api/presentation/{{ page.major }}/context.json"
-  ],
-  "id": "https://example.org/iiif/book1/manifest",
-  "type": "Manifest" 
-}
-```
+_Note: The `placeholderCanvas` property is not yet supported in viewers._
 
-# Related recipes
+{% include manifest_links.html viewers="" manifest="manifest.json" %}
+
+{% include jsonviewer.html src="manifest.json" config="data-line='12-38'"%}
 
-Provide a bulleted list of related recipes and why they are relevant.
+# Related recipes
 
+* [Simplest Manifest - Video][0003]
+* [Audio Presentation with Accompanying Image][0014], using `accompanyingCanvas` to present one resource simultaneously with another.
 
 {% include acronyms.md %}
 {% include links.md %}

recipe/0013-placeholderCanvas/manifest.json

@@ -0,0 +1,63 @@
+{
+    "@context": "http://iiif.io/api/presentation/3/context.json",
+    "id": "{{ id.url }}",
+    "type": "Manifest",
+    "items": [
+      {
+        "id": "{{ id.path }}/canvas/donizetti",
+        "type": "Canvas",
+				"duration": 7278.466,
+				"width": 640,
+				"height": 360,
+        "placeholderCanvas": {
+          "id": "{{ id.path }}/canvas/donizetti/placeholder",
+          "type": "Canvas",
+					"width": 640,
+					"height": 360,
+          "items": [
+            {
+              "id": "{{ id.path }}/canvas/donizetti/placeholder/1",
+              "type": "AnnotationPage",
+              "items": [
+                {
+                  "id": "{{ id.path }}/canvas/donizetti/placeholder/1-image",
+                  "type": "Annotation",
+                  "motivation": "painting",
+                  "body": {
+                      "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/act1-thumbnail.png",
+                      "type": "Image",
+                      "format": "image/png",
+											"width": 640,
+											"height": 360
+                  },
+                  "target": "{{ id.path }}/canvas/donizetti/placeholder"
+                }
+              ]
+            }
+          ]
+        },
+        "items": [
+          {
+            "id": "{{ id.path }}/donizetti/1",
+            "type": "AnnotationPage",
+            "items": [
+              {
+                "id": "{{ id.path }}/donizetti/1-video",
+                "type": "Annotation",
+                "motivation": "painting",
+                "body": {
+                  "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/vae0637_accessH264_low.mp4",
+                "type": "Video",
+                "duration": 7278.466,
+                "width": 640,
+                "height": 360,
+                "format": "video/mp4"
+                },
+                "target": "{{ id.path }}/canvas/donizetti"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+}