Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

Configure the Custom Video Component

Avatar

Level 2

Hi All,
I've created the custom video component using sling model from scratch to get videos from DAM itself.When I'm adding the video component.need to select the path of that video.Once it's selected, The component is showing, But the video is not rendering in the page. When I've inspected the page, the VideoUrl is not getting and also attached the screenshot of that. I've given DAM_PATH="/content/dam"
Here is the HTL Script ,Component Definition and Java methods for getting Video Asset given below.
<!-- Component Definition -->

 <videoAssetPath
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                emptyText="Select the Video Asset from DAM"
                                                fieldLabel="Video Asset"
                                                name="./videoAssetPath"
                                                required="{Boolean}true"/>
<!--/* videocomponent.html */-->
<div data-sly-use.model="com.adobe.aem.guides.wknd.core.models.VideoComponentModel" data-sly-unwrap>
    <video controls>
        <source src="${model.videoUrl}" type="video/mp4">
    </video>
</div>
<sly data-sly-call="${placeholder @ isEmpty=true}"></sly>

Subashree_0-1704970560519.png
<!--Java methods -->

public VideoComponentModel(Resource resource) {
        this.resource = resource;
    }

 
    // Method to get video URL
    public String getVideoUrl() {
    Asset videoAsset = getVideoAsset();
    if (videoAsset != null) {
        Rendition originalRendition = videoAsset.getOriginal();
        return originalRendition != null ? originalRendition.getPath() : "";
    }
    return "";
}


    // Helper method to get the video asset
    private Asset getVideoAsset() {
        ResourceResolver resolver = resource.getResourceResolver();

        // Assuming your video is stored under /content/dam, adjust the path accordingly
        String videoPath = DAM_PATH + resource.getPath(); // Use your specific DAM path

        // Use the resolver to get the Asset
        return resolver.getResource(videoPath).adaptTo(Asset.class);
    }
Provide suggestions on this.

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Subashree 

I think, the path you have selected from pathfield is the full video path.

you can use videoAssetPath property directly or via sling model like below

 

<video controls data-sly-test.videoUri="${properties.videoAssetPath}">
   <source src="${videoUri  @ context='uri'}" type="video/mp4">
</video>


Arun Patidar

View solution in original post

4 Replies

Avatar

Level 4

Hello @Subashree 

 

Can you please try to use this: 

 

private Asset getVideoAsset() {
ResourceResolver resolver = resource.getResourceResolver();
ValueMap properties = resource.adaptTo(ValueMap.class);
String videoPath = properties.get("videoAssetPath", String.class);
return resolver.getResource(videoPath).adaptTo(Asset.class);
}

 

By doing so, the video path can be dynamic and decided by the author, not hardcoded. This would also resolve if the resource were actually an asset or not as the wrong resource would not be given, rather the null would be returned, indicating the asset couldn't be found.

 

Hope this helps.

 

Thanks,

Venkat

Avatar

Level 9

@Subashree : Will this property 'videoAssetPath' not give you the direct path of video asset and you can directly try to adapt this path to a resource first and then adapt the resource to an Asset?
Please try with this..

    @ValueMapValue
    private String videoAssetPath; //gettig videoAssetPath property from dialog.

    // Helper method to get the video asset
    private Asset getVideoAsset() {
        ResourceResolver resolver = resource.getResourceResolver();
        // Use the resolver to get the Asset
        return resolver.getResource(videoAssetPath).adaptTo(Asset.class);
    }


Sling Model documentation: https://sling.apache.org/documentation/bundles/models.html

Also, please debug the value of 'videoPath' in your current code and see if it is really the path of a valid video asset in your DAM.

Avatar

Community Advisor

What @Kamal_Kishor suggested is the preferred way to obtain the video path in your Sling model. I encourage you to use that method as well. However, I believe the issue may lie in the fact that you are missing context in the HTL. Try something like the example below:

<video controls>
        <source src="${model.videoUrl @ context='html'}" type="video/mp4">
    </video>

 Please read more about HTL context here: https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#121-display-context 

Hope this helps



Esteban Bustamante

Avatar

Correct answer by
Community Advisor

Hi @Subashree 

I think, the path you have selected from pathfield is the full video path.

you can use videoAssetPath property directly or via sling model like below

 

<video controls data-sly-test.videoUri="${properties.videoAssetPath}">
   <source src="${videoUri  @ context='uri'}" type="video/mp4">
</video>


Arun Patidar