Portogdg video
- 1. Stream, You Stream – How to Make Video
Stream
Or: Video Killed My Data Plan
Doug Sillars
Porto GDG
July 23, 2019
@DougSillars
- 4. Video Consumption is Growing
HTTPArchive: Sites with Video 15/6 crawls: 2017, & 2018 (out of 500k sites)
- 10. Video Quality Metrics
1.Does the Video Start?
2.Does the Video Stall?
3.Does it Look Good?
Video Delivery Optimisation will
solve many of these issues!
- 11. 11
Video
Buffer Rage: a state of uncontrollable
fury or violent anger induced by delayed
or interrupted streaming video content
http://www.ineoquest.com/press-releases/new-research-reveals-buffer-rage-as-techs-newest-epidemic
- 16. Video Startup Delay
After 2 seconds,
every additional
second corresponds
to 5.8% increase in
abandonment
https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf
- 18. Sites with Video: Mobile V. Desktop
HTTPArchive: Sites with Video 7/15/2018
30,442
83% of mobile
19% of videos are IDENTICAL on desktop and
mobile
- 19. Video Quality Metrics
1.Does the Video Start?
2.Does the Video Stall?
3.Does it Look Good?
19% of videos are IDENTICAL on
desktop and mobile
- 24. Video: Different Size Screens
• (at least) 19% of all videos are identical on mobile and desktop
17 MB
960 x 540
83s
1.78 MBPS
- 25. Video: Different Size Screens
• (at least) 19% of all videos are identical on mobile and desktop
17 MB
960 x 540
83s
1.78 MBPS
- 26. Video: Different Size Screens
• (at least) 19% of all videos are identical on mobile and desktop
17 MB
960 x 540
83s
1.78 MBPS
Downscale to 1.37 MBPS:
http://res.cloudinary.com/dougsill
ars/video/upload/vc_auto/v15334
48727/asset_1800K_ncjqnf.mp4
Quality = 70
Audio 22k
13.3 MB (22% savings)
640x360: 6.4 MB (62% savings)
- 28. Video: Don’t Download More on Mobile
Desktop Mobile
@media only screen and (min-width:1024px)
Don’t Download Video That Is Not Displayed
- 35. Video Preload
• preload = “metadata”
150s
1920x1080
Full Length: 97MB
Use with discretion. Mind your
customer’s data plans.
- 36. Video: Preload
• preload = “auto||metadata”
Best Practices:
• Auto: Avoid unless high probability of play
• Metadata: medium probability of play – YMMV
- 38. Video Background
Video (as Downloaded): 5.3 MB
Video 5 MB
Audio 250 KB 5% of file
Best Practice:
To save bandwidth, remove the audio stream from videos that
are played silently.
- 45. Video Resizing
• 1920x1080: 8.1 MB
• 1280x720: 4.3 MB
• 1080x608: 3.3 MB
• 720x405: 1.76 MB
http://res.cloudinary.com/dougsillars/video/upload/vc_auto,w_720/v1533591785/depend_p2ryou.mp4
- 51. Video Is Not Cheap
After 20 free videos
Each Video Download costs:
- 54. Best Practices (So Far…)
1. DPR: Use Judiciously on mobile.
2. If Video will be hidden…Don’t Download it. (Resize
it!)
3. Avoid preload = Auto.
1. Be careful with preload=metadata.
4. For Silent Movies: Strip out audio track.
5. Don’t duplicate Video Traffic.
6. Big Files Can Cost Big $$
7. Respect your Mobile Users’ data plans.
- 61. Video Streaming: Manifest File
https://hls.ted.com/talks/2208.m3u8
Video Tracks
Video Tracks (iFrames)
Audio Tracks &
Subtitles
- 64. Optimizing Video Delivery
Video Streaming
Manifest File:
List of Available
Streams
Player selects high
bitrate stream Stream Manifest:
List of Video Segments
Buffer takes a long
time to fill
Video Does Not Play
Player chooses low
bitrate
Buffer Fills Quickly
Video Plays
- 73. Video Startup
4k Low->High:
4K Middle
(Goldilocks):
4k:High->Low:
PROs: CONS:
Fast Startup Initial Quality: Low
Other Connections:
Initial Quality: Low
Very slow startup
Fast Connections:
Initial Quality: High
Initial Quality: Good
Initial Startup: Not
fast, but not slow
- 74. Video Streaming: Manifest File
https://hls.ted.com/talks/2208.m3u8
Teal: Video
Gray: Audio
With a separate audio track –
you can specify en, de, es
- 88. Best Practices
1. Resize Videos Appropriately for screen:
1. Quality
2. Bitrate
3. Dimensions/DPR
Respect your Mobile Users’ data plans!
- 89. Best Practices
1.
2. If Video will be hidden…Don’t Download it.
3. Avoid preload = Auto.
1. Be careful with preload=metadata.
4. For Silent Movies: Strip out audio track.
5. Don’t duplicate Video Traffic.
Respect your Mobile Users’ data plans!
- 90. 3. Avoid preload = Auto.
1. Be careful with preload=metadata.
4. For Silent Movies: Strip out audio track.
5. Don’t duplicate Video Traffic.
6. Streaming: Start at lower bitrate for faster startup
7. Streaming: Start at middle bitrate for better
startup quality.
8. Video Streaming Players not Responsive by default
9. Use correct bitrates in manifest to optimize
delivery
10. One video at a time for best quality
11. Audit any third party hosting for performance.
Best Practices
Respect your Mobile Users’ data plans!
- 91. Thank You
Respect your Mobile Users’ data plans!
https://www.smashingmagazine.com/2018/10/video-playback-on-the-web-part-1/
https://www.smashingmagazine.com/2018/10/video-playback-on-the-web-part-2/
https://dougsillars.com/2018/08/21/excess-video-download-on-embedded-facebook-pages/
Editor's Notes
- www.kidzania.com
- www.kidzania.com
- www.kidzania.com
- www.kidzania.com
- www.depend.com
- www.depend.com
- www.depend.com
- www.depend.com
- www.depend.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com