Configure the Custom Video Component

[Subashree]

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>

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

[Jvenkat]

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

[Kamal_Kishor]

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

[EstebanBustamante]

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

[arunpatidar · Accepted solution]

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>