Open mestela opened 3 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>
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
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
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. :)
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:
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