Video syntax support

[yhatt]

We are considering to support video by Markdown image syntax. It could provide better video experiences like Deckset, on the HTML slide deck.

Also refer to yhatt/marp#60.

<!-- Inline video -->
![](video.mp4)
![w:640 h:480](video.ogv)

<!-- Meta keywords -->
![autoplay loop muted](video.mp4)

<!-- Background video (only in advanced background mode) -->
![bg](video.mp4)
![bg 200%](video.mp4)

Basically these would be converted into HTML5 <video> elements.

Planning features

Do 👍

• Convert image syntax ![]() with video extension into <video> element
• Support inline video
• Support background video in advanced backgroud mode
• Resizing video with the current syntax: width, height, and syntax for background (keyword and percentage)
• Parsing meta keywords known in HTML5: autoplay, loop, muted (and mute alias for compatibillity of Deckset)

Considering 🤔

• Follow Deckset's YouTube support: ![](https://www.youtube.com/watch?v=ZwzY1o_hB5Y) (An another issue?)

Don't 👎

• Playback controll by Marpit
  • Marpit only have to be responsibility for conversion. Whether to follow autoplay meta keyword should decide within integrated apps (e.g. marp-core, marp-cli, marp-web...).

Restrictions

In inline SVG mode, Chromium's rendering bug 467484 will affect to <video> elements. But it would be fixed by an experimental BGPT feature (--enable-blink-gen-property-trees).

[yhatt]

Chrome 72 has released and BlinkGenPropertyTrees is available in chrome://flags now.

We might start work, as the experimental feature or Marpit plugin.

[yhatt]

UPDATE: The latest Chrome 75 enables BGPT by default. It's not yet stable but video rendering in inline SVG is almost good.

Chrome 74	Chrome 75

[yhatt]

MEMO: According to #205, the video control (by control attribute in <video>) in the latest Chrome still will cause glitch. (Applied workaround in #208)

Firefox has very stable video support over the years. I recommend to use Firefox if someone (who is see this) want to use <video> tag in Marpit Markdown.

[kvaps]

Just found an option to play/pause video by clicking on it with disabled control:

<videohtml muted class="bg" onclick="this.paused ? this.play() : this.pause(); this.blur()" onpause=""><source src="img/video.mp4" type="video/mp4"></video>

this.blur() used to not block marp presentation viewer control

@yhatt is there any simple option to start video when slide become active and stop video when switching to another slide?

[yhatt]

@kvaps No. Even if there, it is not in the scope of Marpit framework and Marp Core because HTML slide deck probably you have seen is controling by Marp CLI's bespoke template. (FYI: Marp ecosystem architecture in the contributing guideline)

I recommend to create new issue in Marp CLI's issue tracker if you want the option.

UPDATE: Renamed the title of this issue to make clear Marpit's resposibillity.

[jpsfs]

@yhatt Any news on this? Seems very interesting!

[ludos1978]

i'd love to bring this up again. i can code, but i woudnt know where to start in this project.

also maybe the project aim has changed in the last 3 years. i think video is a basic requirement in lots of presentations.

[yhatt]

We still have no actions. Video syntax can add via existing markdown-it plugin (markdown-it-html5-media, markdown-it-video, and so on), and users who needs them should be already using them. So we have decided that it is no need to be a built-in feature. Find out use cases in wild.

And don't forget Marpit/Marp can use <video> tag directly. We think this approach should be enough for almost users.