ulfschneider / markdown-it-fitmedia

A plugin for markdown-it to set aspect-ratio of responsive images and to make videos responsive
MIT License
0 stars 0 forks source link

'unsupported file type: undefined' for mp4 videos? #3

Open mestela opened 3 months ago

mestela commented 3 months ago

Hi, I'm trying to add mardown-it-fitmedia to a vitepress site. I've managed to get the plugin installed, and its adding the correct tags for all the png's and gif's on the site, which is great! I have a lot of mp4's on the site too, and they're all generating a warning during the build process in this format:

Failure when adjusting img TypeError: unsupported file type: undefined (file: /Users/mattestela/Documents/git/cgwiki/docs/video/vops_distort_sm.mp4)

The documentation implies that video is supported, is there something I've misconfigured here, or an extra requirement? I tried using another similar vite plugin that required ffprobe to inspect media, is that something I need to do here too?

Thanks,

-matt

ulfschneider commented 2 months ago

Hi, for the video tag, like for the iframe tag, you have to provide the dimensions of the video to play. Here is an example:

<video controls width="640" height="360">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
mestela commented 2 months ago

Ah thanks. I've edited my config.mts so that the markdown tag now has a fixed height:

markdown: {
    config: md => {
        md.use(markdownHtml5, {
            html5embed: {
                renderFn: function (prop, att) {
                    var tag = '<video controls autoplay muted playsInLine loop height="360" preload="metadata" >';
                    tag += '<source src="$1" type="video/mp4">';
                    tag += '</video>\n';
                    return tag.replace('$0', prop.url.replace('.mp4', '.jpg')).replace('$1', prop.url);
                }
            },
        })

That works, but is there a way to have your plugin set the height per video? My site has lots of mp4's with different dimensions.

Thanks!

-matt

ulfschneider commented 2 months ago

Hi Matt, to get the dimensions of the video I would have to load the metadata for all of your videos during build time. I think this is an expensive operation and to do it well probably some kind of caching should be involved. I´m wondering, if you have the height of your videos, don´t you then also have the width?

Best regards, Ulf

mestela commented 2 months ago

Yeah I totally get it'd be slow, and yeah writing out to a cache would make sense.

In my case I don't have the height, I'm just hardcoding it and hoping for the best regardless of the real size. :)