Video Killed My Data Plan: Delivering video that doesn't break the bank

Video is one of the best ways to engage with your audience. But unoptimized video can take forever to startup and can stall, increasing frustration and abandonment. I’ll discuss video delivery best practices to make sure your video content is delivered beautifully and quickly without stalling.

Video is one of the fastest growing mediums on the web and in mobile applications. Video files have been shown to increase engagement, and can be a great way to deliver your message quickly. (And who doesn’t love animated GIFs?)

However, video that takes a long time to start up leads to frustration and abandonment. The same goes for video that stalls during playback. In this talk, you’ll learn best practices to optimize the delivery of your video to your customers, ensuring fast delivery and minimizing stalls for a great customer experience.

Transcript

1. Video Killed My Data Plan Delivering video that doesn't break the bank Doug Sillars @dougsillars FrontConf March 21, 2020
3. Video Killed My Data Plan Delivering video that doesn't break the bank Doug Sillars @dougsillars FrontConf March 21, 2020 The Internet
4. Video Killed My Data Plan Delivering video that doesn't break the bank The Internet
5. Video Killed My Data Plan Delivering video that doesn't break the bank The Internet
6. Video Killed My Data Plan Delivering video that doesn't break the bank The Internet
7. Video Killed My Data Plan Delivering video that doesn't break the bank The Internet
8. 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!
9. Why Video
10. HTML Video: The Basics <video src=video.mp4> </video> https://codepen.io/dougsillars/project/full/XpROwa
11. HTML Video: The Basics <video autoplay src=video.mp4> </video> https://codepen.io/dougsillars/project/full/XpROwa
12. HTML Video: The Basics <video autoplay src=video.mp4> </video> https://codepen.io/dougsillars/project/full/XpROwa This won’t work on mobile!
13. 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.
14. HTML Video: The Basics <video autoplay muted src=video.mp4> </video> https://codepen.io/dougsillars/project/full/XpROwa
15. HTML Video: The Basics <video autoplay muted src=video.mp4> </video> https://codepen.io/dougsillars/project/full/XpROwa This will autoplay on mobile!
16. HTML Video: The Basics <video autoplay controls src=video.mp4> </video> https://codepen.io/dougsillars/project/full/XpROwa
17. HTML Video: The Basics <video autoplay width=720p src=video.mp4> </video> https://codepen.io/dougsillars/project/full/XpROwa
18. HTML Video: The Basics <video autoplay width=720p height = 100p src=video.mp4> </video> https://codepen.io/dougsillars/project/full/XpROwa
19. HTML Video: The Basics <video controls poster=image.jpg src=video.mp4> </video>
20. HTML Video: The Basics <video autoplay muted loop src=video.mp4> </video> https://codepen.io/dougsillars/project/full/XpROwa
21. 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?)
22. HTML Video: The Basics
23. HTML Video: The Basics
24. HTML Video: The Basics
25. 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?)
26. HTML Video: The Basics Preload https://codepen.io/dougsillars/project/full/XpROwa
27. HTML Video: The Basics Preload = none https://codepen.io/dougsillars/project/full/XpROwa
28. HTML Video: The Basics Preload = none https://codepen.io/dougsillars/project/full/XpROwa
29. HTML Video: The Basics Preload = none Preload = metadata https://codepen.io/dougsillars/project/full/XpROwa
30. HTML Video: The Basics Preload = none Preload = metadata https://codepen.io/dougsillars/project/full/XpROwa
31. HTML Video: The Basics Preload = none Preload = metadata Preload = auto https://codepen.io/dougsillars/project/full/XpROwa
32. HTML Video: The Basics Preload = none Preload = metadata Preload = auto https://codepen.io/dougsillars/project/full/XpROwa
33. <video autoplay width=720p> <source src= video.webm> <source src= video.mp4> Your Browser does not support video. </video> Multiple Sources https://codepen.io/dougsillars/project/full/XpROwa
34. Media Queries for Videos? https://codepen.io/dougsillars/project/full/XpROwa <video> <source media="(min-width: 1080px)" src="bigmovie.mp4"> <source media="(min-width: 720px)" src="smallMovie.mp4"> </video>
35. Media Queries for Videos? https://codepen.io/dougsillars/project/full/XpROwa <video> <source media="(min-width: 1080px)" src="bigmovie.mp4"> <source media="(min-width: 720px)" src="smallMovie.mp4"> </video>
36. Video Delivery First Example
37. 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>
38. Video Delivery First Example
39. 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>
40. 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>
41. Video Delivery Third Example https://climbiowa.com/
42. Video Delivery Third Example https://climbiowa.com/ video { display:none; }
43. Video Delivery Fourth Example <video class="video-player video-js" controls="controls" preload="auto"> <source src="live-significantly-90-seconds-88mb.mp4"/> </video>
44. Video Delivery Fourth Example <video class="video-player video-js" controls="controls" preload="auto"> <source src="live-significantly-90-seconds-88mb.mp4"/> </video>
45. Performance 1 Does the Video Start?
46. Performance 1 Does the Video Start? 2 Does the Video Stall?
47. Performance 1 Does the Video Start? 2 Does the Video Stall? 3 Does it Look Good?
48. 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
49. 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
50. 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
51. Performance: Measure Start Time
52. Performance
53. Performance: Measure Start Time https://dougsillars.github.io/StreamOrNot/
54. Performance: Measure Start Time https://dougsillars.github.io/StreamOrNot/
55. Performance: Measure Start Time https://dougsillars.github.io/StreamOrNot/
56. Performance: Measure Start Time https://dougsillars.github.io/StreamOrNot/
57. Performance: Measure Start Time https://dougsillars.github.io/StreamOrNot/
58. Performance: Measure Start Time https://dougsillars.github.io/StreamOrNot/ We can try to simulate other downloads & CPU usage...
59. Performance 1 Does the Video Start?
60. Does the Video Start?
61. Does the Video Start?
62. Does the Video Start?
63. Does the Video Start?
64. Does the Video Start?
65. Does the Video Start? 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
66. Video Bitrate v. Startup Time https://dougsillars.com/2019/09/16/state-of-the-web-video-playback-metrics/
67. Video Bitrate v. Startup Time https://dougsillars.com/2019/09/16/state-of-the-web-video-playback-metrics/ 1920x1080 video 5 MBPS
68. Video Bitrate v. Startup Time https://dougsillars.com/2019/09/16/state-of-the-web-video-playback-metrics/ 1920x1080 video 5 MBPS Hotel Wi-Fi 3 MBPS
69. Video Bitrate v. Startup Time https://dougsillars.com/2019/09/16/state-of-the-web-video-playback-metrics/ 1920x1080 video 5 MBPS Fast Hotel Wi-Fi 10 MBPS
70. Video Bitrate v. Startup Time https://dougsillars.com/2019/09/16/state-of-the-web-video-playback-metrics/ 1920x1080 video 5 MBPS Fast Hotel Wi-Fi 10 MBPS 1080
71. Video Bitrate v. Startup Time https://dougsillars.com/2019/09/16/state-of-the-web-video-playback-metrics/ 1920x1080 video 5 MBPS Fast Hotel Wi-Fi 10 MBPS 1080 Only 30% of pixels are displayed
72. Performance https://dougsillars.github.io/StreamOrNot/ 1 Does the Video Start? 2 Does the Video Stall?
73. Performance: Stalling?
74. Performance: Measure Stalling https://dougsillars.github.io/StreamOrNot/
75. Performance: Measure Stalling https://dougsillars.github.io/StreamOrNot/ 40% of videos on mobile experienced at least 1 stall.
76. Performance: Measure Stalling https://dougsillars.github.io/StreamOrNot/ Even short ‘hiccup’ stalls cause abandonment 20% > 2s stalled 10% > 10s stalled
77. 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/
78. 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
79. 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
80. 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
81. 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/
82. 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/
83. Video Sizing: One More Thing
84. 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>
85. 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>
86. 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>
87. 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>
88. 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
89. 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
90. 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
91. 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!
92. 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%)
93. Video Visual Clarity
94. Video Visual Clarity
95. Measuring Video Clarity Compare original reference video to smaller version:
96. 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
97. Measuring Video Clarity Compare original reference video to smaller version: SSIM, PSNR are available in FFMPEG VMAF can be added to FFMPEG
98. Measuring Video Clarity Compare original reference video to smaller version: SSIM, PSNR are available in FFMPEG VMAF can be added to FFMPEG
99. Measuring Video Clarity ffmpeg -i <smallervideo> -i <biggervideo> -lavfi libvmaf="ssim=true:psnr=true:phone_model=true" -f null –
100. 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!
101. 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
102. Measuring Video Clarity www.streamclarity.com Width Size (MB) VMAF SSIM PSNR MP4 (q_99) 1280 18 100
103. 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
104. 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