feat: added docs, in readme and additional profile

README.md

@@ -201,7 +201,7 @@ In your Vercel project browse to Settings --> Environment Variables and edit the
 -   [Changing eCommerce Configuration](docs/ECommerceConfiguration.md)
 -   [Working with Pages](docs/WorkingWithPages.md)
 -   [Blogs](docs/Blogs.md)
--   [Video Captions](docs/VideoCaptions.md)
+-   [Automated Video Captions](docs/AutomatedVideoCaptions.md)
 -   [Debug / X-Ray Panel](docs/Debug-Xray-Panel.md)
 -   [Contribution Model (fork, PR, etc.)](https://github.com/amplience/dc-cli/blob/master/CONTRIBUTING.md)
 -   [FAQ](docs/FAQ.md)

components/cms-modern/Video/Video.tsx

@@ -41,13 +41,22 @@ const Video = ({ video, captions = true }: VideoProps) => {
                     type="video/mpeg4"
                 />
 
+                <source
+                    src={`https://${video.defaultHost}/v/${video.endpoint}/${video.name}/webm_720p?protocol=https`}
+                    data-res="High"
+                    data-bitrate="2000"
+                    data-label="high"
+                    type="video/webm"
+                />
+
                 <source
                     src={`https://${video.defaultHost}/v/${video.endpoint}/${video.name}/webm_480p?protocol=https`}
                     data-res="Medium"
                     data-bitrate="624"
                     data-label="Medium"
                     type="video/webm"
                 />
+
                 {captions && (
                     <track
                         label="English"

docs/AutomatedVideoCaptions.md

@@ -0,0 +1,107 @@
+# Automated Video Captions
+
+The Amplience platform has released the ability to automaticaly create video captions for a video.
+
+![Automated Video Captions](../media/automated-video-captions.png)
+
+## Pre-requisites
+
+**Amplience:**
+
+-   Content Hub
+-   Dynamic Media
+-   Access to setup video transcode profiles
+-   Amplience Credits
+
+**Configuration:**
+
+-   Video with audio (speech suitable for captions)
+-   Setup your transcode profile for captions
+-   Assign the transcode profile to your video
+-   Video to be published with captions
+
+## Technical implementation
+
+The video component can be found in this project at the following path `components/cms-modern/Video/Video.tsx`
+
+This component allows the user to toggle captions on or off. If they are on it will attempt to load the captions for the video to display.
+
+Example:
+
+```js
+{
+    captions && (
+        <track
+            label="English"
+            kind="captions"
+            srcLang="en"
+            src={`https://cdn.c1.amplience.net/c/${video.endpoint}/${video.name}-captions-en-US`}
+            default
+        />
+    );
+}
+```
+
+> Note: This demo is coded to work with english subtitles - see implementation notes below for a more generic solution approach.
+
+### Cross domain
+
+If your application is strict on security, you may wish to whitelist the domain in your security policy `https://cdn.c1.amplience.net` as well as ammend your video tag to have its `crossOrigin` attrbite set to "anonymous"
+
+Example:
+
+```html
+<video crossorigin="anonymous" />
+```
+
+See the video component for implementation.
+
+## Walkthrough
+
+1. Create your transcoding profile for captions for en-US following the [documentation](https://amplience.com/developers/docs/user-guides/assets/video/#captions-options)
+
+2. Upload a video to Content Hub. For this demo, ensure there is speech in English. An example can be found [here](https://presalesadisws.s3-eu-west-1.amazonaws.com/videos/automated-video-captions/Automatic%20video%20captions_Master_no%20sub.mp4) //TODO: Change URL to suitable hosting
+
+3. Assign your both your default profiles to the video and your new captions profile for en-US. For reference the default profiles are:
+
+    - `mp4_720p`
+    - `mp4_480p`
+    - `webm_720p`
+    - `webm_480p`
+
+4. Once the transcodes are complete, you can preview the video & publish.
+
+5. Create a new piece of content in the Amplience Dynamic Content CMS and use this video with captions enabled.
+
+## Notes for an actual implementation
+
+1. The manual steps for assigning profiles to videos and publishing can be automated as part of a bulk upload job.
+2. This demo is coded for english captions. In a dynamic implementation each video might have captions in different languages. Your front end should support this. See [Calling the delivery API for video data](#calling-the-delivery-API-for-video-data)
+
+### Calling the delivery API for video data
+
+You can draw everything you need dynamically for a video by calling the Delivery Video API when a video is published.
+
+Example request:
+`https://cdn.media.amplience.net/v/nmrsaalphatest/Automatic video captions_Master_no sub.json?metadata=true&protocol=https`
+
+Will provide all of the information required to render a video which include:
+
+-   The video title: `meta.title`
+-   The video description: `meta.description`
+-   Image to display as the main thumbnail: `meta.mainThumb.src`
+-   Captions available for the video `meta.metadata.captions`
+    -   Each is in the format `"{language}-{country}": "{captions-name}"`
+    -   Example: `"en-US": "Automatic video captions_Master_no sub-captions-en-US"` where the `captions-name` would be used to constuct the captions URL and the `language` would be used to populate the `srcLang` attribute in the track tag for the video
+-   A full list of transcode profiles to display `<source>` tags for the video: `media []`
+-   Lots more that can be found on the [Amplience Dynamic Media Playground](https://playground.amplience.com/di/app/#/video)
+
+> Note: If you have captions as seperate profiles for rendering you may wish to omit them from dynamic drawing using the `profile` or `profileLabel` attribute
+
+## Reading Materials
+
+-   [Docs](https://amplience.com/developers/docs/user-guides/assets/video/#captions-options)
+-   [Blog](https://amplience.com/blog/automatically-generate-video-captions-Amplience/)
+-   [Release Notes](https://amplience.com/developers/docs/release-notes/2024/auto-captions/)
+
+[back](../README.md)