Media application basics
Working with media often requires changing the characteristics of media files. On this page, you'll learn about the tools used and how to install them quickly.
Capturing an image from the user
Most browsers can get access to the user's camera.
Media conversion
Commands needed to convert a raw mov file to media assets packaged for DASH or HLS.
What is EME?
Enabling HTTPS on your servers is critical to securing your webpages.
Media file basics
You might think that you can take a video from a camera and upload it to the web as is. Preparing a video for serving from your own site is a bit more complicated.
Mobile Web Video Playback
Create the best mobile media experience on the Web by following these best practises.
New syntax for range media queries
Find out how this new syntax can streamline media queries.
Recording Audio from the User
Most browsers can get access to the user's microphone.
Recording Video from the User
Most browsers can get access to the user's camera.
Customize media notifications and playback controls with the Media Session API
Web developers can customize media notifications and respond to media related events such as seeking or track changing with the Media Session API.
Media streaming basics
Media streaming is the method for continuously delivering multimedia content from a server where the content has been split into individual chunks of data that can be joined back together during playback in a specific order through a range request using protocols such as DASH and HLS.
Migrate to User-Agent Client Hints
Strategies to migrate your site from relying on the user-agent string to User-Agent Client Hints.
Mobifying your HTML5 site
A non-responsive approach to building cross-device webapps
Multi-touch web development
Touch and mouse
More capable form controls
Build custom elements that work like built-in form controls.
Multiplayer audio fun
A demo using the Web Audio API.
HTML5 vs Native
Semantics and navigating content
The role of semantics in page navigation
New patterns for media apps
This blog post announces a new collection of patterns for media apps.
New Progressive Web App training now available
A new, six part Progressive Web App training is now available, complete with a new series of codelabs to teach you how to build reliable, installable, and capable PWAs.
Using the Notifications API
Common techniques to build offline applications
Some common recipes to make your app work offline.
Create an offline fallback page
Learn how to create a simple offline experience for your app.
Optimize Cumulative Layout Shift
Cumulative Layout Shift (CLS) is a metric that quantifies how often users experience sudden shifts in page content. In this guide, we'll cover optimizing common causes of CLS such as images and iframes without dimensions or dynamic content.
Optimize Interaction to Next Paint
Learn how to optimize your website's Interaction to Next Paint.
Optimize long tasks
You've been told "don't block the main thread" and "break up your long tasks", but what does it mean to do those things?
Optimize Time to First Byte
Learn how to optimize for the Time to First Byte metric.
Optimize WebFont loading and rendering
This post explains how to load WebFonts to prevent layout shifts and blank pages when WebFonts are not available when the page loads.
The origin private file system
Using the Page Visibility API
How to measure search engine optimization with Lighthouse
The Lighthouse SEO audit scans your page, tests for things that matter to search engines, and gives you a score so you can see specific areas for improvement. SEO matters because it's how you get more relevant users viewing your content.
Help users manage passkeys effectively
These passkey management guidelines help you accomplish an intuitive, secure, and robust experience for your users.
Create a passkey for passwordless logins
Passkeys make a website's user accounts safer, simpler, easier to use and passwordless. This document discusses how to allow users to create passkeys for your website.
Payment and address form best practices
Maximize conversions by helping your users complete address and payment forms as quickly and easily as possible.
Visual searching with the Web Perception Toolkit
Wouldn't it be great if users could search your site using their camera?
Next steps
Having completed a site audit, you should have accurate review data in a form that makes it easy for developers and other stakeholders to prioritize and justify changes.
Share the results
Once you've audited a site, make sure to package the results in a digestible form. Be sensitive to the people on the receiving end of your audit, structure your report carefully and present your data in terms of opportunities and solutions.
Web permissions best practices
Follow these best practices when asking users for permission to access sensitive capabilities (such as camera, microphone, and location).
Persistent storage
Persistent storage can help protect critical data from eviction, and reduce the chance of data loss.
Google Photography Prize Gallery
Pointer lock and first person shooter controls
Porting USB applications to the web. Part 2: gPhoto2
Learn how gPhoto2 was ported to WebAssembly to control external cameras over USB from a web app.
Porting USB applications to the web. Part 1: libusb
Learn how code that interacts with external devices can be ported to the web with WebAssembly and Fugu APIs.
Practical prompt engineering for smaller LLMs
Learn how to adjust your prompts to achieve your preferred results across different LLMs, models, and model sizes.
Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts
By optimizing rendering cycles, Chrome 83 eliminates layout shifting when preloading optional fonts. Combining with font-display: optional is the most effective way to guarantee jank-free rendering of custom fonts.
Prepare media files for the web
In this section you'll learn how to format video for mobile web playback, and how to create multiple files to cover a range of browsers, plus how to encrypt them.
Progressively enhance your Progressive Web App
Progressive enhancements ensure your PWA remains useful on all modern browsers, while delivering an advanced experience on browsers that support newer web capabilities.
Patterns for promoting PWA installation
How to promote installation of Progressive Web Apps and best practices.
Codelab: Build a push notification client
A step-by-step interactive tutorial that shows you how to build a client that subscribes the user to push notifications, displays push messages as notifications, and unsubscribes the user from push notifications.
Common Issues and Reporting Bugs
There are right ways of using notifications, and ways of using them better. Learn what makes a good notification. We won't just show you what to do. We'll show you how to do it.
Common notification patterns
Displaying a Notification
Push notifications FAQ
Push events
How push works
Notification behavior
Push notifications overview
An overview of what push notifications are, why you might use them, and how they work.
Codelab: Build a push notification server
A step-by-step interactive tutorial that shows you how to build a server that manages push notification subscriptions and sends web push protocol requests to a push service.