The LearnWorlds Interactive Video Player is a powerful tool designed to enhance video-based learning by providing various customization options. It allows you to control how videos are displayed and interacted with, ensuring a seamless learning experience for your students.
In this article, we will go through the options for setting up your school's video player, including autoplay, resume playback, progress bar settings, hiding fast forward, adjusting opacity, enabling fullscreen on iOS, and adding a watermark.
To access and modify your video player settings go to Settings → Video → Player Setup.
Autoplay Video
Turning on Autoplay videos ensures that lessons start playing automatically without requiring students to press play.
- Autoplay on iOS devices is disabled by default, meaning users must manually tap the play button.- Browsers have different autoplay policies, and whether autoplay with sound works depends on both browser settings and user preferences. Full documentation of Chrome's autoplay policy can be found here.
Resume Playback
This feature allows students to pick up where they left off, even if they navigate away or close the browser. This enhances the learning experience by reducing friction when consuming content.
Transcript Settings
You can customize the transcript display by adjusting:
Text size – Modify the font size for readability.
Scroll behavior – Control how transcripts scroll.
Default status – Choose whether transcripts are visible by default.
Text colors – Personalize transcript color themes.
Download option – Allow users to download transcripts for offline access.
Show/Hide Video Progress Bar
The video progress bar automatically disappears after a set period of inactivity. If empty or 0, the video progress will not be hidden.
Default setting: 5 seconds (5000 milliseconds)
Custom setting: You can set it to as low as 500 milliseconds, ensuring the bar only appears once at the start of the video and when hovering over the video.
Video Bar Opacity
You can modify the opacity of the video progress bar for a more customized experience.
To completely hide the progress bar, add the following CSS snippet to your Custom Code Editor. Go to Website → Design → Edit website → Site → Site custom code, paste this code in the <style> (css) for built in pages (i.e social, profile, workpad, my account) field, and click on Update.
.-video-bar-btns-wrapper .playbackRate,.seekBar{
display:none;
}Hide the Fast Forward button
You can completely remove the fast-forward button from the course player’s video progress bar by adding a custom CSS script.
Go to Website → Design → Edit Website → Site → Site Custom Code, paste this code in the <style> (css) for built in pages (i.e social, profile, workpad, my account) field, and click on Update.
/*Learnworlds team CSS*/
.playbackRate{
display:none; }
/*End of Learnworlds team CSS*/
Comments & Emojis
Enable or disable user comments and emoji reactions on the timeline of interactive course videos.
Enable Fullscreen on iOS Devices
Due to iOS limitations, the native iOS video player is required for fullscreen viewing. However, this player does not support interactive elements and subtitles, so fullscreen is disabled by default for videos with these features.
Key Considerations for Fullscreen on iPhones:
- Safari does not support the fullscreen API, preventing interactive elements in full-screen mode.
- The vue-fullscreen package (used for fullscreen functionality) cannot work on iOS Safari, thus preventing us from using the vue-fullscreen package in the iPhone version of Safari (and by extension on the school’s mobile app, if you have one).
- To enable fullscreen, you must allow the native iOS video player, but interactive elements and subtitles will not be visible in fullscreen mode.
You can decide whether to allow fullscreen on iPhones, even though interactive features won’t be accessible.
Video Watermark
To copyright and protect your video content, you can add a custom watermark to your videos. This helps deter unauthorized distribution while reinforcing your branding.