Course
Educational course player with lesson navigation, completion state, and Uilora Academy branding.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| video | string | https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4 | Video source URL. |
| backgroundColor | string | #0a0a0f | Background color (hex, rgb, or hsl). |
When to Use
Built for LMS platforms, online academies, and technical course builders. The lesson header, progress metadata strip, and 'Finish Lesson' CTA create a structured learning flow that encourages completion.
Best Practices
Pair with a lesson list sidebar for multi-module courses. The ended-state overlay with 'Finish Lesson →' CTA is a conversion moment — hook it to your course progression API to mark lessons complete.
Why This Component Matters
Course completion rates are heavily influenced by UI clarity and motivational cues. The persistent lesson context (title, module, duration) keeps learners oriented, while the animated ended-state CTA creates a natural transition to the next lesson.
FAQ
QCan I show chapter markers on the scrubber?
Yes. Add absolute-positioned divs along the scrubber at calculated percentage positions based on chapter timestamps. The scrubber is a standard div with a relative container.
QHow do I track lesson completion?
Listen to the video's 'ended' event (already handled in the component) and fire your analytics or LMS callback from the onEnded handler.
QIs the scrubber thumbnail preview included?
Yes — all Uilora video players ship with the canvas-based thumbnail preview on hover as a standard feature.