Authoring a video file in a image component.

[Shreyas_tm]

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.

[A_H_M_Imrul]

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

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

Thanks...

[Shreyas_tm]

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 · Accepted solution]

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 

[Shreyas_tm]

Nice suggestion!

We will try it out.

Thanks and Regards,

Shreyas