You can create animations with HTML5 by combining HTML, CSS, and JavaScript (JS), with which you can build shapes. Also, you can control animations and edit images, video, and audio by means of JS or CSS elements, all of which you then add to a drawing board, which you set up with the <canvas> element.
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 page, the longer it takes to load, and the greater the likelihood that visitors will abandon your site. Plus, page-load speed is an important factor in SEO ranking.
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 delivering longer videos with a higher resolution? No matter that you could offer them as a single file through progressive streaming, your viewers might still run into issues, such as buffering, slow start of playbacks, or even playback failures.
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 formats (JPG, PNG, and so forth), but ask them about High Efficiency Video Coding (HEVC), Vorbis, and VP9, and their eyes glaze over.
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 the Flash days?
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 jumps in file size”. Cloudinary built a tool that implemented this idea, and the response from the community was universal: “Great! Now – what else can it do?” Today, we have an answer: art direction!
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.
Cloudinary’s JavaScript library accelerates web development by providing automated JavaScript image transformation and management with a few lines of code. The newly released version streamlines the library by providing a much requested jQuery-free core library. At the same time it is fully backward compatible with previous versions. The new library is further enhanced with classes and a chainable API, making the implementation of Cloudinary functionality in your application easier (and more enjoyable!).
This is a guest post by Eric Portis – a proud member of (and newsletter-writer for) the Responsive Issues Community Group. The RICG formulated, championed, and standardized the new HTML features presented in the article.