Using Dynamic Media 360 Videos and Custom Video thumbnail with AEM Assets

Dynamic Media Viewer enhancements in AEM 6.5 includes the addition of support for 360 video rendering, 360 media viewers (video360Social and video360VR) and the ability to select custom video thumbnails.

Transcript
Hey everyone. In this video we are going to discuss Dynamic Media enhancements introducing AEM 6.5. Significant enhancements include the support for 360-degree videos and the ability to choose a custom thumbnail for your Dynamic Media videos. So, why do we need 360 videos? 360-degree videos, also known as vertical videos, are video recordings where a view in every direction is recorded at the same time, shot using an omni-directional camera or collection of cameras. During playback on a flat display, the user has control of the viewing direction and playback on mobile devices, typically leverage building gyroscope control. It lets you expand beyond the limits of a single photography. Marketers can provide users an engaging experience with the help of 360-degree videos. Let’s get started. Before we check out Dynamic Media enhancements, you need to make sure that your AEM instance is configured correctly. Dynamic Media 360-degree is supported only for an AEM instance running on Dynamic Media scene7 run mode. You can make sure that your system is in Dynamic Media scene7 run mode by navigating to Tools, Operation, and then System Overview. Make sure that instance run mode is dynamicmedia_scene7. Note that the 360 video is not supported in Dynamic Media Hybrid mode. Also, to enable this feature, make sure your AEM instance is connected to Dynamic Media account via Cloud services. We are using the 6.5 version of AEM for this video, and no additional configuration is required at this point. Let’s navigate to AEM Assets folder and upload a video captured in 360. When you upload a video, by default, Dynamic Media processes the footage as a 360-degree video, if it has an aspect ratio of 2:1. That is, width to height ratio is 2:1. Let’s create a new folder called 360-degree video and open to view its folder properties. Let’s assign the out-of-the-box adaptive video encoding profile to this folder. Rendering 360-degree content puts higher requirements for source video resolution and for encoded rendition resolution than standard non-360-degree video does. Using out-of-the-box adaptive video profile, which comes with the system, will result in lower perceivable video 360-degree quality, than you would get for non-360-degree videos encoded with the same settings rendered with non-360 video viewer. If high-quality 360-degree video is a requirement, make sure that original 360-degree video content is of 1080P or even 4K resolution. You can also create a custom adaptive video profile with higher quality rendition and process 360 video content in a dedicated folder in AEM. The downside of this approach is obviously higher network and CPU consumption on the NU sources side. Let’s upload a sample 360 video to our folder, and you can notice our video is being currently processed. At this point, our video has completed processing and is ready to be used. Note that the video that we just uploaded has a width to height ratio of 2:1. From the asset card view, you can play a 360 video, which gives you a little preview of the video that’s played within the card view. Note that the card view preview is a non-360 rendition of the original video and might look distorted. Now, let’s open the video to view it. If you click on the play video button, you can notice the video being played, but it does distort it. The viewer doesn’t consider this as a 360 video, but as a standard video instead. Let’s select the different viewer options available for this video. There are four video viewers listed here. Video and Video_social viewers are meant for normal video viewing. We have two new viewers for Dynamic Media 360-degree videos: Video360_social and Video360VR. Let’s check out the difference between these viewers. Select the Video360_social viewer. The viewer is meant for viewing 360 videos for web sites and has basic video playback viewer features and social controls. The user can adjust the point of view using UI controls. If your video file has an audio integrated, point of view and audio file may not be in sync, if user decides to change the default point of view. Audio doesn’t sync with the point of view automatically. For video 360VR viewer, audio associated with the video is played in stereo mode. The manual point of view control is specific, but gyroscopic controllers enable for point of view controls. Social features are disabled for this viewer. In both the cases, under the hood, 360 video content is delivered with the new video 360 viewer HTML5 Dynamic Media viewer. The viewer provides all the standard API and embedding methods supported by other HTML5 viewers. Dynamic Media 360 viewers discussed above supports two types of interaction. The first one is video playback, and the second one is point of view navigation. Video playback is managed by standard video controls and available in existing video viewer. Back play, pause button, seek bar, mute and unmute, and volume controls. Point of view navigation is done with mouse track on desktop systems and swipe on touch devices. When rear mode is enabled, mouse and touch controls are disabled and building device gyroscope is used instead. Let’s explore how we can use Dynamic Media 360 videos on AEM sites. From your AEM homepage, navigate your sites’ editable templates and open the template editor for your website. Let’s select the homepage template for We_Retail site and open to edit it. Click on the Layout Container component policies and search for Dynamic Media under Allowed Components. Under Dynamic Media category, select the Video 360 Media components and then save your changes. From your AEM homepage, navigate to Sites and open We_Retail English homepage to edit it. From the component finder, perform the search for the new 360 video component, and drag-drop it to your homepage beneath the banner in each component. Using asset finder, look for the asset reuploaded in the previous step and drag-drop 360 video onto the 360 media component that we added in the previous step. Note that the 360 media component only supports 360 videos. Now click on the video 360 media component and select the settings option. For Dynamic Media 360 video, you have two viewer presets available: Video360_social and 360 Video VR. Since we are adding this video to a website, let’s select the Video360_social viewer preset and then save your changes. Let’s click on the page preview option, and you can see the Dynamic Media 360 on your site page.
You also have an option to add just a point of view for your videos and other video playback options like pause, play, mute, volume increase, volume, et cetera. 360-degree video player also supports auto-rotation on page load, and you can notice the social sharing option to the top right corner of your video player. Let’s switch the viewer preset to Video360VR.
And you can see the point of view navigation is disabled. For Video360VR viewer, manual point of view control is disabled, but gyroscopic control is enabled for point of view controls. Another enhancement introduced for Dynamic Media video is the ability to select a custom video thumbnail for your Dynamic Media videos. Let’s navigate to AEM assets window and open an asset folder. Make sure that the folder has a video profile added to it. I have added the out-of-the-box adaptive video encoding profile for this folder. Let’s upload a video to our folder. Once a video gets processed completely, you can notice a thumbnail added to the card view for your Dynamic Media video. The video thumbnail gets randomly generated. Dynamic Media introduces the capability to either set up an image from AEM assets to be chosen as the video thumbnail, or select a frame from the video itself to be used as the thumbnail. Let’s see how we could do that. Select the asset and click on the view properties option. You can notice the existing thumbnail for this video. Click on the Change Thumbnail option, and you can see a window, which displays the current thumbnail and provides you with two options to change the existing thumbnail. Let’s select the thumbnail from assets option and navigate to find a thumbnail for your video and then save your changes. Now let’s change the thumbnail for our video using the second option. Click on the Select Frame from Video option and then play the video. Pause the video when you have found the right poster image and then save your changes. Note that thumbnail processing may take up to a couple of minutes. You should now be able to view a custom thumbnail for your Dynamic Media video, selected from your video frames. Dynamic Media enhancements introduced in AEM 6.5 includes the support for 360-degree video rendering and the ability to choose a custom video thumbnail for your Dynamic Media videos.
NOTE
Video assumes that your AEM instance is running on Dynamic Media S7 mode. Instructions on setting up AEM with Dynamic Media can be found here. When you upload a video, by default, Dynamic Media processes the footage as a 360 video, if it has an aspect ratio of 2:1. i.e., width to height ratio is 2:1.
NOTE
Dynamic Media 360 Media components support 360 videos only.

