Video component on page to play videos

[mgurney-leappoint]

Is there a component that can be used to play video's on a page in an embedded player without using a details page ?

We have a site built with ASC and we are trying to add a video component to a page to display multiple video's that can be played directly in the browser, if we select a video from a search results page and load the details page then the video component works for that individual asset. however we would like to place this on a page along with other video's and allow an embedded player to display and play each video.

Screenshot attached of desired result

[davidjgonzalez]

@mgurney-leappoint - you can absolutely load the path to a video asset rendition (original, or otherwise) into a src for a HTML vide player, and you can have multiple on the page.

1. You need to understand/figure out how youre going to determine the list of AEM video assets to render in these players. (ex. Is this some parameterized list? are these other videos derived from some "main" video? etc.)
2. Then create a custom component that will display the videos.
3. The custom's component's Sling Model will collect the videos to display based on your decision in Step 1.
4. This cusotm Sling Model will expose these video aseets via a public getter, such as getVideos()
5. Make a custom HTML for your component, and use's the Sling Model. This HTML just has to iterate over the results of getVideos() and render the <video src=${video.path}"> HTML tag..

You can make getVideos() return a list of ASC AssetModels objectgs or AEM's Assets objects. Since youre in the context of ASC i'd probably go with the former since its a bit more robust.

As you start developing, happy to spot check your Sling Model and HTL if you post it back!