Georg Grab

Latex Beamer and Videos

Aka, how to present something that inherently lends itself to interactive visualization to explain with Latex Beamer.

Don't get me wrong, I like Latex as much as anyone [1], but for presentations, there are better options than Beamer. Presentations are about trying to get the point across as clearly as possible, but except for typesetting math, code listings, or bullet points, Beamer doesn't provide good tools for the job.
Recently though, for a seminar in university, they put it as a requirement to use Beamer for some odd reason. I don't have a problem with professors imposing certain style requirements, but for this presentation I really wanted to include a few video elements to give a visual intuition about some graph clustering algorithms. Needless to say, embedding a video in a PDF does not seem possible (nor does it sound like a good idea).
Thankfully, there's a workaround: we can use the dvisvgm LaTeX backend to render Beamer presentations to SVG instead of PDF! The major advantage is that SVG rendered Beamer presentations can be run in the browser, with all the associated niceties a modern browser provides. Here's the end result, use the arrows on the top right to navigate:
As someone who uses Latex to typeset PDFs, and no particularly deep interest into how it works under the hood, the fact that different compilation targets as PDF documents are possible was a surprise, here's a quick overview of what to do [2]:
1. Import Beamer with the dvisvgm option, and media4svg if wanting to render videos:
\documentclass[dvisvgm,hypertex,aspectratio=169]{beamer}
...
\usepackage{media4svg}
                    
2. Tell dvisvgm to include this boilerplate javascript to make powerpoint-like navigation work.
3. Finally, we can use \includemedia to embed videos:
\begin{figure}
  \only<1>{\includemedia[width=32em,height=16em,autoplay,muted,embed=false]{}{1_draw.mp4}}
  \only<2>{\includemedia[width=32em,height=16em,autoplay,muted,embed=false]{}{3_color.mp4}}
  \only<3>{\includemedia[width=32em,height=16em,autoplay,muted,embed=false]{}{5_reorder.mp4}}
  \caption{
    \only<1>{\textbf{Vertices} are members, \textbf{edges} are connections between them.} 
    \only<2>{Run a \textbf{clustering algorithm}.}
    \only<3>{Reorder based on clustering.}
    }
\end{figure}
                    
4. To compile your presentation, use
dvilualatex beamer.tex
dvisvgm --zoom=-1 --exact --page=1,- --font-format=woff2  beamer.dvi
I like how everything "just works", including adding and replacing videos with the usual beamer constructs. For a full reference and beamer template, the best place to start is probably the media4svg package documentation (there is an example beamer template), but feel free to check out the code for the above presentation. Would I recommend anyone to try this? For the love of god, no! The work of media4svg and dvisvgm guys is commendable, but literally any other tool would have been a better fit for this job. Does this count as procrastination? I don't know...