Search code examples
javascripthtmlfilesystembrowser-nativefs

how to get the src for a video with File System Access API?

When selecting a folder with the new File System Access API, I want to list the videos with the HTML tag. But I am not able to get the source right from the file's handle.

Reading the video from a input is possible with

const blobUrl = URL.createObjectURL(droppedFiles[0])
this.$refs.video1.src = blobUrl

But with the File System Access API I can't do the same with:

async getVideo(FileHandle) {
  const file = await FileHandle
  return URL.createObjectURL(file)
}

From a console.log, File handle is : File {name: "front.mp4", lastModified: 1600193856925, lastModifiedDate: Tue Sep 15 2020 20:17:36 GMT+0200 (Central European Summer Time), webkitRelativePath: "", size: 492148773, …}

PS: You can check a complete example using File System Access API

Solution

  • I figured it out by assigning the video source to:

    const src = URL.createObjectURL(await fileHandle.getFile())