Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 902
ctwhome Avatar asked Oct 29 '25 13:10

ctwhome


1 Answers

I figured it out by assigning the video source to:

const src = URL.createObjectURL(await fileHandle.getFile())
like image 145
ctwhome Avatar answered Oct 31 '25 03:10

ctwhome



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!