How to make interactive Slides with Videos

Questions
,
1

Hi everyone :),
I would like to create slides for a presentation with typst. But I need some interactive elements like embedding videos with playback controls. A already asked about this some time ago, but back then there was no real solution for this (except for adding gifs, which is not sufficient for my use-case).
I see that touying now has exporter to impress.js. Since impress.js supports videos, I was wondering if this feature could be somehow used from typst.

Another nice lib for slides is sli.dev, which even has a typst plugin to render typst content on a slide (also sli.dev has nicer controls compared to impress.js). But I would like to have the typst integration the other way around (typst → sli.dev) just like the touying to impress.js exporter. Is there a simple way to achieve this?

2

Hi. See Add support for videos · Issue #955 · typst/typst · GitHub.

3

Thanks @Andrew,
it seems that there is currently no solution for this (according to the issue).
May it be possible to add custom svg elements to the typst svg output?
This way the following svg part could could be added for videos:

<foreignObject x="0" y="0" width="300" height="200">
  <video width="300" height="200" controls="" style="position: fixed; left: 151px; top: 104px;">
    <source src="...." type="video/mp4">
  </video>
</foreignObject>

This would work with the touying to impress.js export.
But am not sure how to emit the custom svg part from typst.
Is there something like?:

svg.element("...")
4

Maybe you can try using #image to include an SVG with foreignObject?

5

@AllanChain in the meantime I tried exactly that:

#image(
bytes("
<svg width=\"100mm\" height=\"100mm\" xmlns=\"http://www.w3.org/2000/svg\">

  <foreignObject x=\"202\" y=\"20\" width=\"1440\" height=\"907\">
      <video width=\"1440\" height=\"907\" controls=\"true\" loop=\"true\" autoplay=\"true\">
         <source src=\"http://samplelib.com/lib/preview/mp4/sample-5s.mp4\" type=\"video/mp4\"></source>
      </video>
  </foreignObject>

</svg>
"), 
format: "svg"
)

The problem is that out of security reasons, typst base64 encodes all embedded svgs, so that the foreignObject does not work. Thus, I created a python script that decodes all the svg elements. Then it kind of works.


But I think this is not a good solution. I guess using html export would be better. Therefore, I would need to wrap every page into a html.frame but ignore some manuell definiert html elements on a page (which should be directly included into the html, e.g. the video elements). But I am not sure how to achive this behaviour.
6

I remember at least one mention of foreignObject: SVG with embedded SVG doesn't export correctly to PDF · Issue #5174 · typst/typst · GitHub. I also remember something about linking to external sources, but can’t find it.