How to create an online video from scratch

  1. Introduction

  2. Planning and Pre-production

  3. Designing a web poster

  4. Production and post production


This project is about creating a digital video clip (Web Video Advert) for School of Computing, Math’s and Digital Technology at Manchester Metropolitan University (MMU).

The video clip is 60 seconds long and explains the advantages of enrolling to study Computing at MMU.

The project consist of three stages:

  • Planning and Pre-production: Creating storyboard, estimate the budget, workflow, explaining technical terms such as bitrate and bandwidth, target audience and delivery platforms.
  • Designing a web poster: A web poster that explains why students should study at MMU.
  • Production and Post-production: Produce and publish a web video clip



Nowadays, online videos are really important part of Internet. They are everywhere from a video based learning websites such as Lynda or Tree House to big media companies such as BBC and CNN.

Why Online Videos Are Important?

“One Picture is Worth a Thousands words” appears in a 1911 newspaper article quoting newspaper editor Arthur Brisbane discussing journalism and publicity. (Wikipedia)


This quote conveys the vital role of visualisation since then.

Online videos are really effective way to convey the message to the user and viewers. It is more realistic to expect a user to seat and watch a short video compare to expecting him to read enormous lines of words.

Online video is the hottest thing in internet marketing today, the number one way to get across your message to potential customers and generate sales. (Web Videos)

With all that being said, MMU has decided to create an online video to promote the School of Computing, Math’s and Digital Technology.

Purpose of writing the pre-production

The Purpose of writing the pre-production is giving a vivid picture to the reader about available Digital Video technologies and explains how to create a video clip only for using on Web (Online Video).

This report explains different options available from video encoding to delivery platforms.

Digital Video Encoding

Encoding defines as “The process of making a video file smaller or converting analog-based media into a digital format” (MMU Moodle, Multimeida Development Subject, Lecture 2)

Encoding “Makes a video file compatible with various playback and delivery platform.” (MMU Moodle, Multimeida Development Subject, Lecture 2)

As the video is supposed to be broadcast over the Internet, the video encoding is playing a significant role in the project. It has to be encoded for different platforms as well as coming up with a good balancing between the file size and the quality.

In this project the video encoding will be H.264 and audio encoding will be AAC, 128(KBPs).

What is H.264?

H.264 “is a video compression technology, or codec, that was jointly developed by The International Telecommunications Union” (Streaming media)

What is AAC 128 KBPs?

AAC is an acronym, which stands for Advanced Audio Coding. AAC formats has a better quality compare to MP3 format. (Diffen)

Screen Shot 2013-12-23 at 15.01.55

128 kbps is the bitrate of the format for the songs such as songs in iTunes stores.

What is the bitrate?

Bitrate, as the name implies, describes the rate at which bits are transferred from one location to another. In other words, it measures how much data is transmitted in a given amount of time. (Tech Terms)

Digital Video Formats

The Codec for the project is H.264. It “… can be incorporated into multiple container formats, and is frequently produced in the MPEG-4 container format, which uses the .MP4 extension, as well as QuickTime (.MOV), Flash (.F4V), 3GP for mobile phones (.3GP), and the MPEG transport stream (.ts).” (Streaming Media)

Digital Video Delivery Options

There are three main delivery options:

  • Progressive Download: Describes the download process of video files, which allows a user to view a file’s contents before the download has been completed.
  • True Streaming: Video that is streamed form a Streaming Media Server, to a player that is not locally stored in the users’ cache, or anywhere on the clients’ hard drive.
  • Adaptive Streaming: Adaptive streaming allows the user to see the best quality video based on the users’ available bandwidth.

(MMU Moodle, Multimeida Development Subject, Lecture 2)

This video clip will be hosted on a shared host form a company called Bluehost.

What is the bandwidth?

Bandwidth describes the maximum data transfer rate of a network or Internet connection. It measures how much data can be sent over a specific connection in a give amount of time. (Tech Terms)

As the project hosted on a shared host (for pricing purposes), the bandwidth is limited and the streaming will be slow, compare to the Content Delivery Network (CDN) such as Youtube or Vimeo. Although for the sake of exploring different options for hosting a web video, the project will be uploaded in Youtube and Vimeo too. Once the web video has been uploaded on these website they are going to be embedded in the blog.

Target Audience

The target audience of the video clip is all people who thinking of doing a computing course next year.

Obviously the majority of target audience is young people between age 18 to 20 years old, although the mature students are playing a significant role in the target audience too, as the statistic shows 16% of undergraduate students are over 21. (MMU)

Therefore the clip should be based on young people taste and includes the scene and special effects that young people are big fan of.


There are two primary part of producing an online video:

  • Recording Footages.
  • Creating the clip out of the taken footages.

These two tasks usually carried out with two different people or even teams in bigger scales, but for the MMU project for the sake of learning, they all have been carried out with only one person, with the help of my classmate Joseph Thomas.

For the first task (recording footages), which is a one-day job, the client will be charged £400 + VAT (this price includes the hiring price for recording devices).

For the second task (creating the video clip), which is a two days job, the client will be charged £800 + VAT.


A storyboard is a great way to work out the visuals of your story. You can draw each of the shots you want to get to create your film and add notes like camera movement (pans, zooms) and audio you want to use at that point.(Open ABC)

The storyboard for the project is shown below:





There are four main steps to producing a digital video:

  • Produce a great video: This stage includes taking shots/taking footages from the subject that is going to be the purpose of the digital video.
  • Encode files: Encode the files, based on what encoded videos we need.
  • Store files: Storing the encoded files on a local hard drive or external hard drive or even in the Clouds, such as Dropbox or Copy.
  • Deliver the video in desire formats: Based on the clip is going to be shown on what devices publish the video in different formats.

Video production Workflow

(Source: MMU Moodle)

Delivery Platform

The clip is going to be published over the Internet, so this is really important that the video clip can be shown in almost every famous available devices.

This project has been tested on Pcs, Macs, iOS devices, Android devices and windows Phones that are the majority of devices out there.

The Poster

* Please note, All images are under MMU domain, and as a student I am allowed to use them in my assignments.


Tips for Productions

  • Take footages as much as you can of the subject.
    More footages more options to choose. I have created the video out of more than 88 footages that were taken by me and my classmate Joseph Thomas.
  • If you don’t have the access to professional sounds recording devices, use your smartphone.
    I have used iPhone 5 for recoding the narration. Using Adobe Audition and Adobe Premier (sounds filter) you will be able to tweak the sound clip to make it good enough to use on your project.Volume EffectVolume Control
  • Make footage less shaky with “Warp Stabilizer” filter.
    Since your footages might be a bit shaky, using “Warp Stabilizer” filter in Adobe Premier will help you to create more professional video clip.Effect Control
  • Use transitions, but be careful to not overuse them.
    Use Transition effects in Adobe Premier to make much smoother video clip, but be careful to not overuse them, as it might make your clip less professional.Transition Duration
  • Use auto colour filter to correct your colours on a dark/bright footage.
    Using “auto colour” filter will cause that you get a better quality footage if your video clip is either too dark or too bright.Auto Colour

The final video

1-Based on the assignment settings

Please note, as the video has been uploaded in a shared host, so it might be a bit slow.

The music is from Kevin Macleod is filed under public domain.

Video detail: such as codec, frame rate and size

Video Detail


3- Vimeo

Leave a Reply

Your email address will not be published. Required fields are marked *