FrogLMS Community

Optimising Videos: Overview

Frog as a platform to host video on is not (currently) a streaming media server. Frog handles video and audio by delivering it to the browser as one file. The browser downloads this file into its memory and plays it back.  

What Frog doesn’t do is stream video. This method of delivering video means you can get instant playback as soon as the page holding the video opens. YouTube and Vimeo are examples of streaming video services. 

Frog partners with both Planet eStream and ClickView, which are educational video-conversion-and-streaming services. If your school produces a lot of videos or needs to show long videos, then you should really consider one of these excellent products.

If you cannot afford one of these services, it is possible to use Google Drive or Microsoft OneDrive to stream video. 

Frog's Media Widget

What Frog does do with regard to video, is make it very easy to quickly add a video to a site using the media widget. The media widget can play back almost every type of web video, but it does not convert it, so you need to think about optimising the video first.

The aim of web video is to reduce the file size sufficiently to make a difference, while still maintaining clarity.   I’ve found a target of 4 Mb per minute is achievable. The quality is not HD or even SD, but text is clear, diagrams can be read and faces aren’t smudged.

Use the menu below to see the best settings for the software you have.

Optimising Videos: Adobe Media Encoder

If you're fortunate enough to be using Adobe CC then the settings below are a good start:

• H.264
• Match Source - High bitrate
• Video:
  • Uncheck Match source
  • Width: 852 x Height: 480 for 16:9 widescreen
  • Width: 640 x Height: 480 for 4:3
  • Bitrate settings: VBR, 1 pass
  • Target bitrate: 0.5 Mbps
  • Maximum bitrate: 1Mbps
• ​Audio:
  • Bitrate: 48 kbps

Optimising Videos: Handbrake

HandBrake is an open source video conversion tool avaialble for both PC and Mac.

https://handbrake.fr/

• Leave everything as default:
• Container: MP4 - Web optimised
• Width: 850 (widescreen), 640 (4:3)
• Video tab - Avg bitrate (kbps): 500
• Audio tab - AAC (avcodec) Bitrate: 64​

Optimising Videos: iMovie

When you are ready to export your video from iMovie:

1. From the File menu, choose Share...
2. In the File Export dialogue:
   • ​​Change the quality to Low
   • Change the resolution to 540p​

If you need your video to be smaller again, then choosing other options from Share… will help – Email, for example, reduces the size significantly

Optimising Videos: Keynote

Keynote has settings for video export, including web video, but tests have shown the videos created are uncompressed. As a result, we suggest importing any Keynote created videos into iMovie and re-exporting to an MP4 format.

Optimising Videos: Windows Movie Maker

Unfortunately, Windows Movie Maker's native output WMV is no longer considered a web video format and does not play in non-Microsoft browsers.

The 2012 version of the product offers an MP4 file export option, but don't be fooled, the video is not compressed and does not render out long files.

If you are editing in Windows Movie Maker, you should render out WMV videos and then convert using HandBrake or similar.

Optimising Videos: Google Drive Video

Many schools block YouTube and similar social media video sites and while Frog recommends using one of our partners, Planet eStream or ClickView to host videos, budgets being tight, this is not always a possibility.  

One free converting-and-streaming option we are aware of is Google Drive.   Videos can be uploaded to Drive, where they will be converted.  The quality is not as good as Youtube, but it is acceptable.

Step 1

Upload your video to Google Drive

Step 2

Set the sharing on your video by right-clicking on the file and choose Share... 

Unless your students have pre-signed into Google, you may have to set the sharing to "Anyone with a link can view"

Step 3

Wait.  Depending on the length of video, conversion can take a while and you will not be notified by email when the video is converted.  The icon will change to a screen grab from the video though.

Step 4

Open the video by double-clicking on it.  Click on the pop-out button  in the top right-hand corner

Step 5

In the new tab, click on the More Actions menu 

Step 6

Choose Embed item.  In the new pop up modal, copy the code

Step 7

Using the HTML widget in FrogLearn, paste the code copied in step 6.

Optimising Videos: MS OneDrive

Using OneDrive to host and stream videos is fairly straight-forward, although you do have to use the HTML widget.

Step 1

Upload your video to your OneDrive 

Step 2

Right-click on the video and choose either Share or Get a link

Step 3

In the pop-up, click on the Get a link section and change the drop-drop View link - no sign in required

Step 4

Copy the web address created

Step 5

Add an HTML widget to your FrogLearn page.   Add the following code:

<video  width="320" height="240" controls>
  <source src="your_oneDrive_movie.mp4" type"=video/mp4">
Your browser does not support the video tag.
</video>

Replace your_oneDrive_movie.mp4 with the link supplied in Step 4.

The width and height in the above example are set to 320 pixels by 240 pixels.  Hopefully you can see how straight they are to change to whatever size you wish.