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 :+1:

• 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 :-1:

• 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

[kvaps]

Hi @yhatt Is there any workaround for now? I've tried to use raw HTML, but it is not working in new marp https://github.com/marp-team/marpit/issues/178

[yhatt]

@kvaps Sure. You can use <video> tag with enabled HTML by preferences.

<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" autoplay muted />

[kvaps]

Thanks! That's what I've used for make it full screen:

---
marp: true
theme: base
style: |
  video.bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

---

<video autoplay muted loop class="bg"><source src="video.mp4" type="video/mp4"></video>

[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.

[ludos1978]

i figured out how to install a plugin

npm install pluginname

i also finally figured out that an engine is what is meant when i should activate a plugins (at least i think it is)

https://github.com/marp-team/marp/discussions/206

// engine.js
// https://github.com/marp-team/marp-cli#functional-engine

const yourMarkdownItPlugin = (md) => {
  // Write markdown-it plugin for extending Markdown syntax as you like
}

module.exports = ({ marp }) => marp.use(yourMarkdownItPlugin)

marp --engine ./engine.js your-markdown.md

but i am still stuck how to combine the plugin modules with the engine because it follows completely different syntax

markdown-it-video

var md = require('markdown-it') (
    {
        html: true,
        linkify: true,
        typography: true
        }
    ).use(require('markdown-it-video'), { // <-- this use(package_name) is required 
        youtube: { width: 640, height: 390 },
        vimeo: { width: 500, height: 281 },
        vine: { width: 600, height: 600, embed: 'simple' },
        prezi: { width: 550, height: 400 }
    }
)

markdown-it-html5-media

// Init as above
md.use(html5Media, {
  videoAttrs: 'class="my-video-css"',
  audioAttrs: 'class="my-audio-css" data-collapse'
});

for a non javascript developer it's pretty hard / impossible to activate a plugin with the current descriptions. Some example setup (as files in git, not text in documents) would possibly really help a lot.

[yhatt]

Marp team is not JavaScript teacher. Essentially Marpit is a framework for developers and assuming users are familiar with JavaScript. We have no reason to teach everything from zero.

[ludos1978]

is there a better place to discuss this? I assumed the plugins to be part of the marp system, which i read was supposed to be easy to use? If the plugins are only meant to work with marpit that would explain my naivety.

btw, i really appreciate your support and your work on this project.

[yhatt]

Recommend to ask in StackOverflow. Your question belongs to basic of JavaScript (Node.js). There would be a lot of expert of JS in StackOverflow than Marp discussion forum. Refer to our support guideline.

Plugin system is surely a part of Marp ecosystem. But plugins you tried to use are just not assumed Marp(it) usage, because they are compatible markdown-it plugins, not Marp(it) plugins.

[ludos1978]

after several hours i solved it. this is my final version to embed videos using for local files and @ for linked youtube/... files.

// engine.js

const mdItVideo = require('markdown-it-video')
const mdItHtml5Embed = require('markdown-it-html5-embed')

module.exports = ({ marp }) => marp
.use(mdItVideo, {
    youtube: { width: 1120, height: 500 },
    vimeo: { width: 1120, height: 500 },
    vine: { width: 1120, height: 500, embed: 'simple' },
    prezi: { width: 1120, height: 500 }
})
.use(mdItHtml5Embed, {
    html5embed: {
        useImageSyntax: true,
        attributes: {
            'audio': 'width="320" controls class="audioplayer"',
            'video': 'width="1120" height="500" class="audioplayer" controls'
        }
    }
})

edit: updated final version