feat: enhance SlidevVideo component

[KermanX]

Resolves #1424.

The following is the new doc for SlidevVideo

• controls (boolean, default: false): show the video controls
• autoplay (boolean | 'once', default: false):
  • true or 'once': start the video only once and does not restart it once ended or paused
  • false: never automatically start the video (rely on controls instead)
• autoreset ('slide' | 'click', default: undefined):
  • 'slide': go back to the start of the video when going back to the slide
  • 'click': go back to the start of the video when going back to the component's click turn
• poster (string | undefined, default: undefined):
  • The source of the image to print when the video is not playing.
• printPoster (string | undefined, default: undefined):
  • The override for poster when printing.
• timestamp (string | number, default: 0):
  • The starting time of the video in seconds.
• printTimestamp (string | number | 'last' | undefined, default: undefined):
  • The override for timestamp when printing.

Warning

When exporting, the video may fail to load because Chromium does not support some video formats. In this case, you can specify the executable path of the browser. See Chromium executable path for more information.

[netlify]

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	522643f
🔍 Latest deploy log	https://app.netlify.com/sites/slidev/deploys/6615064c79207c0008b71c82
😎 Deploy Preview	https://deploy-preview-1435--slidev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[antfu]

In a way, would having a video cover image be better? This option, to me, is a bit too specific and also might slow down the printing.

[KermanX]

In a way, would having a video cover image be better? This option, to me, is a bit too specific and also might slow down the printing.

Added an imgToPrint prop to achieve that. Also, I think most users may prefer waiting for a while when printing, rather than to screenshot by themselves...

[QuentinRoy]

Thanks @KermanX for this PR!
I have tried your change in a project of mine with timeToPrint and it does not seem to be working 😥. I still get the black rectangles. I am not sure yet if it is because it isn't supported by playwright on my laptop (macOS), or because of something else like the video not playing, the renderer not waiting for it, or maybe because it would only work on builtin components (I simply took your code, pasted it in a new component, and updated the import).

[KermanX]

I have tried your change in a project of mine with timeToPrint and it does not seem to be working 😥.

I had tested with a video that is not very long. I think the problem is the video not got fully loaded when exporting. I used to think that waitFor('networkidle') in the exporting should wait for the video, but maybe the video is mounted to DOM after this waitFor being called, which can be the reason.

[KermanX]

The real problem seems to be that the video is just not being loaded in the print mode. The @canplay and @metadataloaded events both aren't fired, even after waiting for 30s. I am not sure why my previous video was printed correctly.

[KermanX]

The real problem seems to be that the video is just not being loaded in the print mode. The @canplay and @metadataloaded events both aren't fired, even after waiting for 30s. I am not sure why my previous video was printed correctly.

It comes out that this is because chromium is missing some codecs. See microsoft/playwright#4585.

If we run the export command with a Chrome binary, the video can be printed correctly:

pnpm export --executable-path "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe"