Configure the Custom Video Component | Community
Skip to main content
S
Subashree-1
Level 2
January 11, 2024
Solved

Configure the Custom Video Component

  • January 11, 2024
  • 4 replies
  • 944 views

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.

 

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 arunpatidar

Hi @subashree-1 

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>

4 replies

J
JagarlamudiVe
Level 4
January 11, 2024

Hello @subashree-1 

 

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
    Community Advisor
    Kamal_KishorCommunity Advisor
    Community Advisor
    January 11, 2024

    @subashree-1 : 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
      Community Advisor and Adobe Champion
      EstebanBustamanteCommunity Advisor and Adobe Champion
      Community Advisor and Adobe Champion
      January 11, 2024

      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
        arunpatidar
        Community Advisor
        arunpatidarCommunity AdvisorAccepted solution
        Community Advisor
        January 11, 2024

        Hi @subashree-1 

        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
          Terms & ConditionsAccessibility statement

          Loading footer...