Search code examples
gitvideogithubgit-lfs

Cannot embed Git LFS .mp4 files in HTML page video tag?

In my github repository, I cannot access files stored in git lfs when writing up an HTML page, and I think it's because of the src= aspect of the tag.

So I recently installed git-lfs and it seems that the files are stored (when I do git lfs ls-files the file shows up. I am currently storing .mp4 files in my lfs, but when it comes to using the <video> tag in the HTML of my repositoryname.github.io page, it shows as "no video with the supported format and MIME type found" in the video element.

I've tried src="../file.mp4" and src="file.mp4" and src="https://repositoryname.github.io/file.mp4" and src="https://github.com/repositoryname/repositoryname.github.io.git/info/lfs/file.mp4" (where git lfs env says the endpoint is) but nothing has worked so far.

I don't want upload it to a video streaming site and then embed it in the page, and src="../file.mp4" and src="file.mp4" work for smaller video files that are not in git lfs storage.

Any possible solutions? I'm not sure if I missed something as to how to link/embed files, but I'm very, very, new to git and git-lfs, so please go easy on me 🙈.

Solution

  • Getting the file

    I'm not 100% sure it works for videos, but I noticed that on the current version of the web UI, you have a "Download" button instead of the "Raw" and "Blame" buttons for files tracked with LFS.

    Clicking on the "Download" button takes you to a place different from what the output of git lfs env indicates.

    In the case of an image, I see the following URL:

    https://media.githubusercontent.com/media/{USER}/{REPO}/master/{PATH_TO_FILE}

    Some images: (sorry not enough reputation to embed them)

    About entrypoint URL you get with git lfs env

    If I get it right, the Git LFS protocol says that blobs and not files should be fetched from here, using the sha256 and size of real files.

    Further more, the server API specifications seem to indicate that this entrypoint is a public API which reads JSON requests (containing information about the file to fetch) rather than using the document path from the HTTP request…