Screen Recording (mp4/ogg) and HTML5 Video - 2020
![codecs logo](/VideoStreaming/images/codecs_logo.png)
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:
![BBFlashBakRecorder.png](/VideoStreaming/images/ScreenRecorderHTML5/BBFlashBakRecorder.png)
Then, next step is to read in the recorded stuff, and export it to avi.
![Export_BBFlash.png](/VideoStreaming/images/ScreenRecorderHTML5/Export_BBFlash.png)
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:
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.
![Handbrake.png](/VideoStreaming/images/ScreenRecorderHTML5/Handbrake.png)
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.
![OnlineConverter.png](/VideoStreaming/images/ScreenRecorderHTML5/OnlineConverter.png)
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.
Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization