The document discusses optimizing video delivery for performance and reducing data usage. It provides examples of HTML code to embed video on a webpage and control playback behavior. It also summarizes techniques for resizing and encoding videos to different formats and bitrates to reduce file sizes while maintaining quality, such as using services like Cloudinary. Optimizing factors like video size, bitrate, and delivery method can help videos start faster and reduce stalling to improve the user experience.

1. Video Killed My Data Plan
Delivering video that doesn't break the bank
Doug Sillars
@dougsillars
Feb 3, 2020
Koln webperf

2. Today’s Itinerary
•0930 HTML Video: The Basics
•1100 Coffee
•1130 Accessibility & Performance
•1300 Lunch
•1400 Formats, Encoding, Quality and Playback
•1530 Coffee
•1400 Video of Demand: Streaming
•1730 Done!

3. Why Video

5. HTML Video: The Basics
<video src=video.mp4>
</video>
https://codepen.io/dougsillars/project/full/XpROwa

6. HTML Video: The Basics
<video autoplay
src=video.mp4>
</video>
https://codepen.io/dougsillars/project/full/XpROwa

7. HTML Video: The Basics
<video autoplay
src=video.mp4>
</video>
https://codepen.io/dougsillars/project/full/XpROwa
This won’t work on mobile!

8. HTML Video: The Basics
<video autoplay
src=video.mp4>
</video>
https://codepen.io/dougsillars/project/full/XpROwa
This won’t work on mobile!
This is very hard to test.

9. HTML Video: The Basics
<video autoplay muted
src=video.mp4>
</video>
https://codepen.io/dougsillars/project/full/XpROwa

10. HTML Video: The Basics
<video autoplay muted
src=video.mp4>
</video>
https://codepen.io/dougsillars/project/full/XpROwa
This will autoplay on mobile!

11. HTML Video: The Basics
<video autoplay controls
src=video.mp4>
</video>
https://codepen.io/dougsillars/project/full/XpROwa

12. HTML Video: The Basics
<video autoplay width=720p
src=video.mp4>
</video>
https://codepen.io/dougsillars/project/full/XpROwa

13. HTML Video: The Basics
<video autoplay width=720p
height = 100p src=video.mp4>
</video>
https://codepen.io/dougsillars/project/full/XpROwa

14. HTML Video: The Basics
<video controls
poster=image.jpg
src=video.mp4>
</video>

15. HTML Video: The Basics
<video autoplay muted loop
src=video.mp4>
</video>
https://codepen.io/dougsillars/project/full/XpROwa

16. HTML Video: The Basics
<video autoplay muted loop
src=video.mp4>
</video>
https://codepen.io/dougsillars/project/full/XpROwa
It’s a GIF!! (or is it?)

17. HTML Video: The Basics

18. HTML Video: The Basics

19. HTML Video: The Basics

20. HTML Video: The Basics
<video autoplay muted loop
src=video.mp4>
</video>
https://codepen.io/dougsillars/project/full/XpROwa
It’s a GIF!! (or is it?)

21. HTML Video: The Basics
Preload
https://codepen.io/dougsillars/project/full/XpROwa

22. HTML Video: The Basics
Preload = none
https://codepen.io/dougsillars/project/full/XpROwa

23. HTML Video: The Basics
Preload = none
https://codepen.io/dougsillars/project/full/XpROwa

24. HTML Video: The Basics
Preload = none
Preload = metadata
https://codepen.io/dougsillars/project/full/XpROwa

25. HTML Video: The Basics
Preload = none
Preload = metadata
https://codepen.io/dougsillars/project/full/XpROwa

26. HTML Video: The Basics
Preload = none
Preload = metadata
Preload = auto
https://codepen.io/dougsillars/project/full/XpROwa

27. HTML Video: The Basics
Preload = none
Preload = metadata
Preload = auto
https://codepen.io/dougsillars/project/full/XpROwa

28. Video Delivery First Example

29. Video Delivery First Example
<div class="video-container" aria-hidden="true">
<video class="desktop-video" muted autoplay loop playsinline>
<source src="TrumpTowerTheExperiencev2.mp4">
Your browser does not support this video.
</video>
<video class="mobile-video" muted autoplay loop playsinline>
<source src="TrumpTowerTheExperiencev2Mobile.mp4">
Your browser does not support this video.
</video>
</div>

