Play dynamic video throught js

[odabio]

Hi everyone does anyone knows how can I start playing the video automatically after the user clicks on the button ?

In my html script I call the dynamic media component:

<div class="dialog__content" data-sly-resource="${'video' @ resourceType='dam/components/scene7/dynamicmedia'}">

In witch I pass a video, Now what I’ll like to do is that want to play the video when the user click on the button:

<button class="video-player__button" aria-label="play video">
   <!-- Image de fond -->
   <div data-sly-resource="${'.' @ resourceType='core/wcm/components/image/v2/image'}"></div>
   <!-- Image du bouton play -->
   <img src="" class="video-player__button-play" alt="Button play" />
   <img src="" class="video-player__button-play--hover" alt="Button play" />
</button>

But when I try to get the video I get an undefined.

Here’s the HTML generated by the dynamic media:

https://gist.github.com/odaBio/57e117d4c6dc4458aa907bc39627e22a

Does anyone knows how can I play the video through js?

Thanks in advance.

[Jineet_Vora · Accepted solution]

Hi @odabio, are you able to play the video with OOTB Dynamic Media component by configuring the video which is uploaded to Scene7? Please try this if you haven't done already to make sure that your integration and your asset is in sync.

In addition, your custom component should have a sling:resourceSuperType: dam/components/scene7/dynamicmedia property specified. Also, make sure when you refresh the page with your custom component, the pre-requisites files (viewers/presets) such as VideoViewer.js, BasicZoomViewer.js are loaded on document load from the Scene7 server onto your page. Only then you will be able to actually play the videos.

Jineet