Large media not rendering

Hi! im trying to figure out what is going on with mi large media files. I’d reinstall everything but stills the same. The files are displayed on large media tab and tracked on git lfs but when the site is deployed they didn’t render.
I tried with git lfs push --all origin but still the same. Should I have to rename the files to change the hash that Large Media sets?

On the first time I uploaded the “*.mp4” files on my static folder and only upload one of them. Here is the build: [https://5f66c0be9dfb670007ef6c52--itsdiverse.netlify.app/.
After that any file was rendered. So weird

Here is the build with everything ok but nothing rendered. Of course I tried to publish it but stills the same.

Here are my steps and some screenshot not all of them.

  • brew install git-lfs
  • npm install netlify-cli -g
  • netlify plugins:install
  • netlify-lm-plugin
  • netlify lm:install
  • netlify link
  • netlify lm:setup

Please Let me know if there is any thing missing. Now I had untracked all the files to start again.
Appreciate some help!

Regards.

@tdelgio Just glancing at it, it appears that instead of a link to a video for what I assume is your missing video, you have Base-64 code. Is this the missing video?

Hi, @tdelgio, I’m seeing both deploys service the LFS files correctly:

https://5f66c0be9dfb670007ef6c52–itsdiverse.netlify.app/cubepipes.mp4

and:

https://5f6766e5b60f460007700ab2–itsdiverse.netlify.app/cubepipes.mp4

both send identical content when I test.

It might help to know exactly what URL isn’t working. From @gregraven’s reply it sounds like the missing files are being embedded into the HTML as base64 encoded binary data (binary data encoded as text).

Here is an example from the index.html file:

<source src="data:video/mp4;base64,dmVyc2lvbiBodHRwczovL2dpdC1sZnMuZ2l0aHViLmNvbS9zcGVjL3YxCm9pZCBzaGEyNTY6YjYzYjA2YzI1N2RkNzYzOTM5YzliNDUyMGQxNzc5NmE3ZjY3MGM1ZjE4Y2NlOTY4NTFlODJhMzRjOWEyZWQ4MgpzaXplIDEwMDc0MTQK" type="video/webm"/>

If you decode the text, you will see a Git LFS pointer instead of the video file:

$ echo "dmVyc2lvbiBodHRwczovL2dpdC1sZnMuZ2l0aHViLmNvbS9zcGVjL3YxCm9pZCBzaGEyNTY6YjYzYjA2YzI1N2RkNzYzOTM5YzliNDUyMGQxNzc5NmE3ZjY3MGM1ZjE4Y2NlOTY4NTFlODJhMzRjOWEyZWQ4MgpzaXplIDEwMDc0MTQK" | base64 --decode
version https://git-lfs.github.com/spec/v1
oid sha256:b63b06c257dd763939c9b4520d17796a7f670c5f18cce96851e82a34c9a2ed82
size 1007414

This happens because the binary video data is required during the site build so it can be encoded and that isn’t possible with Large Media. Only the pointer is downloaded and the pointer, not the file is being encoded.

This is covered in the Large Media requirements and limitations documentation here, quoted below:

  • Files tracked with Large Media are uploaded directly to the Netlify Large Media storage service on push, completely bypassing the site build. This saves build time, but also means that the files are not available to tools that process asset files during the build, such as Hugo’s image processing or the gatsby-image plugin. Depending on your needs, you may be able to replace this functionality with Netlify’s image transformation service.

If you need to embed the video in the HTML, you can use Git LFS but not Large Media. If you need to make changes to this site because if this (for example, removing the Large Media add-on), please let us know.

@gregraven and @luke thanks for your reply guys!
So, let me know if I understand well, The thing here is how I’m passing the data. This is auto generated by the img tag? Should I paste the GLF pointer instead of the src to the img on the repo? or there is another way to serve the files?

Thanks!

Hi, @tdelgio, actually this is a limitation of Large Media. The binary data (“binary date” meaning the actual video file) is not available during the site build only when Large Media is used.

If you want to embedded the video in the HTML (and I think that you do), then we must disable Large Media for this to work.

Note, you can use Git LFS with the LFS service at GitHub and still get the binary data during the site build. The limitation isn’t Git LFS specific, it is Large Media specific.

Again, the solution for this will be one of the two solution below. Either to:

  • stop doing any processing during the site build (meaning no embedded Large Media assets in HTML a all, no base64 encoding)

or:

  • disable Large Media for this site and use GitHub’s LFS service instead

If you want to disabled Large Media please read the guide below and let us know when you are ready to proceed:

Thanks Luke! I will notice if need to delete Large Media.
Appreciate your help!