Load Dynamic Media Video in HTML

[rk_pandian]

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

[konstantyn_diachenko]

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/u...

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...

https://experienceleague.adobe.com/en/docs/experience-manager-learn/assets/dynamic-media/dynamic-med... 

Best regards,

Kostiantyn Diachenko. 

[rk_pandian]

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]

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>