Media Tutorials

  • By
    Get and Set Volume with JavaScript

    The <audio> and <video> tags provide a wealth more functionality than most people know. For instance, did you know that you could detect supported video formats and audio formats using a few JavaScript tricks?  It got me to thinking about the possibilities of detecting system volume...

  • By
    Create Custom Video Player Controls with CanJS

    In this guide, you will learn how to create a custom video player using the <video> element and CanJS. The custom video player will: Have custom play and pause buttons. Show the current time and duration of the video. Have a <input type="range"> slider that can adjust the position...

  • By
    How to Hide Information in Images

    If you've followed this blog, you know that I'm obsessed with figuring out every way to interact with, abuse, and convert different types of media.  Whether it's images, video, or audio, if something can be changed or exploited, I want to figure out how to do...

  • By
    Count Frames in an Animated GIF

    The animated GIF always makes me chuckle; on one hand they seem like a relic of the "old web", on the other hand they aren't going anywhere and their meme-like presence seem to only make them more popular.  If you browse through my media blog...

  • By
    Uppy File Uploading

    One of the big tasks I was charged with at my first job was setting up a system by which any customer or potential customer (aka anonymous user) could upload PDF and image files. I had loads of constraints to deal with: browser support...

  • By
    How to Use OBS as a Webcam

    As I learn more about streaming video games on Twitch and continue broadcasting the Script & Style Show, I've become skilled in the art of Open Broadcasting Software (OBS).  OBS is a bit like PhotoShop for video, wherein you can layer effects like...

  • By
    Detect Video Resolution

    Video resolution has always been something I've been interested in, starting with the purchase of my first HD television.  The HD video quality felt life-changing, especially when watching the World Cup, which I'd bought that TV for.  I carried that enthusiasm through to being an early...

  • By
    Dynamic Waveform Visualizations with wavesurfer.js

    Waveform images are an awesome addition to boring audio widgets.  They can be functional as well as aesthetically pleasing, allowing users to navigate audio visually.  I recently found wavesurfer.js, an amazing waveform image utility that uses to Web Audio API to create super customizable...

  • By
    Cloudinary Launches a Complete Video Solution

    Over the past year I've shown you how amazing Cloudinary is for media delivery, optimizationimage filters and transformations, Vue and React; whatever the task, Cloudinary has you covered.  Today I'm happy to share that Cloudinary has a massive new feature announcement: ...

  • By
    Convert JPG, PNG, and Animated GIF to WEBP

    New image formats like WEP and MOZJPEG will be a major boost to load time on the web.  The majority of page load and render time is usually attributed to unoptimized images, so these new formats will make both mobile and desktop load times faster.  I've...