0219 caption files with video content v3/v4

_includes/links.md

@@ -37,24 +37,24 @@
 [0065]: {{ site.cookbook_url | absolute_url }}/recipe/0065-opera-multiple-canvases/ "Table of Contents for Multiple A/V Files on Multiple Canvases"
 [0068]: {{ site.cookbook_url | absolute_url }}/recipe/0068-newspaper/ "Basic Newspaper"
 [0074]: {{ site.cookbook_url | absolute_url}}/recipe/0074-multiple-language-captions/ "Using Caption and Subtitle Files in Multiple Languages with Video Content"
-[0074-4]: {{ site.cookbook_url | absolute_url}}/recipe/0074-multiple-language-captions/#version-4 "Using Caption and Subtitle Files in Multiple Languages with Video Content"
-[0079-4]: {{ site.cookbook_url | absolute_url }}/recipe/0079-annotations-for-captions/#version-4 "Using Annotations for Timed Text"
+# [0074-4]: {{ site.cookbook_url | absolute_url}}/recipe/0074-multiple-language-captions/#version-4 "Using Caption and Subtitle Files in Multiple Languages with Video Content"
+# [0079-4]: {{ site.cookbook_url | absolute_url }}/recipe/0079-annotations-for-captions/#version-4 "Using Annotations for Timed Text"
 [0117]: {{ site.cookbook_url | absolute_url }}/recipe/0117-add-image-thumbnail/ "Image Thumbnail for Manifest"
 [0118]: {{ site.cookbook_url | absolute_url }}/recipe/0118-multivalue/ "Displaying Multiple Values with Language Maps"
 [0135]: {{ site.cookbook_url | absolute_url }}/recipe/0135-annotating-point-in-canvas/ "Annotating a specific point of an image"
 [0139]: {{ site.cookbook_url | absolute_url }}/recipe/0139-geolocate-canvas-fragment/ "Represent Canvas Fragment as a Geographic Area on a Web Map"
 [0154]: {{ site.cookbook_url | absolute_url }}/recipe/0154-geo-extension/ "Locate a Manifest on a Web Map"
 [0202]: {{ site.cookbook_url | absolute_url }}/recipe/0202-start-canvas/ "Load Manifest Beginning with a Specific Canvas"
 [0219]: {{ site.cookbook_url | absolute_url }}/recipe/0219-using-caption-file/ "Using Caption and Subtitle Files with Video Content"
-[0219-4]: {{ site.cookbook_url | absolute_url }}/recipe/0219-using-caption-file/#version-4 "Using Caption and Subtitle Files with Video Content"
+[0219-4]: {{ site.cookbook_url | absolute_url }}/recipe/0219-using-caption-file/#version-4 "Using Caption 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"
-[0231-4]: {{ site.cookbook_url | absolute_url }}/recipe/0231-transcript-meta-recipe/#version-4 "Transcripts, Captions, and Subtitles - General Considerations"
+# [0231-4]: {{ site.cookbook_url | absolute_url }}/recipe/0231-transcript-meta-recipe/#version-4 "Transcripts, Captions, and Subtitles - General Considerations"
 [0232]: {{ site.cookbook_url | absolute_url }}/recipe/0232-image-thumbnail-canvas/ "Implementation discussion: Thumbnails on Canvases"
 [0234]: {{ site.cookbook_url | absolute_url }}/recipe/0234-provider/ "Acknowledge Content Contributors"
 [0240]: {{ site.cookbook_url | absolute_url }}/recipe/0240-navPlace-on-canvases/ "Locate Multiple Canvases on a Web Map"
-[253-4]: {{ site.cookbook_url | absolute_url }}/recipe/0253-using-transcript-file/ "Using Transcript Files with Audio or Video Content" 
+# [0253-4]: {{ site.cookbook_url | absolute_url }}/recipe/0253-using-transcript-file/ "Using Transcript Files with Audio or Video Content" 
 [0258]: {{ site.cookbook_url | absolute_url }}/recipe/0258-tagging-external-resource/ "Tagging with an External Resource"
 [0261]: {{ site.cookbook_url | absolute_url }}/recipe/0261-non-rectangular-commenting/ "Annotation with a Non-Rectangular Polygon"
 [0266]: {{ site.cookbook_url | absolute_url }}/recipe/0266-full-canvas-annotation/ "Simplest Annotation"

recipe/0001-mvm-image/v4/manifest.json

@@ -32,4 +32,4 @@
         ]
       }    
     ]
-}
+}

recipe/0001-mvm-image/v4/recipe.md

@@ -30,4 +30,4 @@ This recipe is not for large images or deep zoom functionality. For this, see th
 
 
 {% include acronyms.md %}
-{% include links.md %}
+{% include links.md %}

recipe/0219-using-caption-file/index.md

