WeChat gadget extension components and video sliding switching components

May 21, 2021 WeChat Mini Program Development Document

video-swiper

Video sliding switcher for a microscope-like unlimited video list effect.

Instructions for use

Video-lists should be no less than 3 lengths long and enter the loop when scrolled to the first or last item. C hanging the video-list with setData is appended directly to the previous video source. You can listen to the bindchange event to get the only id currently scrolling to that video, activeId is the only id for the video source.

The list of properties

Property	Type	The default	Required	Description
duration	number	500	Whether	The length of the slide animation
easing-function	string	default	Whether	Switch the type of easing animation
loop	boolean	true	Whether	Whether to loop
video-list	Array VideoSwiperItem	[]	true	The video source
bindchange	eventhandle	Whether		Triggered when the swipe switch is complete, e.detail.
bindplay	eventhandle	no		Start / continue to play when playing, e.detail = {activeID}
bindpause	eventhandle	no		Trigger when playing playback, e.detail = {activeID}
bindended	eventhandle	no		Trigger when playing at the end, e.detail = {activeID}
bindtimeupdate	eventhandle	no		Trigger when playing progress changes, Event.detail = {CURRENTTIME, DURATION, ACTIVEID}
bindwaiting	eventhandle	no		Video occurs when buffering, e.detail = {activeID}
binderror	eventhandle	no		Video playback is triggered, e.detail = {activeID}
bindprogress	eventhandle	no		Triggered when loading progress changes, only supporting a piece of load.Event.detail = {buffered, activeID}
bindloadedmetadata	eventhandle	no		The video metadata is triggered when completed.Event.detail = {Width, Height, Duration, ActiveID}

VideoWiPerItem property list

Attributes	illustrate
id	Unique ID of each video source
url	Video play address
objectFit	When the video size is inconsistent with the VIDEO container size, the video of the video

Objectfit legitimate value

Attributes	illustrate
contain	Include
fill	filling
cover	cover

The legal value of easing-function

Property	Description
default	The default easing function
linear	Linear animation
easeInCubic	Slow down the animation
easeOutCubic	Slow out the animation
easeInOutCubic	Slow in and slow out the animation