Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
SOLVED

Play dynamic video throught js

Avatar

Level 3

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

odabio_2-1639068159699.png

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.

 

odabio_3-1639068184441.png

 

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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


View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

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


The ultimate experience is back.

Join us in Vegas to build skills, learn from the world's top brands, and be inspired.

Register Now