@@ -1,53 +1,33 @@
 ---
-title: Using Caption and Subtitle Files with Video Content
+title: Using Caption Files with Video Content
 id: 219
 layout: recipe
-tags: [video, caption, subtitle, presentation]
-summary: "Providing a caption or subtitle file to a video resource."
+tags: [video, caption, presentation]
+summary: "Providing a caption file to a video resource."
 viewers:
  - Clover
  - Ramp
  - Aviary
  - Theseus
+v4-viewers:
 topic: AV
----
-
-
-## Use Case
-
-Captions and subtitles may be available for your video content and you may want to enable them for your IIIF video resources.
-
-## Implementation notes
-
-Caption and subtitle file formats are used to mark up the external text track resources in connection with the HTML track element of a video file. The markup file formats use time tags that allow for time alignment of the video content with the captions or subtitles.
-
-Offering the caption file as an Annotation on the Canvas that contains the media file itself enables us to express the relationship between the two. The `type` and `format` properties of the Annotation can be used by the client to identify files in a format supported by the media player for captions. The `motivation` value of `supplementing` indicates the fact that processing this Annotation is optional.
-
-In addition to this implementation, one should consider offering the captions or subtitles as multiple timed annotations, making the text available in multiple ways. See [Using Annotations for Timed Text][0079].
 
-While captions, subtitles, and transcripts each present some text interpretation of the A/V content, the ways in which they are consumed by users differ. For a more detailed discussion about these differences see [Transcripts, Captions, and Subtitles - General Considerations][0231].
+top_tabs:
+  - label: Version 3
+    content: "{% capture my_include %}{%- include_relative recipe.md version='3' -%}{% endcapture %}{{ my_include | markdownify }}"
+  - label: Version 4
+    content: "{% capture my_include %}{%- include_relative v4/recipe.md version='4' -%}{% endcapture %}{{ my_include | markdownify }}"
 