30. Video Delivery First Example

31. Video Delivery Second Example
<div class="fullscreen-bg">
<video loop muted autoplay playsinline
poster="firstframe.jpg" class="fullscreen-bg__video">
<source src="bg.mp4" type="video/mp4">
</video>
</div>

32. Video Delivery Second Example
<div class="fullscreen-bg">
<video loop muted autoplay playsinline
poster="firstframe.jpg" class="fullscreen-bg__video">
<source src="bg.mp4" type="video/mp4">
</video>
</div>

33. Video Delivery Third Example
https://climbiowa.com/

34. Video Delivery Third Example
https://climbiowa.com/
video {
display:none;
}

35. Video Delivery Fourth Example
<video class="video-player video-js"
controls="controls" preload="auto">
<source
src="live-significantly-90-seconds-88mb.mp4"/>
</video>

36. Video Delivery Fourth Example
<video class="video-player video-js"
controls="controls" preload="auto">
<source
src="live-significantly-90-seconds-88mb.mp4"/>
</video>

37. Performance
1 Does the Video Start?

38. Performance
1 Does the Video Start?
2 Does the Video Stall?

39. Performance
1 Does the Video Start?
2 Does the Video Stall?
3 Does it Look Good?

40. Performance
1 Does the Video Start?
2 Does the Video Stall?
3 Does it Look Good? Optimizing video
delivery can help solve
many of these issues

41. Performance
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

42. Performance
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

43. Performance: Measure Start Time

44. Performance

45. Performance: Measure Start Time
https://dougsillars.github.io/StreamOrNot/

46. Performance: Measure Start Time
https://dougsillars.github.io/StreamOrNot/

47. Performance: Measure Start Time
https://dougsillars.github.io/StreamOrNot/

48. Performance: Measure Start Time
https://dougsillars.github.io/StreamOrNot/

49. Performance: Measure Start Time
https://dougsillars.github.io/StreamOrNot/

50. Performance: Measure Start Time
https://dougsillars.github.io/StreamOrNot/
We can try to
simulate other
downloads & CPU
usage...

51. Performance
1 Does the Video Start?

52. Performance
https://dougsillars.github.io/StreamOrNot/
1 Does the Video Start?
2 Does the Video Stall?

53. Performance: Stalling?

54. Performance: Measure Stalling
https://dougsillars.github.io/StreamOrNot/

55. Performance: Measure Stalling
https://dougsillars.github.io/StreamOrNot/
40% of videos on mobile
experienced at least 1
stall.

56. Performance: Measure Stalling
https://dougsillars.github.io/StreamOrNot/
Even short ‘hiccup’
stalls cause
abandonment
20% > 2s stalled
10% > 10s stalled

57. Performance: Start & Stalls
What is Causing the delay?
1. Network Speed
2. Video Size
3. Video Duration
4. Video Dimensions
5. Video Bitrate
https://dougsillars.com/2019/09/16/state-of-the-web-video-playback-metrics/

58. Video Sizing
ReSizing Videos with Cloudinary
https://res.cloudinary.com/dougsillars/video/upload/v1554841934/Bidwells_Shorty_PartA
4_vahyoz.mp4
Width Size (MB) Bitrate
(MBPS)
MP4 1920 72.9 20

59. Video Sizing
ReSizing Videos with Cloudinary
https://res.cloudinary.com/dougsillars/video/upload/v1554841934/Bidwells_Shorty_PartA
4_vahyoz.mp4
https://res.cloudinary.com/dougsillars/video/upload/vc_auto/v1554841934/Bidwells_Shor
ty_PartA4_vahyoz.mp4
Width Size (MB) Bitrate
(MBPS)
MP4 1920 72.9 20
mp4
(vc_auto)
1920 7.7 2.1
webm 1920 7 2.0

