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

Building a Modern Media Experience

Building a Modern Media Experience

Otemuyiwa Prosper

October 29, 2017

More Decks by Otemuyiwa Prosper

Other Decks in Programming


  1. Modern Media Images Audio Video 62% of Internet Traffic is

    made up of images, with audio & video constituting a growing percentage of the bytes.
  2. Anatomy of a Modern Media Experience ❖ Fast Playback ❖

    Great UX ❖ Delivery Of High Quality Media Assets ❖ Accessibility anywhere
  3. Case Studies - Modern Media Experience ❖ Progressive Web App

    ❖ Media Session API Usage URL: https://www.iheart.com
  4. Case Studies - Modern Media Experience URL: https://www.jiocinema.com ❖ Progressive

    Web App ❖ Fast Playback ❖ Play Videos Offline ❖ Media Session API Usage
  5. 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
  6. 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.
  7. 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.
  8. 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.
  9. Fast Playback With Video Preload ❖ Preload Full Video on

    your website Recommended for smaller files <= 5MB
  10. Screen Orientation API “As users rotate their device, be smart

    and automatically request for full screen on the video to create an immersive experience. ”
  11. 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
  12. 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” With Media Session Without Media Session
  13. 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”.
  14. 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
  15. Offline “You can cache all your media assets and serve

    them offline with:” JavaScript libraries for Offline Caching https://workboxjs.org/
  16. 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
  17. 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.”
  18. 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