Results for Tag ‘HTML5’

The HTML5 specification introduced the <video> element, which can be used to embed video content into web pages, and it is well supported across modern browsers. In this post, we’ll learn how to embed an HTML5 video player on an HTML document and define custom controls for it that is…

Before diving into the popular HTML5 video players, it’s essential to acknowledge the broader ecosystem of tools and technologies that complement and sometimes offer alternatives to these players. For instance, Vime stands out as an open-source media player library built with Svelte, offering a modern approach to media playback. Libraries…

Canvas animation is a feature of HTML5 that allows you to draw images, edit images, and erase them, on a drawing board which you set up with the <canvas> element. The canvas is a rectangle-like area on an HTML page. By default, the canvas has no border or content. You…

As discussed in this SpeedCurve blog post, video use on the Internet over the past decade has been exploding. Accompanying that growth is additional bandwidth, which is burdensome for your IT budget and for your visitors. Beyond the expense, you must also consider user experience. The heavier the…

Part 1 of this series discusses the optimal way of delivering progressive video streams by taking advantage of modern, efficient codecs. That approach is ideal for short-form (under 60 seconds) videos and for videos displayed at a low resolution, such as ads and previews. But what if you’re…

Short-form videos—hero banners, product pages, ads, social content—are popping up on the web in places never seen before. This trend could become challenging because of the many formats and codecs, let alone inadequate expertise on what best to adopt for web consumption. Nowadays, most people are familiar with image…

When the <video> HTML tag was first introduced in 2007, Web Hypertext Application Technology Working Group (WHATWG)(https://whatwg.org/) took interactivity with the Web to a whole new level. No longer do you have to tackle unique plug-ins or insert weird markups before posting videos online. Who still remembers…

Note: this article was originally published in Smashing Magazine. Four years ago, Jason Grigsby asked a surprisingly difficult question: How do you pick responsive images breakpoints? A year later, he had an answer: ideally, we’d set responsive image performance budgets to achieve “sensible…

Once upon a time, in long forgotten browser versions, getting a video into a website required creating and embedding Flash resources. But these days, all modern browsers support HTML5, including the HTML5 video tag, which means you’ve got a built-in video player that anyone can use. At first glance,…