Use More Efficient Video Formats

[mason-at-pieces]

Right now we use gifs for some of our local files which causes somewhat poor load performance compared to formats like mp4/webm/ogg.

I already created a Video component that accepts local types and has a parameter for all 3 paths. We simply just need to go through and update the local gifs we use to be in those 3 files types.

A good example of the Video component being used already is the video at the top of this page: https://pieces-docs.vercel.app/learn/features/pieces-copilot

Here is an example of how to use the video component:

<Video
  src={{
    webm: '/assets/personalized-copilot-chats.webm',
    mp4: '/assets/personalized-copilot-chats.mp4'
  }}
  type={'local'}
/>

Ensure that you have both webm and mp4 files added. You can use the ffmpeg cli to take the gif and convert it to webm and mp4 like this:

GIF to MP4:

ffmpeg -i ./static/assets/assets/personalized-copilot-chats.gif ./static/assets/assets/personalized-copilot-chats.mp4

GIF to WEBM:

ffmpeg -i ./static/assets/assets/personalized-copilot-chats.gif ./static/assets/assets/personalized-copilot-chats.webm

---

Also, if the Docusarus branch isn't merged in before someone works on this, please branch off of that branch instead of main as we will be migrating to use that branch soon.

[Sophyia7]

@mason-at-pieces would also love to work on this