Submit a ticket My Tickets
Welcome
Login  Sign up
Open navigation

Video Player Setup

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


To edit the general settings of your school's Video Player, navigate to Settings → Video → Player Setup.  

Autoplay Video

The video of the lesson will start automatically for the user if you have enabled the Autoplay videos option.


In iOS devices, the auto-play is disabled, and the user has to tap on play.


Allowing a video to autoplay with sound depends on both the browser’s settings and the user’s preferences. Let’s look at Chrome as an example. Chrome's autoplay policies are simple:

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.

Here is also the full documentation for your reference: https://developer.chrome.com/blog/autoplay/

Resume Playback

Allow students to resume the playback of videos from where they left off, even if they navigate away from the video learning activity or close the browser tab.

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 Site Builder → 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, in order 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 in turn uses the browser’s fullscreen API. This browser API is not supported by the iPhone version of 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). 


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 be able to allow users to enjoy interactive elements on their iPhones, we decided to disable the full-screen functionality on all iOS browser(they are all Safari-based and thus have the same limitation) and mobile apps on iOS, for all videos that have 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

Υou can copyright and protect your videos by adding your very own video watermark.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.