This document discusses best practices for optimizing video delivery and performance. It notes that video files are large and growing, and can negatively impact bandwidth. Key recommendations include resizing videos appropriately for different screens, only downloading video that will be displayed, using streaming over file downloads, starting streams at lower bitrates for faster startup, and auditing third parties. The overall message is to respect mobile users' data plans when delivering video.
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
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.
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.
59. Video Streaming
Manifest File:
List of Available
Streams
Player Chooses a Stream Stream Manifest:
List of Video Segments
Player Downloads
Segments into buffer
Video Plays
60. Video Plays
Optimizing Video Delivery
Video Streaming
Player can estimate
network throughput
Optimal video Bitrate
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/