Dynamic Media video and viewer best practices
Learn about best practices for publishing and optimizing video in AEM Dynamic Media, including adaptive streaming, smart cropping for different screen sizes, custom viewer presets, and support for captions, audio tracks, and chapter markers. It emphasizes how to enhance viewer experience, accessibility, and marketing impact across devices.
Video is increasingly recognized as the best media and content type that consistently drives powerful engagement and conversion metrics. To fully realize the powerful marketing potential of video publishing is to manage the more complex details of optimizing video for web consumption, like adding support to address all audiences and make the viewer experience the best it can be. This demo will explain some best practices to make video publishing a addition to any marketing content supply chain story. Besides understanding the basics of how video is optimized for playback on any device, we鈥檒l discuss easily repurposing horizontally produced video for vertical screens automatically, adding closed captions in multiple languages to any video, and leveraging the poster frame image as an often overlooked marketing opportunity.
Considering the very large size of source video, sometimes called the mezzanine version of a final flattened source video, video publishing solutions need to pre-optimize the video to playback on a variety of devices, each with different throughput and video size requirements. To achieve this, we create a set of differently sized and compressed video renditions stored in a collection called an adaptive video set. During playback, the video viewer requests whichever video rendition that plays back the best without stalling and checks this every four seconds, switching to another rendition if needed. The adaptive video set, that collection of optimized for playback videos, is created whenever a video is uploaded or reprocessed based on a video processing profile that is attached to the upload folder. This one video processing profile manages the creation of three renditions for the adaptive video set, and also three ways to crop a video if the viewer playback window ratio is different than the source video鈥檚 ratio. To illustrate the often invisible and hard to see switching between renditions, this video switches every eight seconds between resolutions. Higher resolutions appear sharper, and lower resolutions appear softer and blurrier. The video viewers can make this switch every four seconds, while in reality the change in sharpness is imperceivable in most cases. How do we manage showing a horizontal video in a vertical format? Smart Crop for Video will allow a video processed for Smart Crop to intelligently fill the different aspect ratio of a viewer window with as much video content as possible. This repurposes horizontal video for vertical screens and vice versa. The Smart Crop for Video settings here will allow the viewer to resize, cropping into the video to match any of these video ratio sizes that might be needed without adding any new renditions to an adaptive video set. Smart Crop for Video really affects the viewer and doesn鈥檛 create any new binaries to be managed by the dam or any viewer request. During video processing, if a Smart Crop function is part of a video profile, Dynamic Media will track the action center, the area of interest in the video, and always keep the center of interest in the center of the video playback regardless of the playback window ratio.
Smart Crop for Video is a powerful way to optimize videos for different screen ratios that the source video perhaps was not originally designed for, all without creating extra video renditions. In this live example, the viewer is responding to the differing window sizes, Smart Cropping the video during the window resizing, ensuring optimized playback. With this video selected, the viewers page shows different viewers I can choose to generate copy URL or embed code for. Autoplay Social Video are custom viewer presets I created and can use with any video. Two Smart Crop viewers are available since I processed this video with Smart Crop function. Video and Video Social are default viewers, Video Social providing sharing options. If a video is published, then the URL button is available to copy the URL or embed code. Viewer presets are managed and created in the AEM Tools Assets Preferences page. Select viewer presets, navigate to the kind of viewer you wish to make or customize, and after editing, save it with a new name will create a new viewer preset available to any appropriate dynamic media asset type. Remember, for the copy URL to be made available for any viewer preset, the asset or video must also be published to dynamic media. AEM also provides dynamic media components to easily drag and drop onto a site鈥檚 page. These components can be populated with any dynamic media assets like images or video. If video, users can select which video preset to use with the component. Often overlooked is the poster frame or starting image that represents the video. This image, which doesn鈥檛 change until the video starts playing, is valuable marketing real estate and should be customized to the marketers advantage. For this, we recommend using a custom thumbnail. In dynamic media, the video thumbnail is the same as the poster frame and will load first in all viewers. Use the change thumbnail tool to load your own custom poster frame image and make the video more compelling to press the play button.
This composite image of many rollover features being shown at the same time for illustrative purposes shows many of the JavaScript viewer options. Social viewers will show a few social sharing options seen in the upper right hand corner of the viewer. This scrubber bar at the bottom of the video is also showing chapter markers, the thin gray tick marks along the length of the video, one including rollover title info for that chapter. On the lower right are options for audio levels and closed captions and or alt audio tracks. Closed captions and alternate audio are both managed on the closed caption and audio tab on this assets properties page. This shows the four closed captions I automatically generated for this video and also the three alternate language voiceover files I added to allow listeners who understood these languages to hear the original spoken dialogue in those languages. It鈥檚 highly recommended for accessibility standards to at least add one closed caption track to your video, probably a closed caption of the original language soundtrack. Dynamic media can easily and automatically add a number of closed captions to the video by listening to the video and generating closed caption .VTT file containing the text and timecode for playback. You can easily see what one of these .VTT closed caption files looks like by downloading one that you鈥檝e generated. Opening a downloaded closed caption .VTT file shows a list of timestamps timed to show the text at that moment during playback. To create closed captions for video with a dialog, on the captions and audio track tab, choose create captions and choose convert audio tracks. Select the original audio track. For languages, add as many language choices as you wish to populate the list of choices in the viewer. Once finished, save and close this window which will kick off a processing of this project, taking a few minutes. Once processing is complete, publish the video to make the closed captions available in the viewer. Authors can also add alt or alternate language audio options to a video viewer. In the captions and audio tab, click the upload audio tracks button, navigate to the mp3 audio tracks you wish to add to the video and upload them. Close and save this window and make sure to publish this video asset to make these audio tracks available to the viewer. If you鈥檙e not seeing your recently added closed captions or alt audio available in the viewer, it鈥檚 probably because the status was left as processed and needs to be changed to published, shown as blue. Simply publish the asset and all the processed files will change to publish and become available in the viewer. Chapter markers, those tick marks and the video that display in the scrubber bar is another way of using .VTT files. You can add chapter markers to your viewer by manually editing the copy URL to point to a published .VTT file. Get the static asset copy URL for any .VTT file like the chapter markers file by logging into Dynamic Media Classic and clicking on the assets copy URL under the URLs and embed code section.
Generating a referrer鈥檚 report from the reporting tools can show who鈥檚 accessing which web properties are consuming your published videos. In Excel I filtered this report to show just the .mp4 files which are the video files being served up whenever a website plays a video. Generate this kind of report using the report interface, create a new report and choose dynamic media delivery. Choose a date range to build the report for and in the columns tab add the referrer metadata value to the report options. Once this report is generated you can analyze who, what websites are requesting your published videos. To recap, this tutorial provides a series of best practices and ways to use functions that enhance and optimize the powerful video and rich media publishing workflows that are part of the AEM Dynamic Media offering. Thank you for your time.
Supporting resources
- [Simulated marketing video and viewer demonstrated in video](https://techsupport.scene7.com/s7viewers/html5/SmartCropVideoViewer.html?asset=ajhcom/smart train promo vo preroll leader counter_1-AVS&config=ajhcom/SmartCropVideo_social&serverUrl=https://techsupport.scene7.com/is/image/&contenturl=https://techsupport.scene7.com/is/content/&videoserverurl=https://techsupport.scene7.com/is/content&navigation=https://techsupport.scene7.com/is/content/ajhcom/brand%2Dcontent/brand11/video%2Dprocessing/video%2Dsupport%2Dfeatures%2Dbest%2Dpractices/sonomacountysmarttrainchapters.vtt)
- AEM Assets Dynamic Media video best practices documentation