The LearnWorlds Interactive Video Player is a powerful tool that offers many options to display your school's Video Learning Activities.
In this article, we will go through the various options for setting up your school's video player, including configuring the autoplay, resume playback, and video progress bar settings, hiding the fast forward button, adjusting the video bar opacity, enabling fullscreen on iOS devices, and adding a video watermark for copyright protection.
To access your school's video player settings, navigate to Settings → Video → Player Setup.
Autoplay Video
Enable the "Autoplay videos" option to ensure lessons start playing automatically for students.
Autoplay on iOS devices is disabled by default, meaning users must manually tap the play button.Allowing a video to autoplay with sound depends on both the browser’s settings and the user’s preferences. Chrome's autoplay policies are:
1. Muted autoplay is always allowed.
2. Autoplay with sound is allowed if:
a. The user has interacted with the domain (click, tap, etc.).
b. On the desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
c. The user has added the site to their home screen on mobile or installed the PWA on desktop.
3. Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Full documentation of Chrome's autoplay policy can be found here.
Resume Playback
This option allows students to continue their video lessons from where they left off, even if they leave the page or close the browser.
Show/Hide Video Progress Bar
You can determine the time after the video bar disappears due to inactivity. This time is set to 5 seconds (5000 milliseconds) by default. If empty or 0, the video progress will not be hidden.
Hide the Fast Forward button
You can completely hide the below fast forward button from the video progress bar of the course player.
1. Use this custom script to your school's Custom code:
/*Learnworlds team CSS*/
.playbackRate{
display:none; }
/*End of Learnworlds team CSS*/
2. Add it in the <style> (css) for built in pages (i.e social, profile, workpad, my account) and click on Update.
3. The Fast Forward button will not appear in your video learning activities.
Video Bar Opacity
Apart from adjusting the video bar visibility, you can also edit the Video Bar Opacity.
If you want to completely hide the video progress bar from videos you can also use the below CSS snippet code in the Custom code editor of your school. Go to Website → Design → Edit website → Site → Site custom code, paste it 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;
}Enable fullscreen on Interactive Videos (iOS)
Due to iOS limitations, the native iOS video player is used for viewing the videos on full screen. Since the native iOS video player does not support interactive elements and subtitles, we disable the fullscreen option on all videos with subtitles and interactive elements. Enable this option if you want to show the fullscreen option in iOS, even if subtitles and interactive elements will not be available.
Regarding the setting of Fullscreen in iPhones, to implement the full-screen functionality in the interactive video player (which supports interactive elements and subtitles), we use the vue-fullscreen node package, which uses the browser’s fullscreen API. The iPhone version of Safari does not support this browser API, 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).
Given the limitations mentioned, the only way to make a video fullscreen in iPhone Safari is to use the native iOS video player. Of course, since the native iOS video player does not support interactive elements and video subtitles, as our interactive video player does, interactive elements would never be visible on iPhones.
To allow users to enjoy interactive elements on their iPhones, we disabled the full-screen functionality on all iOS browsers (Safari-based and thus have the same limitation) and mobile apps on iOS, for all videos with interactive elements or subtitles. This way, the elements can be visible.
As an admin, you can choose, according to your specific needs, whether you want to allow users to enter full screen even for interactive videos (where they cannot see the interactive elements, due to iOS’ Safari as explained above).
Video Watermark
Copyright and protect your videos by adding your very own video watermark.