Using the Video Player in AEM Dynamic Media using-the-video-player-in-aem-dynamic-media
AEM Dynamic Media video player used to rely on Flash runtime to support adaptive video streaming on desktop clients and browsers became more aggressive on flash-based content streaming. With the introduction of HLS (Apple’s HTTP Live Streaming video delivery protocol), content can now be streamed without relying on flash.
Transcript
In this video I would like to show you how non flash video based dynamic media player, can be used to AEM 6.3. Before we get started, make sure you’re using the 6.3 version of AEM. And dynamic media services, needs to be configured under cloud services.
Click on the Adobe Experience Manager logo and then select tools. Select assets and then click on your viewer presets. You should be able to see a list of presets and select the one you would like to publish. Click on the Video social, Zoom_dark and Zoom_light and then click on the Publish option. Selected presets are published successfully now. Let’s navigate back to AEM assets folder and check out some of the available options, to use your video assets on your website and navigate to your video folder. Open the video file which you would like to preview.
From the left dropdown, select the viewers option. You should be able to see a list of viewer presets published in the previous step listed here. Let’s click on the video viewer preset. If your website is hosted on AEM, you also can add the video directly to your AEM page. Let me show you how we can do this.
Open a new tab and navigate to your We.Retail, English homepage.
And then, add a dynamic media component to your page. Dynamic media component access a place holder for your dynamic media content and let’s you select the viewer preset and modify your look and feel of the video using modifiers.
Drag and drop a video from the asset finder onto your dynamic media component and select the viewer preset that we published in the previous step.
Click on the page preview option to see how your video looks on the We.retail page.
If your website is not hosted on AEM, you have two options to use the video on your page. You can either generate an embed code and then use this code on your website. Or get a URL for the video, and basically the URL on your page.
I would also like to discuss a little bit about how non flash based video playback, improves user’s experience. Let’s open the video. We publish on a new browser, using the scene7 URL and inspect the browser network activity.
By loading your webpage under your browsers network activity, you can notice that there are various dark ts.scripts getting loaded.
The dark ts.scripts that are getting loaded on your network activity, are media segments of a video file.
For a single video file, different segments are created and for the same segment different variations are created. Based on the bandwidth, browser type or device type, variations of different segments are selected and combined together dynamically to streaming video of higher quality.
The video player is adapted to automatically serve the right video, based on device detection and network speed connection, and also responsible to automatically resize based on page layout. Experience manager assets provides large scale, fast, uninterrupted video playback to global users through full CEM based media delivery.
You can also disable your flash settings on your browser and try to play the video. Let’s go ahead and disable the flash settings on your browser.
Refresh your browser, and you should be able to see your video still playing. Adaptive video streaming no longer depends on flash.
Quick look into Non Flash Video Player quick-look-into-non-flash-video-player
HLS browser support is as follows, for unsupported browsers we fallback to progressive video delivery
NOTE
Dynamic Media Hybrid does NOT support video streaming on Internet Explorer 11 as of March 15th, 2022. Please upgrade to 6.5.12 or higher to fall back to progressive playback on IE 11.
Device
Browser
Video playback mode
Desktop
Internet Explorer 9 and 10
Progressive download
Desktop
Internet Explorer 11+
Dynamic Media - Scene 7 mode: HLS video streaming
Dynamic Media - Hybrid mode: Progressive download
Desktop
Firefox 23-44
Progressive download
Desktop
Firefox 45 or later
HLS video streaming
Desktop
Chrome
HLS video streaming
Desktop
Safari (Mac)
HLS video streaming
Mobile
Chrome (Android 6 or earlier)
Progressive download
Mobile
Chrome (Android 7 or later)
HLS video streaming
Mobile
Android (Default browser)
Progressive download
Mobile
Safari (iOS)
HLS video streaming
Mobile
Chrome (iOS)
HLS video streaming
Mobile
Blackberry
HLS video streaming
recommendation-more-help
a483189e-e5e6-49b5-a6dd-9c16d9dc0519