Screen Recording (mp4/ogg) and HTML5 Video - 2020

While I was working on Qt5 Quick2 QML animation, I had to put the animation result into my site.

After digging for some time, I finally came up with my way of doing it. There might be more efficient ways, however, I decided to keep the record here.

I used BB FlashBack Express from BlueBerry Software.

First, we need to record the screen, using FlashBack recorder, save it as proprietry format:

Then, next step is to read in the recorded stuff, and export it to avi.

Free version only support Flash or avi.

Next step is to convert the avi to mp4 and ogv.

I could have used Open Source ffmgeg. But I used other readily available tools instead.

Actually, I built a converter using Qt5:

1. FFmpeg Converter using QProcess
2. Video Player with HTML5 QWebView and FFmpeg Converter

I used HandBrake which is an Open Source Encoder.

I could have used other online converter. However, the size of avi is big, I opted to stick to HandBrake.

The file needs to be scanned before starting to convert.

From MP4 to *.ogv, I used one of Online Converter:
http://video.online-convert.com/convert-to-ogg.

It's a simple HTML5 Video element.

<video width="352" height="352" controls autoplay>
  <source src="path_to_mp4/TransitionsWebm.webm" type="video/webm">
  <source src="path_to_mp4/TransitionsMP4.mp4" type="video/mp4">
  <source src="path_to_ogv/TransitionsOgg.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>

That's it.