Dynamic Media 360 Videos

360-degree videos, also known as spherical videos are video recordings where a view in every direction is recorded at the same time, shot using an omnidirectional camera or collection of cameras. During playback on a flat display, the user has control of the viewing direction, and playback on mobile devices typically leverage built-in gyroscope control. It lets you expand beyond the limits of single photography. Marketers can provide users an engaging experience with the help of 360 videos. Let’s get started. The panoramic image aspect ratio criterion can be modified in the company’s DMS7 configuration by specifying the double property s7PanoramicAR at /conf/global/settings/cloudconfigs/dmscene7/jcr:content.

Dynamic Media 360 Videos

Dynamic Media video now supports the ability to select a custom thumbnail for your video. A user can either select an existing asset from AEM Assets or select a video frame as the thumbnail.

Dynamic 360 Media Viewers

**Video360Social Viewer**
**Video360VR Viewer**
Dynamic Media Run Mode
Dynamic Media Scene7 Mode only
Dynamic Media Scene7 Mode only
Use Case
For websites and devices that don't support gyroscope
Provides a Virtual Reality experience for a device that supports gyroscope
Audio - Stereo Mode
No
Yes
Video Playback
Yes
Yes
Point of view navigation
  • Mouse drag (on desktop systems)
  • Swipe (touch devices)
  • Mouse and drag options are disabled
  • Uses built-in gyroscope
HTML5 Player
Yes
Yes
Social sharing options
Yes
No

Additional Resources additional-resources

Configuring Dynamic Media in Scene7 mode

recommendation-more-help
a483189e-e5e6-49b5-a6dd-9c16d9dc0519