Building a Modern Media Experience in React Apps

Transcript

1. Building a Modern Media Experience in React Apps PROSPER OTEMUYIWA | ReactNYC - October 30, 2017
2. Google Developer Expert @unicodeveloper
3. Community Evangelist ❖ forLoop Africa ❖ Laravel Nigeria ❖ Angular Nigeria ❖ Webpack Africa
4. User Experiences Across The World With Media on the Web You don Know! - Big Shaq
6. User Experience: Loading Video on a Slow 3G Network
7. User Exp: Watching Man’s Not Hot & Device goes Offline
8. User Exp: Accessing an Image on second load & it doesn’t come up instantly.
9. “After 2 seconds of buffering, users start dropping off at around 6% per second.”
10. Modern Media Images Audio Video 62% of Internet Traffic is made up of images, with audio & video constituting a growing percentage of the bytes.
11. Anatomy of a Modern Media Experience?
12. Anatomy of a Modern Media Experience ❖ Fast Playback ❖ Great UX ❖ Delivery Of High Quality Media Assets ❖ Accessibility anywhere
13. Case Studies - Modern Media Experience URL: https://www.iheart.com iHeartRadio Audio
14. Case Studies - Modern Media Experience ❖ Progressive Web App ❖ Media Session API Usage URL: https://www.iheart.com
15. Case Studies - Modern Media Experience JioCinema URL: https://www.jiocinema.com Video
16. Case Studies - Modern Media Experience URL: https://www.jiocinema.com ❖ Progressive Web App ❖ Fast Playback ❖ Play Videos Offline ❖ Media Session API Usage
17. Case Studies - Modern Media Experience iFixit URL: https://ifixit-pwa.appspot.com Images
18. Case Studies - Modern Media Experience URL: https://ifixit-pwa.appspot.com ❖ Progressive Web App ❖ Offline-first
19. “Building the Modern Media Experience…...Your turn!”
20. Woot! Woot! Yaaaaaaaaaaasss!
21. Recommended Video Players ❖ Google Shaka Player - bit.ly/shaka-offline-tutorial ➢ OSS ➢ Custom subtitle rendering ➢ Adaptive bitrate streaming ➢ Playlists ❖ Cloudinary Video Player - http://bit.ly/2iJs7X7 ➢ OSS ➢ Adaptive bitrate streaming ➢ Playlists ➢ Analytics
22. Fast Playback With Adaptive Bitrate Streaming ❖ Videos start quicker ❖ Multiple video streams with different resolutions, qualities and bitrate ❖ Video player loads the optimal stream based on user’s internet connectivity. ❖ Cloudinary’s Plug-and-play adaptive bitrate streaming with HLS & Mpeg-dash works well.
23. Fast Playback With Video Preload ❖ Faster Playback start means more people watching your video. Setting the preload attribute to auto indicates that the browser may cache enough data that complete playback is possible without requiring a stop for further buffering.
24. Fast Playback With Video Preload ❖ Link Preload Link preload is a declarative fetch that allows you to force the browser to make a request for a resource without blocking the window.onload event and while the page is downloading.
25. Fast Playback With Video Preload ❖ Preload Full Video on your website Recommended for smaller files <= 5MB
26. Smart Video Preload Considerations ❖ Check user's Battery Level
27. Smart Video Preload Considerations ❖ Check Network type & save bandwidth User’s Battery Level
28. Smart Video Preload Considerations ❖ Estimate how much space is left on the users device
29. “Great UX...”
30. Screen Orientation API “As users rotate their device, be smart and automatically request for full screen on the video to create an immersive experience. ”
31. Screen Orientation API
32. Screen Orientation API
33. Background Playback & Page Visibility Pause video when page is hidden. This happens when screen lock is active or when you switch tabs. Page Visibility API makes that possible Chrome for Android already pauses videos when page is hidden
34. Intersection Observer API Show/Hide a mute button based on video visibility on the page.
35. Media Session API ” With the Media Session API, you can also customize media notifications by providing metadata for the currently playing video. It also allows you to handle media related events such as seeking or track changing which may come from notifications or media keys” Without Media Session With Media Session
36. Media Session API
37. Media Session API
38. Media Session API “If your web app provides a playlist, you may want to allow the user to navigate through your playlist directly from the media notification with some "Previous Track" and "Next Track" icons”.
39. Image & Video Transformations ” Manipulations and transformations you might want to apply to your media elements”
40. Image & Video Transformations ” Manipulations and transformations you might want to apply to your media elements”
41. Image & Video Transformations
42. Image & Video Transformations
43. Image & Video Transformations ” Concatenate video with images”
44. Image & Video Transformations ” Generating video thumbnails”
45. Image & Video Transformations https://github.com/cloudinary/cloudinary-react ”Your Reference Guide & Transformation Overlord is in this Project”
46. “Delivering High Quality Media assets to Users? How?”
47. Fast Delivery “Deliver your media assets via CDNs”. CDNs offer: ❖ Decrease in server load. ❖ Lower Network latency and packet loss. ❖ Higher Availability. ❖ Storage and security. Akamai Fastly Cloudinary - They all offer CDN delivery
48. “Accessibility everywhere - Offline? Yeah”
49. Offline “You can cache all your media assets and serve them offline with:” JavaScript libraries for Offline Caching https://workboxjs.org/
50. Background Sync “Background sync lets you defer actions until the user has stable connectivity. This is useful for ensuring that whatever the user wants to send, is actually sent.” In summary, messages are sent and retrieved in the background. When a user navigates away, goes offline or closes the tab, background sync allows actions that have been initiated to still get completed when the user comes online such as chat messages, photo uploads, updates to documents, e.t.c
51. Background Sync “Background sync lets you defer actions until the user has stable connectivity. This is useful for ensuring that whatever the user wants to send, is actually sent.”
52. Background Fetch ”Provides a service worker based upload/download mechanism which is persistent across service worker and browser restarts. It provides an interface to query, pause, and cancel background downloads/uploads” Sample Implementation ❖ http://bit.ly/2zf2EvQ Very experimental & still in development http://bit.ly/2zNMeGY
53. Modern Media Experience Demo URL: https://biograf-155113.appspot.com
54. “Thank you.”