Cloudinary Blog

ReactNYC: Building Modern Media Experiences in React Apps

ReactNYC: Building Modern Media Experiences in React Apps

Summary

In this talk, the audience learns everything they will ever need to know about playback controls, offline media, image & video optimization and transformation, pre-loading, deep learning with Images, audio & improving web performance by using the right tools while dealing with media assets in their react apps.

Contents

0:05 - Intro
0:15 - Google Developer Expert
0:40 - Community Evangelist
1:15 - User experiences Across The World With Media on Web
3:16 - UX: Loading Video on a slow 3G network
3:35 - UX: Watching Man’s Not Hot when device goes offline
3:59 - UX: Accessing an Image on second load when it doesn’t come instantly
4:47 - After 2 secs of buffering users start dropping off at around 6% per second
5:29 - Modern Media
6:38 - Anatomy of Modern Media Experience
6:54 - Case studies - Modern Media Experience
8:25 - Building the Modern Media Experience… Your turn!
8:35 - Recommended Video players
10:00 - Fast playback with adaptive bitrate streaming
11:24 - Fast playback with video preload
13:47 - Smart video preload considerations
18:38 - Great UX
18:44 - Screen Orientation API
20:21 - Playground Playback & Page Visibility
21:28 - Intersection Observer API
23:07 - Media Session API
25:17 - Image & Video Transformations
29:28 - Offline
29:38- Background Sync
30:38 - Background Fetch
31:46 - Modern Media Experience Demo

Resources

Recent Blog Posts

The Evolution of the Role of Software Developers

Since the early 1990s, I’ve been watching with interest and intrigue the rapid evolution of the software industry and its developers, which ushered in the Internet age in the meantime. I’d like to share with you my observations on that subject. Because of the breadth and complexity of the related topics, I’ll chronicle them in a series of posts, starting with this one.

Read more
StubHub Finds Ticket to Effective Digital Asset Management with Cloudinary

As StubHub evolved from a lightweight website to one that was rich with images, videos and custom views from seat locations at event venues around the world, it sought a way to streamline image management. The company implemented Cloudinary, which enabled it to significantly reduce the time required to manually edit images, while ensuring that the key focal points of each image were viewable in more than 30 viewports across a multitude of devices. Cloudinary’s digital asset management capabilities also have helped StubHub better protect its content, creating a single repository that ensures developers and designers have access to only the most current images and understand the associated brand guidelines.

Read more
The Visual Media Report: Visual Engagement and User Experience

With privacy top of mind, we wondered what we might learn from analyzing the large volume of data. What user behaviors would we discover, what regional differences might exist? What insights or early hints from different industries could we extrapolate? These questions guided us as we analyzed millions of anonymous end-user experiences and asset interactions across our platform.

Read more