Level 4

Solved

Load Dynamic Media Video in HTML

Forum|Forum|1 year ago
January 9, 2025
2 replies
1993 views

Hello All!

How to load a video from Dynamic Media in sightly? I have an adaptive video set and I would like to use it in sightly with the simple html video element. Is it possible to do it? or I definitely need to have the Dynamic Media Video Viewer which has the steps load a script and followed by a code to embed the viewer? link here.

In Dynamic Media server I have a file link which has a .m3u8 extension, I believe this is to be used for adaptive streaming based on the network and screen size - which is exactly I want to achieve. I also see three mp4 files which are encoded, my fallback option is to load the mp4 files as separate sources so that the browser picks up the needed one. Before doing the implementation, I would like to get suggestions from you!

Thank you!

Regards,

Ramkumar

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by konstantyn_diachenko

In any case I'd suggest investigate the implementation of Dynamic Media component for video (Video Viewer). It covers this case.

Of try something like this:

<video>
    <source src="playlist.m3u8" type="application/x-mpegURL">
</video>

Browser Compatibility:
Safari (macOS/iOS):

Fully supports HLS (HTTP Live Streaming) natively without additional libraries.
Works directly as shown in your code.

Chrome, Edge, Firefox (Windows/macOS):

Do not natively support HLS in the <video> element.
Requires a JavaScript library, such as HLS.js, to play HLS streams.

Android Browsers:

Support depends on the browser and OS version. Chrome and Firefox on Android may require HLS.js.

Fix for Non-Native Support:
Use HLS.js, a JavaScript library that enables HLS playback on browsers without native support.

<video id="videoPlayer" controls width="640" height="360"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
    if (Hls.isSupported()) {
        var video = document.getElementById('videoPlayer');
        var hls = new Hls();
        hls.loadSource('playlist.m3u8');
        hls.attachMedia(video);
    } else if (video.canPlayType('application/x-mpegURL')) {
        // For Safari and browsers with native HLS support
        video.src='playlist.m3u8';
    } else {
        console.error('HLS not supported in this browser.');
    }
</script>

konstantyn_diachenko

Community Advisor

Hi @rk_pandian ,

You can use Dynamic Media Core Components like Dynamic Media. It encapsulates logic to how render video in HTML either in adaptive or progressive mode.

Video: https://experienceleague.adobe.com/en/docs/experience-manager-learn/assets/dynamic-media/tutorials/using-dm-components-on-site-page

Doc:

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/assets/dynamic/video

https://experienceleague.adobe.com/en/docs/experience-manager-learn/assets/dynamic-media/dm-with-aem-sites/dynamic-media-core-components

https://experienceleague.adobe.com/en/docs/experience-manager-learn/assets/dynamic-media/dynamic-media-overview-feature-video-use

Best regards,

Kostiantyn Diachenko.

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.

rk_pandianAuthor

Level 4

Hi @konstantyn_diachenko ,

Thank you for your reply. Unfortunately, thats not what I'm looking for, let me rephrase my question for better clarity: I have a custom video component which renders the video using html video element <video>. How to load videos from Dynamic media in this case so that the correct video is picked up by the browser based on the network and screen size?

Regards,

Ramkumar

konstantyn_diachenko

Accepted solution

Community Advisor

In any case I'd suggest investigate the implementation of Dynamic Media component for video (Video Viewer). It covers this case.

Of try something like this:

<video>
    <source src="playlist.m3u8" type="application/x-mpegURL">
</video>

Browser Compatibility:
Safari (macOS/iOS):

Fully supports HLS (HTTP Live Streaming) natively without additional libraries.
Works directly as shown in your code.

Chrome, Edge, Firefox (Windows/macOS):

Do not natively support HLS in the <video> element.
Requires a JavaScript library, such as HLS.js, to play HLS streams.

Android Browsers:

Support depends on the browser and OS version. Chrome and Firefox on Android may require HLS.js.

Fix for Non-Native Support:
Use HLS.js, a JavaScript library that enables HLS playback on browsers without native support.

<video id="videoPlayer" controls width="640" height="360"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
    if (Hls.isSupported()) {
        var video = document.getElementById('videoPlayer');
        var hls = new Hls();
        hls.loadSource('playlist.m3u8');
        hls.attachMedia(video);
    } else if (video.canPlayType('application/x-mpegURL')) {
        // For Safari and browsers with native HLS support
        video.src='playlist.m3u8';
    } else {
        console.error('HLS not supported in this browser.');
    }
</script>

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.

kautuk_sahni

Community Manager

@rk_pandian Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

Kautuk Sahni

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded