search

marp-team / marpit

The skinny framework for creating slide deck from Markdown
https://marpit.marp.app/
MIT License
948 stars 45 forks source link

Add video in slides #205

Closed peikai closed 4 years ago

peikai commented 4 years ago

When <video ... flags are used to add a mp4 in slides, and export the md file to html. I find the video player can not display properly in chrome browser. And Video cannot be automatically paused after you have flipped this page. Marp for VS Code

yhatt commented 4 years ago

Which Marp tool are you using? If you are using Marp CLI or Marp for VS Code, you have to enable HTML manually.

yhatt commented 4 years ago

First, VS Code seems not to be able playing video. Any video codec such as ffmpeg is not included in VS Code. See the opinion of Matt Bierner, the developer on VS Code.

https://stackoverflow.com/questions/57511993/why-vscode-does-not-include-ffmpeg-in-its-build

yhatt commented 4 years ago

Oh, it would be an irrelevant with VS Code if you are playing deck with Chrome browser.

@peiak Please share more informations to let us reproduce your issue. e.g. screenshot, the version of Chrome browser, <video> tag you had tried, etc.

peikai commented 4 years ago

Thanks, it works well in vscode md preview, 2

but can not display properly in the chrome browser. I mean the video player window. 1

peikai commented 4 years ago

I use simple tags 3

chrome 78.0.3904.70

yhatt commented 4 years ago

Thanks. I've confirmed glitched control in Chrome on Mac. It's a bug in Chrome browser.

glitch

Probably Firefox would work perfectly.

peikai commented 4 years ago

There are enough browsers on my laptop. I am waiting for chrome to fix it, and microsoft edge (chromium) may work well in the future. Thank you!

yhatt commented 4 years ago

I found a workaround to fix glitched control through tweaking style. The below global style would fix incorrect control in Chromium-based browser (includes Chrome and Edge).

---
style: |
  video::-webkit-media-controls {
    will-change: transform;
  }
---

<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls width="100%"></video>

But there are still some bugs. (e.g. incorrect position of context menu) I guess Chromium has the same (and deep) issue as #35 and https://github.com/marp-team/marp-cli/pull/15.

yhatt commented 4 years ago

We've applied workaround for the glitched control in #208.

And Video cannot be automatically paused after you have flipped this page.

Marpit only have to be responsibility for conversion and cannot control video between transition. See #86 to continue tracking issue.