Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making Rich Media Smarter

Making Rich Media Smarter

1097492785caf9ffeebffeb624202d8f?s=128

Otemuyiwa Prosper

October 31, 2017
Tweet

Transcript

  1. Making Rich Media Smart & Faster PROSPER OTEMUYIWA | AngularNYC

    - October 31, 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
  5. None
  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. Rich 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 Rich Media Experience?

  12. Anatomy of a Rich Media Experience ❖ Fast Playback ❖

    Great UX ❖ Delivery Of High Quality Media Assets ❖ Accessibility anywhere
  13. Case Studies - Rich Media Experience URL: https://www.iheart.com iHeartRadio Audio

  14. Case Studies - Rich Media Experience ❖ Progressive Web App

    ❖ Media Session API Usage URL: https://www.iheart.com
  15. Case Studies - Rich Media Experience JioCinema URL: https://www.jiocinema.com Video

  16. Case Studies - Rich Media Experience URL: https://www.jiocinema.com ❖ Progressive

    Web App ❖ Fast Playback ❖ Play Videos Offline ❖ Media Session API Usage
  17. Case Studies - Rich Media Experience iFixit URL: https://ifixit-pwa.appspot.com Images

  18. Case Studies - Rich Media Experience URL: https://ifixit-pwa.appspot.com ❖ Progressive

    Web App ❖ Offline-first
  19. “Making Rich Media Smart & Fast…...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 ” Generating Animated GIFs”

  46. Face Detection & Overlay ” Face Detection & Overlay” https://cloudydesk.com/face/

  47. Image & Video Transformations https://github.com/cloudinary/cloudinary_angular ”Your Reference Guide & Transformation

    Overlord is in this Project”
  48. “Delivering High Quality Media assets to Users? How?”

  49. 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
  50. “Accessibility everywhere - Offline? Yeah”

  51. Offline “You can cache all your media assets and serve

    them offline with:” JavaScript libraries for Offline Caching https://workboxjs.org/
  52. 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
  53. 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.”
  54. 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
  55. Rich Media Experience Demo URL: https://biograf-155113.appspot.com

  56. “Thank you.”