HTML5 Tutorials

  • 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
    Awesome File Compression and Delivery with KeyCDN and Brotli

    I've seen the KeyCDN name around for years, mostly as a free content delivery network (CDN) for many open source JavaScript frameworks, and based on that alone I've always thought very well of them.  KeyCDN recently asked me to check out one of...

  • By
    Detect Supported Audio Formats with JavaScript

    As streaming becomes our main entertainment source and vendors fight to create the best video format, it's going to be more and more important that we detect device and browser video support before posting videos on our websites.  We think less about audio but the same...

  • By
    Detect Supported Video Formats with JavaScript

    Over the past few years we've been seeing new audio, video, and image formats take shape to challenge the legacy formats that we've used since the web's inception.  This is a great development as we have more processing power and better compression algorithms have been developed...

  • By
    Six Tiny But Awesome ES6 Features

    Everyone in the JavaScript community loves new APIs, syntax updates, and features -- they provide better, smarter, more efficient ways to accomplish important tasks.  ES6 brings forth a massive wave of new goodies and the browser vendors have worked hard over the past year to get those language updates...

  • By
    HTML5 Video Player Best Practices

    Let's all be honest:  when it comes to media and the early days of the internet, we definitely did it all wrong.  We started with embedded video players like RealPlayer and Windows Media Player which required custom codecs and browser plugins, then moved on to Flash and...

  • By
    Mozilla, Web Virtual Reality, and A-Frame

    I was fortunate enough to make Game Developer Conference this year and the big story was virtual reality.  Hell, you couldn't go five feet without seeing someone pitching their VR hardware, software, or likewise technology.  They were all proprietary solutions, including Oculus, Epic Games, and so on.  You...

  • By
    ping Attribute

    One of the attributes I somehow missed with the HTML5 revolution was the ping attribute;  Other attributes were more popular, download being one of them.  Hell, I just stumbled upon the ping attribute while reading an old forum post.  The ping attribute of an a element represents a...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    Don&#8217;t Wait for ServiceWorker: Adding Offline Support with One-Line

    The HTML5 Application Cache should make building offline-friendly web apps possible. In practice, its unforgiving nature makes it very challenging to use at all, giving it a uniquely negative reputation among front-end developers. It's expected that apps continue to work offline—most users don't won't care about...