How to run videos in CefSharp based Browser Window using the HTML Video Tag

Problem

CEF and subsequently CefSharp only supports freely available audio and video codecs. It cannot play .mp4 videos directly in the web pages. To overcome this, the sample shows how anyone can convert .mp4 to WebM format and also add subtitles (Text) to any video and subsequently render it using HTML Video tag in the CefSharp browser.

How does it convert videos to WebM format ?

It uses a freely available tool called FFmpeg to convert .mp4 to webm format. You may further read about the FFmpeg license here and here.

What is the command used to convert .mp4 to webm

Refer the documentation here - https://trac.ffmpeg.org/wiki/Encode/VP9

ffmpeg -i myMp4Video.mp4 outputvideo.webm

How to add subtitles to the Video during conversion ?

FFmpeg has the concept of filters.

Simply feed in a subtitle file of the format .ass - Advanced Substation Alpha to ffmpeg on the command line.

NB: Following command will convert to webm and add the subtitles as well.

ffmpeg -y -i myMp4Video.mp4 -vf subtitles=mySubtitlefile.ass outputvideo.webm

How to generate the subtitles (.ass) file ?

You can manually do it by hand using any text editor using the documentation here.

OR

After doing it manually, I found this handy tool - http://www.aegisub.org/downloads/, which allows you to modify / generate .ass file quite easily. Just play around, it's quite simple to use.

Code overview

• Just download the project and build it using Visual Studio Editor. You may be required to Restore the NuGet Packages. I used VS2019 and v79.1.36 of CefSharp
• It generates the WebM format video on the fly. In the post-build event, I generate the WebM video from the sample mp4 video in the project
  • $(ProjectDir)ffmpeg\ffmpeg.exe -y -i $(ProjectDir)mp4\MySpaceVideo.mp4 -vf subtitles=subtitle.ass $(TargetDir)MySpaceVideo.webm
  • This also enables you to embed this logic into your build pipeline.
• You may notice, build takes time to build because it generates the webm file with subtitles from the mp4 file in the post-build event using FFmpeg.exe
• subtitle.ass file in the project contains the subtitles which are applied at various frame intervals.
• Original mp4 video does not contain the subtitles. Only the generated webm video contains subtitles.
• Video.html file loads the generated WebM video file into the HTML Video Tag.
• MainWindow.xaml file loads the Html file into the CefSharp browser window.
• Output is in bin/debug folder. You will see the generated video named MySpaceVideo.webm alongwith the project's output exe file. You can also double-click the CefSharp_Video_Sample.exe file and run it from there directly.

NB: I used Paint3D on Windows 10 to generate the sample mp4 video. The background image in the video was randomly googled.

Happy Coding :)