#Get the public url of a file located in /src folder

1 messages · Page 1 of 1 (latest)

short spruce
#

Hello, I'm trying to import a video file into my page from a collection. So my path looks like this '../assets/wsr-website/demo.webm'. I would like to get a public link for this file so I can put it on the page, but I can't find how.

Here is how I import videos into my markdown collection file :

---
videos: [
  {
  src: '../assets/wsr-website/demo.webm',
  cover: '../assets/wsr-website/cover.jpg'
  }
]
---

And here is the zod type I wrote:

videos: z.array(z.object({
    src: z.string(),
    cover: image()
})).optional(),

Finally, here is what I was trying to do on my astro file:

let fetchedVideos: any[] = [];
if (videos) {
    console.log(videos);
    fetchedVideos = videos.map(async (videoSrc) => {
        const projectsAssetsSrc = '/src/content/projects/assets/';
        // If there is ../ in the src, we need to remove it to
        let correctSrc = videoSrc.src.replace('../', '');
        // We want import the file to get the metadata

    });
}

How can I import videos files and get a public link ?

paper sorrelBOT
#

Hi @short spruce. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Astro, you can import assets via ESM import and it will return a URL reference to the final built asset. This can be useful for referencing non-JS assets by URL, like creating a video element with a src attribute pointing to that video.

Here's an example of how you can import a video file:

import videoReference from '../assets/wsr-website/demo.webm'; // videoReference === '/src/demo.webm'

You can then use this videoReference in your video element like so:

<video src={videoReference.src} controls></video>

Please note that the path returned during development will be a src/ path, but upon building, Astro generates hashed paths like /_astro/demo.a6737dd3.webm.

Also, it might be useful to place videos in the public/ folder as explained on the project-structure page (https://docs.astro.build/en/basics/project-structure/#public). The files in this folder will be copied into the build folder untouched, and then your site will be built. This behavior makes public/ ideal for assets like videos.

Here's how you can reference a video in the public/ folder:

<video src="/demo.webm" controls></video>

In this case, demo.webm should be located in the public/ directory of your project.

Please refer to the Astro documentation on imports (https://docs.astro.build/en/guides/imports/#other-assets) for more information.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@short spruce kapa.ai is still learning and improving, please let us know how it did by reacting below

short spruce
#

I have to import them dynamically because they are referenced in collections. And, I don't want to put them into the public folder @paper sorrel

paper sorrelBOT
#

Let me check the knowledge base for you. One moment! :books:

#

In your case, you can use Vite's import.meta.glob function to dynamically import the video paths of your videos instead of explicitly importing each individual video. This function returns an object of all of the video paths inside a specified folder.

Here's an example of how you can use import.meta.glob:

const videos = import.meta.glob('/src/assets/wsr-website/*.webm');

In this case, videos is an object that contains all of the video paths inside the assets/wsr-website folder. Each key in the videos object is a string that contains the path to the video, and the value is a function that when called, returns a promise that resolves to the module.

Here's an example of how you can use the videos object to display a video:

if (!videos[videoPath]) throw new Error(`"${videoPath}" does not exist in glob: "/src/assets/wsr-website/*.webm"`);
<video src={videos**videoPath** ().default} controls></video>

In this case, videoPath is a string that contains the path to the video that you want to display. The import.meta.glob() is doing the work of finding the video path that matches the videoPath and handling the import for you.

Please refer to the Astro documentation on dynamically importing images (https://docs.astro.build/en/recipes/dynamically-importing-images/) for more information. The same principles apply to videos.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: