# video-swiper

Video sliding toggle components, can be similar to micro as the unlimited video list effect.

# install

npm install @ miniprogram-component-plus/video-swiper

On the page page.json in

// page.json
{
    "usingComponents": {
        "mp-video-swiper": @ miniprogram-component-plus/video-swiper"
    }
}

# Instructions

video-list The length should not be less than 3 When scrolling to the first or last item, the loop enters. adopt setData change The video-list is appended directly to the previous video source. Wiretap bindchange Event gets current by scrolling to that video, activeId Unique for video source id。

# List of properties

attribute	type	Default values	Required	Introductions
duration	number	500	no	Slide animation duration
easing-function	string	default	no	Toggle Slow Animation Type
loop	boolean	true	no	Whether or not to cycle
video-list	Array VideoSwiperItem	[]	true	Video source
bindchange	eventhandle	no		Triggered upon completion of the slide switch, and.detail={activeId}
bindplay	eventhandle	no		start/Triggered on continued playback, and.detail={activeId}
bindpause	eventhandle	no		Triggered when play is paused, and.detail={activeId}
bindended	eventhandle	no		Triggered at the end of playback, and.detail={activeId}
bindtimeupdate	eventhandle	no		Triggered when play progress changes, event.detail = {currentTime, duration, activeId}
bindwaiting	eventhandle	no		Triggered when the video appears buffered, and.detail={activeId}
binderror	eventhandle	no		Triggered when a video playback error occurs, and.detail={activeId}
bindprogress	eventhandle	no		Triggered when the loading progress changes. Only one section of loading is supported. event.detail={buffered， activeId}
bindloadedmetadata	eventhandle	no		Triggered when the video metadata is loaded. event.detail={width， height, duration, activeId}

# VideoSwiperItem List of properties

attribute	Introductions
id	Unique for each video source id
url	Video playback address
objectFit	When the video size is video Video presentation when container sizes are inconsistent

# objectFit Legal value

attribute	Introductions
contain	Contain
fill	Fill
cover	cover

# easing-function Legal value

attribute	Introductions
default	Default retarding function
linear	Linear animation
easeInCubic	Slow animation
easeOutCubic	Slow-out animation
easeInOutCubic	Slow in and slow out animation

# sample code

Preview with Developer Tool