Authoring a video file in a image component. | Community
Skip to main content
S
Shreyas_tm
Level 3
September 22, 2023
Solved

Authoring a video file in a image component.

  • September 22, 2023
  • 1 reply
  • 1659 views

The thing is we are having an image component and it is a thumbnail and it is having a download option with it. So when the download option is clicked the video should be available. 

So, my query is , can a video file configured within the image component. If not which component can be used so that the image/thumbnail is visible and also the video.

If not how can we proceed for this requirement.

Please let me know all the possibilities to try for this...

 

Thanks.

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 A_H_M_Imrul

Hello @shreyas_tm ,

 

Thanks for the detail.

 

I would suggest to create custom component, which will allow the author to put the thumbnail and the path of video file. The component needs to render the following markup: 

 

<video width="320" height="240" poster="/images/w3schools_green.jpg" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

 

 

The poster is the thumbnail and src should be the video file path. The player it self provide a download button as well (click on three dots). Here is an working example: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_poster

 

Thanks 

1 reply

A_H_M_Imrul
Community Advisor
A_H_M_ImrulCommunity Advisor
Community Advisor
September 22, 2023

Hello @shreyas_tm,

 

I assume you have the video file that you want to show on the web page, in such case I think you can proceed with dynamic media player.

https://experienceleague.adobe.com/docs/experience-manager-learn/assets/dynamic-media/video/dynamic-media-video-player-feature-video-use.html?lang=en  

 

If you can share more detail, will be able to help better

Thanks...

    S
    Shreyas_tmAuthor
    Level 3
    September 22, 2023

    Thanks for the suggestion...

     

    Brief: The thing is, we are actually having an image component which is actually configuring an image thumbnail with a download option for it. So, when we click on the download option the image opens on a new tab and it can be downloadable.

    So, Our aim now is to have a video along with it. That is, the image thumbnail should be visible as it was before and when we click on the download option instead of image, the video should be available and can be downloaded. Another thing is our AEM version is 6.5

    So, please suggest are there any ways to try out these things?

     

    Thanks!

      A_H_M_Imrul
      Community Advisor
      A_H_M_ImrulCommunity AdvisorAccepted solution
      Community Advisor
      September 22, 2023

      Hello @shreyas_tm ,

       

      Thanks for the detail.

       

      I would suggest to create custom component, which will allow the author to put the thumbnail and the path of video file. The component needs to render the following markup: 

       

      <video width="320" height="240" poster="/images/w3schools_green.jpg" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

       

       

      The poster is the thumbnail and src should be the video file path. The player it self provide a download button as well (click on three dots). Here is an working example: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_poster

       

      Thanks 

        Terms & ConditionsAccessibility statement

        Loading footer...