How to play a TFile which is a video?

Developers: Plugin & API
1

Hello everyone, I’m using ReactPlayer to play videos stored on Obsidian:

I use the following code to find the file path:

     const selectedFilm = selectedOptions[0];
      setSelectedSource(selectedFilm.sourcepath);
      
      // Get the file and verify its existence
      const file = app.vault.getAbstractFileByPath(selectedFilm.sourcepath);
      
      if (file && file instanceof TFile) {
        console.log("Found file:", file);
        setFilePath(file.path);
      } else {
        console.warn("File not found or path is incorrect");
        setFilePath(null);
      }

And here is my player component:

      {filePath && (
        <div>
          <h4>Video Playback:</h4>
          <ReactPlayer
            url={filePath}
            controls={true}
            width="100%"
            height="400px"
            config={{
              file: {
                attributes: {
                  controlsList: 'nodownload',
                }
              }
            }}
          />
          <p>Currently playing: {filePath}</p>
        </div>
      )}

I used a breakpoint to check the filePath, which outputs: "0.lapian/0.pianyuan/22sec/20251113094326-QQ20251113-94240.mp4".

However, the video does not actually play. How should a TFile be properly referenced for playback?

image
image1138×797 59.9 KB

2 
this.app.vault.getResourcePath(file);