I want to store my video clips, directly in JavaScript! The other approach is something I want to do for fun, and to reuse some concepts from my last post on binary formats. Upload the video clips somewhere (or find already hosted clips), and from JavaScript, use fetch() to retrieve them via network request and get the binary blob. I know that I’m going to need the video files that I want to load accessible from within my JavaScript code. General idea is AVC-H.264/MP4+AAC offers widest compatibility, but is commercially licensed, whereas a better option with less support is VP8 or VP9 with Opus audio. 💡 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. 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. Source Buffer Modes: Segments vs Sequence.
0 kommentar(er)
