Embedding Videos In MkDocs
Markdown And HTML
As I was doing my documentation, I had some trouble embedding a video in the webpage that was stored locally in my repo. For example, I uploaded a MOV file of an LED blinking and tried the following Markdown syntax which I read about here.
Here is what that looks like:
Then I tried writing it in HTML based on this website which also didn't work.
<video src="../../img/week4/rp2040-blink.mp4" controls="controls" style="max-width: 730px;">
</video>
I then opened the HTML console in Chrome to view my webpage and played around with changing the relative link becuase I had similar troubles when setting up images in Markdown on Week 1. I tried removing a ../ (so just ../img/week4/rp2040-blink.mp4) which didn't work. Then I tried adding another one, which worked perfectly!
<video src="../../../img/week4/rp2040-blink.mp4" controls="controls" style="max-width: 730px;">
</video>
For some reason, though, this only worked in HTML.
Video Compression
My videos that were only 2 seconds long exceeded the 10MB upload limit for git. Afte resetting my head and unstaging the files, I tried using Vimeo to compress my images as this article suggested. However, I quickly exceeded my limit on videos, so I downloaded VLC Media Player. I followed this tutorial to help me compress my images, which worked!
I clicked Media > Convert / Save..., added all of the videos, clicked Convert / Save, clicked the wrench icon, clicked Video Codec, checked the Video checkbox, clicked the Resolution tab, and set the width to 750px. Then I clicked Save and named my settings profile. I then chose the newly-created profile, checked the Append '-converted' to filename checkbox and pressed Start. The quality was too low so I went back and edited it to be 1250px (I couldn't rename the profile but this didn't make a difference). I realized that I also never checked the radio button next to MP4/MOV under the Encapsulation tab. After doing this, I was unable to open the MP4 files and recieved an error.
I tried renaming the file from .mp4 to .mov and enabling file extentions to be visibile in File Explorer's options, but this didn't address that there were encoded in mp1v format. I tried changing Codec in Video Codec > Encoding Parameters to H.264 (I'd seen this setting before in video editing). This worked!
For some reason, one of the videos would always get corrupted and the original video's filesize would become 1KB (also corrupt). This video was already small so I just decided to keep it as a MOV file.