How to show video in html element in view?

Developers & API
1

Hi everyone, I am trying to get a video loaded in my view panel:

import { ItemView, WorkspaceLeaf, normalizePath } from "obsidian";

export const VIEW_TYPE_EXAMPLE = "example-view";

export class ExampleView extends ItemView {
  constructor(leaf: WorkspaceLeaf) {
    super(leaf);
  }

  getViewType() {
    return VIEW_TYPE_EXAMPLE;
  }

  getDisplayText() {
    return "Example view";
  }

  async onOpen() {
    const container = this.containerEl.children[1];

    // Use Obsidian's API to get the correct file path
    const vault = this.app.vault;
    const videoPath = normalizePath("insect.mp4");
     // Extract the actual file path by removing the "app://" prefix and timestamp-like string


    container.empty();
    container.createEl("h4", { text: "Example view" });
    const book = container.createEl("div");
    book.createEl("div",{text:"Testing",cls:"book_title"});
    book.createEl("small",{text:"Me",cls:"book_author"});

    // Create a video element
    const video = document.createElement("video");
    video.controls = true;
    video.style.width = "100%";

    const source = document.createElement("source");
    source.src = videoPath;
    source.type = "video/mp4";
   
    video.appendChild(source);

    // Create a div to hold video controls
    const controls = container.createEl("div", { cls: "video-controls" });
    // Add play and pause buttons
    controls.createEl("button", { text: "Play", cls: "play-button" });
    controls.createEl("button", { text: "Pause", cls: "pause-button" });

    // Attach event listeners for play and pause buttons
    const playButton = controls.querySelector(".play-button");
    const pauseButton = controls.querySelector(".pause-button");

    playButton?.addEventListener("click", () => {
      video.play();
    });

    pauseButton?.addEventListener("click", () => {
      video.pause();
    });

    // Append the video element to the container
    container.appendChild(video);
    

  }

  async onClose() {
    // Nothing to clean up.
  }
}

but every time it comes back error like this:

GET app://obsidian.md/insect.mp4 net::ERR_FILE_NOT_FOUND

I was trying to use the findResourcePath, but didn’t have any luck. The findFullPath couldn’t be used either. Anyone know how to work with this? Thank you so much!

2

Oh damn…Somehow I was typing around and I figured out. This is the key part

// Use Obsidian's API to get the correct file path
    const vault = this.app.vault;
    const file = vault.adapter.getResourcePath('insect.mp4');

I don’t really know why…I tried getResourcePath before but didn’t work, somehow this way it works…