[CAROUSEL] Is that possible to post video with "auto-play'

Get help with using Metro 4 components
Post Reply
SweloMyli
Posts: 5
Joined: Mon Nov 12, 2018 9:32 am
Status: Offline

[CAROUSEL] Is that possible to post video with "auto-play'

Post by SweloMyli » Sat Nov 24, 2018 11:37 am

Hello,

I am contacting you today for a new need: I use the carousel to broadcast news, I managed to integrate the video player.
Now I wish that when arriving on the news that contains the video, it will launch automatically.
For the moment I am obliged to click on "Play" to launch it manually.

Thank you in advance for your help.

User avatar
olton
Site Admin
Posts: 133
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Sat Nov 24, 2018 12:10 pm

At this time carousel has not an event such as onSlide* for a slide show. I will add it on next release

SweloMyli
Posts: 5
Joined: Mon Nov 12, 2018 9:32 am
Status: Offline

Post by SweloMyli » Sat Nov 24, 2018 12:18 pm

Thank you very much Olton for your consideration as to my need.

User avatar
olton
Site Admin
Posts: 133
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Sat Nov 24, 2018 1:05 pm

in 4.2.30
Carousel: add events onSlideShow(HTMLElement slide), onSlideHide(HTMLElement slide)

You can wait for the release on a sunday or use dev branch from
GitHub https://github.com/olton/Metro-UI-CSS/tree/4.2.30 or
CDN https://github.com/olton/Metro-UI-CSS/issues/1257

SweloMyli
Posts: 5
Joined: Mon Nov 12, 2018 9:32 am
Status: Offline

Post by SweloMyli » Mon Dec 03, 2018 11:42 am

Thank you very much Olton.
You will find below an excerpt from my code (simplified, I hope not to have made a mistake by simplifying it).

- How can I modify it to integrate the onSlideShow (HTMLElement slide) ?
- Bonus question: How to make the period equal to the duration of the video?

Code: Select all

var itemsCommunications = data.d.results;
aff += "<div data-role='carousel' data-bullets='false'  data-bullets-position='center' data-auto-start='true' data-duration='1000' data-period='3600000' data-controls='true' data-aspect-ratio='hd' data-control-next='>' data-control-prev='<' data-height='550' >";
for (var i = 0; i < itemsCommunications.length; i++) {		
	aff += "<div class='slide p-2 pl-10 pr-10 d-flex flex-justify-center flex-align-center'>"
	aff += "<div class='cell-md-5'><center><h2><b>"+itemsCommunications[i].Title+"</b></h2></center><video data-role='video' data-show-loop='false' data-autoplay='true' data-src='"+itemsCommunications[i].Lien_image+"'></video></div>";
	aff += "</div>";
}
aff += "</div>";

User avatar
olton
Site Admin
Posts: 133
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Sat Dec 08, 2018 4:11 pm

Hi!
The next demo right for 4.2.31 (now in develop)
https://sandbox.org.ua/olton/code/oaQm53bDd6

Post Reply