More Web Design Tutorials

Creating Video for your Website or App

February 26, 2017

Video is common on the Web, and it is almost essential for many websites. In this article, I will give you a quick overview on how to produce video, the tools you can use, and what I’ve learned over the last 14 years of producing video for my websites and web apps.

A picture is worth a thousand words they say, given that you have 30 or 60 frames (images) per second of video, it seems to me that video is a worthwhile investment in your website or app!

Types of video: screencast vs live video.

What are screencasts and how to create them?

A screencast is just a video that captures whatever is going on, on your computer screen. There are dedicated apps/software that makes this easy. Here are a few options:

  • Quicktime on Mac
  • Camtasia Mac or PC
  • Screenflow

… And so many others! Check out this wikipedia page for a big list:

I’ve used several, but I tend to use Camtasia since I use both Mac and Windows. Having a screencasting app that works on both operating systems makes my life a little easier.

All the major screencasting apps come with built in editing tools and the ability to output your videos in a web friendly format. There are a few options, but you should probably just use the most popular: MP4.

Creating and editing live digital video.

Live video is any video that is not a screencast. It could be video of you vlogging (talking into the camera, sharing with the audience your profound thoughts), or perhaps a product video … just any standard video.

When it comes to creating video, you have a few options these days:

  • Digital camera / SLR
  • Video Camcorder
  • Smartphone video
  • Webcam

I’ve listed the video recording devices in the order of the quality of video they can produce, and the flexibility of the video recording. Meaning, dedicated digital cameras can often times produce higher quality video than a typical smartphone. But in addition, you get with the extra cost of a dedicated camera, a flexibility and consistency of video quality. Simply stated, you can do more, but you will pay more with a dedicated camera.  

That said, these days, several smartphones can match expensive digital cameras in many circumstances. For example: iPhone 7, Samsung S7 and Google Pixel can produce amazing video.

The camera you choose, depends on the kind of video work you want to do and what your budget is. If I were just starting out, I would just use my smartphone, especially if is one of the ones I listed above.

For my live video work, I use the Canon 80d because it provides a lot of flexibility in my video work. Since I am a solo video creator most of the time, the Canon 80d has two features that are crucial: amazingly fast dual pixel autofocus, and a flip screen so I can see myself.  It isn’t perfect, but it meets my needs. That said, I’ve done good video with other dedicated digital cameras, camcorders and even a webcam!

… In fact, some of the top Youtubers in the world use a simple webcam! They can produce decent video. The best one I know of is the Logitech HD PRO WEBCAM C920.

Options for including video on websites or apps.

Now that you’ve created your video or screencast, you need to get it live on the Web or into your app. Here are the basic options:

  1. Self hosted – you need to have nerd skills to get this done.
  2. Youtube – easiest but less control.
  3. Vimeo – easy with total control.

I use all three options. These days I would suggest just starting a Youtube or Vimeo channel. Both are free. Vimeo offers premium services at a cost and it might be well worth it depending on your needs. For example, with Vimeo, you can control what websites can embed your videos, you can create custom views, and controls for playback … it’s pretty cool stuff.

Youtube doesn’t provide these extra tools but it is still a great option, especially if you want to attract an audience.

A few video tips:

Video can be recorded in many different quality levels, the most common: 480p, 720p, 1080p and 4k. The higher the number, the better quality the video.

These days, you are best to record live video in 1080p since 99% of your audience will watch in1080p or less. 4k video is slowly being adopted, but it is such a beast to work with (huge files!) and most people will not want to download massive 4k video. I would suggest not recording 4k video for now.

Instead, record in 1080p (which is standard HD quality) and you will find the process of creating video much easier. Editing 4k video requires a very powerful computer compared to 1080p video.

That said, some would argue that if you have the camera that can record 4k video (modern smartphones can,) and you have a powerful computer, you might be better off recording in 4k, since you will have a much nicer source video to work with.

This means when you edit and render the video, downgrading it to 1080p, you will end up with a nicer video. Basically, having 4k video to start with, gives you more options, even if you render out the video at a reduced 1080p.

Thanks for reading!

Stefan Mischook