60. Video Sizing
ReSizing Videos with Cloudinary
https://res.cloudinary.com/dougsillars/video/upload/v1554841934/Bidwells_Shorty_PartA
4_vahyoz.mp4
https://res.cloudinary.com/dougsillars/video/upload/vc_auto,w_1280/v1554841934/Bidw
ells_Shorty_PartA4_vahyoz.mp4
Width Size (MB) Bitrate
(MBPS)
MP4 1920 72.9 20
mp4
(vc_auto)
1920
1280
7.7
4.64
2.1
1.3
webm 1920
1280
7
3.9
2.0
1.0

61. Video Sizing
ReSizing Videos with Cloudinary
https://res.cloudinary.com/dougsillars/video/upload/v1554841934/Bidwells_Shorty_PartA
4_vahyoz.mp4
https://res.cloudinary.com/dougsillars/video/upload/vc_auto,w_1280/v1554841934/Bidw
ells_Shorty_PartA4_vahyoz.mp4
Width Size (MB) Bitrate
(MBPS)
Video
Startup (s)
% time
<5s buffer
MP4 1920 72.9 20 121 NA
mp4
(vc_auto)
1920
1280
7.7
4.64
2.1
1.3
14 56%
webm 1920
1280
7
3.9
2.0
1.0
11 56%
Video Timing Metrics:
https://dougsillars.git
hub.io/StreamOrNot/

62. Video Sizing
ReSizing Videos with Cloudinary
https://res.cloudinary.com/dougsillars/video/upload/v1554841934/Bidwells_Shorty_PartA
4_vahyoz.mp4
https://res.cloudinary.com/dougsillars/video/upload/vc_auto,w_1280/v1554841934/Bidw
ells_Shorty_PartA4_vahyoz.mp4
Width Size (MB) Bitrate
(MBPS)
Video
Startup (s)
% time
<5s buffer
MP4 1920 72.9 20 121 NA
mp4
(vc_auto)
1920
1280
7.7
4.64
2.1
1.3
14
3
56%
32%
webm 1920
1280
7
3.9
2.0
1.0
11
3
56%
20%
Video Timing Metrics:
https://dougsillars.git
hub.io/StreamOrNot/

63. Video Sizing: One More Thing

64. Video Sizing: One More Thing
<video class="hero-canvas__video" loop muted preload="auto"
poster="/assets/Uploads/banners/Bidwells_Shorty_PartB2.jpg">
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.mp4" type="video/mp4" />
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.webm" type="video/webm" />
</video>

65. Video Sizing: One More Thing
Size Bitrate
mp4 73 MB 20 MBPS
webm 34.7 MB 9.7 MBPS
<video class="hero-canvas__video" loop muted preload="auto"
poster="/assets/Uploads/banners/Bidwells_Shorty_PartB2.jpg">
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.mp4" type="video/mp4" />
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.webm" type="video/webm" />
</video>

66. Video Sizing: One More Thing
Size Bitrate
mp4 73 MB 20 MBPS
webm 34.7 MB 9.7 MBPS
<video class="hero-canvas__video" loop muted preload="auto"
poster="/assets/Uploads/banners/Bidwells_Shorty_PartB2.jpg">
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.webm" type="video/webm" />
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.mp4" type="video/mp4" />
</video>

67. Video Sizing: One More Thing
Size Bitrate
mp4 73 MB 20 MBPS
webm 34.7 MB 9.7 MBPS
<video class="hero-canvas__video" loop muted preload="auto"
poster="/assets/Uploads/banners/Bidwells_Shorty_PartB2.jpg">
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.webm" type="video/webm" />
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.mp4" type="video/mp4" />
</video>

68. Video Sizing: One More Thing
<video class="hero-canvas__video" loop muted preload="auto"
poster="/assets/Uploads/banners/Bidwells_Shorty_PartB2.jpg">
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.mp4" type="video/mp4" />
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.webm" type="video/webm" />
</video>
Size Bitrate
mp4 73 MB 20 MBPS
webm 34.7 MB 9.7 MBPS

69. Video Sizing: One More Thing
<video class="hero-canvas__video" loop muted preload="auto"
poster="/assets/Uploads/banners/Bidwells_Shorty_PartB2.jpg">
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.mp4" type="video/mp4" />
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.webm" type="video/webm" />
</video>
Size Bitrate
mp4 73 MB 20 MBPS
webm 34.7 MB 9.7 MBPS
AWS S3 costs $0.09/GB data transfer