-## Restrictions
-
-Formats other than [WebVTT](https://w3c.github.io/webvtt/) (Web Video Text Tracks) are supported in IIIF, but may not be as widely supported in viewers.
-
-When using segmented WebVTT with HLS, see [Serving HLS Files][0257].
-
-## Example
-
-In this example we use a caption file in the WebVTT format, but other options include a subtitle file in the [SRT](https://en.wikipedia.org/wiki/SubRip) (SubRip Text) or [TTML](https://w3c.github.io/ttml3/index.html) (Timed Text Markup Language) formats, or other text-based format used for the same purpose.
-
-{% include manifest_links.html viewers="Clover, Ramp, Aviary, Theseus" manifest="manifest.json" %}
-
-{% include jsonviewer.html src="manifest.json" config='data-line="41-67"'%}
+---
 
-# Related recipes
+{{ theme.block-center-start }}
 
-- [Simplest Manifest - Video][0003]
-- [Providing Access to Transcripts of A/V Content][0017]
-- [Providing Alternative Representations][0046]
-- [Using Annotations for Timed Text][0079]
-- [Serving HLS Files][0257]
+{% include blocks/tabs.html  tabs=page.top_tabs %}
 
-{% include acronyms.md %}
-{% include links.md %}
+{{ theme.block-end }}
+<script>
+  if (!window.location.hash) {
+    let el = document.getElementById("version-3-heading");
+    el.className += " is-active";
+  }  
+</script>

recipe/0219-using-caption-file/recipe.md

@@ -0,0 +1,38 @@
+## Use Case
+
+Captions and subtitles may be available for your video content and you may want to enable them for your IIIF video resources.
+
+## Implementation notes
+
+Caption and subtitle file formats are used to mark up the external text track resources in connection with the HTML track element of a video file. The markup file formats use time tags that allow for time alignment of the video content with the captions or subtitles.
+
+Offering the caption file as an Annotation on the Canvas that contains the media file itself enables us to express the relationship between the two. The `type` and `format` properties of the Annotation can be used by the client to identify files in a format supported by the media player for captions. The `motivation` value of `supplementing` indicates the fact that processing this Annotation is optional.
+
+In addition to this implementation, one should consider offering the captions or subtitles as multiple timed annotations, making the text available in multiple ways. See [Using Annotations for Timed Text][0079].
+
+While captions, subtitles, and transcripts each present some text interpretation of the A/V content, the ways in which they are consumed by users differ. For a more detailed discussion about these differences see [Transcripts, Captions, and Subtitles - General Considerations][0231].
+
+## Restrictions
+
+Formats other than [WebVTT](https://w3c.github.io/webvtt/) (Web Video Text Tracks) are supported in IIIF, but may not be as widely supported in viewers.
+
+When using segmented WebVTT with HLS, see [Serving HLS Files][0257].
+
+## Example
+
+In this example we use a caption file in the WebVTT format, but other options include a subtitle file in the [SRT](https://en.wikipedia.org/wiki/SubRip) (SubRip Text) or [TTML](https://w3c.github.io/ttml3/index.html) (Timed Text Markup Language) formats, or other text-based format used for the same purpose.
+
+{% include manifest_links.html viewers="" manifest="v4/manifest.json" version="4" %}
+
+{% include jsonviewer.html src="v4/manifest.json" config='data-line="41-67"'%}
+
+# Related recipes
+
+- [Simplest Manifest - Video][0003]
+- [Providing Access to Transcripts of A/V Content][0017]
+- [Providing Alternative Representations][0046]
+- [Using Annotations for Timed Text][0079]
+- [Serving HLS Files][0257]
+
+{% include acronyms.md %}
+{% include links.md %}

recipe/0219-using-caption-file/v4/manifest.json

@@ -0,0 +1,67 @@
+{
+  "@context": "http://iiif.io/api/presentation/4/context.json",
+  "id": "{{ id.url }}",
+  "type": "Manifest",
+  "label": {
+    "en": [
+      "Lunchroom Manners"
+    ]
+  },
+  "items": [
+    {
+      "id": "{{ id.path }}/canvas",
+      "type": "Canvas",
+      "height": 360,
+      "width": 480,
+      "duration": 572.034,
+      "items": [
+        {
+          "id": "{{ id.path }}/canvas/page",
+          "type": "AnnotationPage",
+          "items": [
+            {
+              "id": "{{ id.path }}/canvas/page/annotation1",
+              "type": "Annotation",
+              "motivation": "painting",
+              "body": {
+                "id": "https://fixtures.iiif.io/video/indiana/lunchroom_manners/high/lunchroom_manners_1024kb.mp4",
+                "type": "Video",
+                "height": 360,
+                "width": 480,
+                "duration": 572.034,
+                "format": "video/mp4"
+              },
+              "target": "{{ id.path }}/canvas"
+            }
+          ]
+        }
+      ],
+      "annotations": [
+        {
+          "id": "{{ id.path }}/canvas/page2",
+          "type": "AnnotationPage",
+          "items": [
+            {
+              "id": "{{ id.path }}/canvas/page2/a1",
+              "type": "Annotation",
+              "motivation": "supplementing",
+              "provides": ["closedCaptions"],
+              "body": {
+                "id": "https://fixtures.iiif.io/video/indiana/lunchroom_manners/lunchroom_manners.vtt",
+                "type": "Text",
+                "format": "text/vtt",
+                "label": {
+                  "en": [
+                    "Captions in WebVTT format"
+                  ]
+                },
+                "language": "en"
+              },
+              "target": "{{ id.path }}/canvas"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

recipe/0219-using-caption-file/v4/recipe.md

@@ -0,0 +1,31 @@
+## Use Case
+
+Captions may be available for your video content and should be enabled for display on top of your IIIF video resources.
+
+## Implementation notes
+
+Caption markup file formats use time tags that allow for time alignment and synchronized display of the video content with the captions. Captions are typically overlaid on top of the video. To improve accessibility, IIIF media viewers should support both [WebVTT](http://en.wikipedia.org/wiki/WebVTT) and [SRT](https://en.wikipedia.org/wiki/SubRip) formats for caption files if possible.
+
+Offering the caption file as an Annotation on the Canvas that contains the media file itself enables us to express the relationship between the two. The `provides` property of the Annotation can be used by the client to identify caption files to be rendered on top of video content. The `format` property of the Annotation can also be used to verify that the file is in an appropriate format. 
+In addition to this implementation, one can also offer captions as multiple timed annotations, making the text available in multiple ways. See [Using Annotations for Timed Text][0079-4].
+
+While captions, subtitles, and transcripts each present some text interpretation of the A/V content, the ways in which they are consumed by users differ. For a more detailed discussion about these differences see [Transcripts, Captions, and Subtitles - General Considerations][0231-4].
+
+## Example
+
+In this example we use a caption file in the WebVTT format, but other options include a caption file in the [SRT](https://en.wikipedia.org/wiki/SubRip) (SubRip Text) or [TTML](https://w3c.github.io/ttml3/index.html) (Timed Text Markup Language) formats, or other text-based format used for the same purpose.
+
+{% include manifest_links.html viewers="" manifest="v4/manifest.json" %}
+
+{% include jsonviewer.html src="manifest.json" config='data-line="41-67"'%}
+
+# Related recipes
+
+- [Using Transcript Files with Video and Audio Content][0253-4]
+- [Using Caption and Subtitle Files in Multiple Languages with Video Content][0074-4]
+- [Using Annotations for Timed Text][0079-4]
+- [Providing Access to Transcripts of A/V Content][0017]
+- [Annotating a Poetry Reading][0103]
+
+{% include acronyms.md %}
+{% include links.md %}