Optimising Videos for Web
The aim of this site is to introduce optimising videos for web. A quick guide to getting the best results in FrogLMS.
- Optimising Videos Overview – Introduce options for displaying videos in sites
- Adobe Media Encoder – Guidance to getting the best results using Adobe Media Encoder
- Handbrake – Guidance to getting the best results using Handbrake
- iMovie – Guidance to getting the best results using iMovie
- Keynote – Guidance to getting the best results using Keynote
- Windows Movie Maker – Guidance to getting the best results using Windows Movie Maker
- Google Drive Video – Guidance to getting the best results using Google Drive Video
- MS OneDrive – Guidance to getting the best results using MS OneDrive
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.
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:
- Match Source - High bitrate
- 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
- Bitrate: 48 kbps
Optimising Videos: Handbrake
HandBrake is an open source video conversion tool avaialble for both PC and Mac.
- 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:
- From the File menu, choose Share...
- 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.
Upload your video to Google Drive
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"
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.
Open the video by double-clicking on it. Click on the pop-out button in the top right-hand corner
In the new tab, click on the More Actions menu
Choose Embed item. In the new pop up modal, copy the code
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.
Upload your video to your OneDrive
Right-click on the video and choose either Share or Get a link
In the pop-up, click on the Get a link section and change the drop-drop View link - no sign in required
Copy the web address created
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.
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.