70. Video Sizing: One More Thing
<video class="hero-canvas__video" loop muted preload="auto"
poster="/assets/Uploads/banners/Bidwells_Shorty_PartB2.jpg">
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.mp4" type="video/mp4" />
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.webm" type="video/webm" />
</video>
Size Bitrate S3 load cost
mp4 73 MB 20 MBPS $0.006
webm 34.7 MB 9.7 MBPS $0.003
Mp4 (1280px) 4.64 MB 1.3 MBPS $0.0004

71. Video Sizing: One More Thing
<video class="hero-canvas__video" loop muted preload="auto"
poster="/assets/Uploads/banners/Bidwells_Shorty_PartB2.jpg">
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.mp4" type="video/mp4" />
<source
src="https://s3-eu-west-1.amazonaws.com/bidwells-website/homepage-vid
eos/Bidwells_Shorty_PartB4.webm" type="video/webm" />
</video>
Size Bitrate S3 load cost
mp4 73 MB 20 MBPS $0.006
webm 34.7 MB 9.7 MBPS $0.003
Mp4 (1280px) 4.64 MB 1.3 MBPS $0.0004
Lower your AWS bill
by 15x with this one
simple trick!

72. Silent Videos
https://res.cloudinary.com/streamornot/video/upload/vc_auto/v1571051653/liv
e-significantly-90-seconds-88mb_tmmm6t.mp4
21.6 MB
https://res.cloudinary.com/streamornot/video/upload/vc_auto,ac_none/v15710
51653/live-significantly-90-seconds-88mb_tmmm6t.mp4
20.9 MB
Removing Audio track saves 0.7 MB (4%)

73. Video Visual Clarity

74. Video Visual Clarity

75. Measuring Video Clarity
Compare original reference video to smaller version:

76. Measuring Video Clarity
Compare original reference video to smaller version:
Structural SIMularity (SSIM)
Peak Signal to Noise (PSNR)
Video MultiMethod Assessment Fusion (VMAF)
MOS SSIM PSNR (db) VMAF
5 (excellent) >0.99 50 >95
4 (good) 0.95-0.99 38
3 (fair) 0.88 - 0.95 30 70
2 (poor) 0.5 - 0.88 22
1 (bad) <0.5 15 20

77. Measuring Video Clarity
Compare original reference video to smaller version:
SSIM, PSNR are available in FFMPEG
VMAF can be added to FFMPEG

78. Measuring Video Clarity
Compare original reference video to smaller version:
SSIM, PSNR are available in FFMPEG
VMAF can be added to FFMPEG

79. Measuring Video Clarity
ffmpeg -i <smallervideo> -i <biggervideo> -lavfi
libvmaf="ssim=true:psnr=true:phone_model=true" -f null –

80. Measuring Video Clarity
ffmpeg -i <smallervideo> -i <biggervideo> -lavfi
libvmaf="ssim=true:psnr=true:phone_model=true" -f null –
Frame by Frame
comparisons:
Relatively
expensive!

81. Session 2: Measuring Video Clarity
www.streamclarity.com
https://res.cloudinary.com/d
ougsillars/video/upload/q_a
uto,so_47,eo_53,q_99/v15
69391519/TDE3.mp4
https://res.cloudinary.com/d
ougsillars/video/upload/q_a
uto,so_47,eo_53/v1569391
519/TDE3.mp4

82. Measuring Video Clarity
www.streamclarity.com
Width Size
(MB)
VMAF SSIM PSNR
MP4
(q_99)
1280 18 100

83. Measuring Video Clarity
www.streamclarity.com
Width Size
(MB)
VMAF SSIM PSNR
MP4
(q_99)
1280 18 100
mp4
(q_auto)
1280
960
4.5
3
99
97
0.992
0.988
39
36
Testing at 1280x720,
Video is indistinguishable from
original

84. Conclusion
Tools:
WebPageTest http://webpagetest.org
Stream or Not https://dougsillars.github.io/StreamOrNot/
Stream Clarity: http://streamclarity.com
FFMPEG https://ffmpeg.org
Video Hosting:
Cloudinary http://cloudinary.com