? I was a little lost on the state of video support across different browsers, until I found this awesome writeup by Encoding Video for the Web.
If you don’t have your own files to work with, I compiled a list of resources I found as I worked on this. I could use FFMPEG to convert videos I want to use to the right format directly, but in my case, I used Shotcut to handle both the trimming and conversion process. For my demo, I’m going to stick with Webm as the container, and VP9 as the codec. ? /joshuatz/mediasource-append-examples Getting Dummy Data Readyįirst thing I need some video clips that are going to work with MediaSource (see “Research” section for more info on file formats). These will be discussed further on, but if you want to jump right to the source code, you can find it at: I have coded several fully-functional and well-commented examples that use the approaches from this post to dynamically load video.
BLOB TO MP4 CONVERTER ONLINE HOW TO
Codecs and math-heavy coding are just not my bread-and-butter ?♂️.Īnyways, I’m posting this because although my examples are simple, there is not nearly enough info out there on the web on how to even start with MSE / MediaSource. MSE is a really complicated topic, and distinctly separate from my normal area of programming, so my examples are going to be a lot more basic level than what I normally post. I just finished brute-forcing my way through some of the basics (and I do mean basics) of MSE, and wanted to share my findings on dynamically loading data into videos, specifically by using the MediaSource interface, SourceBuffer, and the appendBuffer method. In my previous post about using raw data in JavaScript, I alluded to the concept of dynamically loading data into video elements using the newer Media Source Extensions API (aka MSE) and its collection of interfaces, buffers, and sources.