Vkmdp cologne

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

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!

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

<video autoplay
src=video.mp4>
</video>
This won’t work on mobile!

<video autoplay
src=video.mp4>
</video>
This won’t work on mobile!
This is very hard to test.

<video autoplay muted
src=video.mp4>
</video>
This will autoplay on mobile!

<video autoplay muted loop
src=video.mp4>
</video>
It’s a GIF!! (or is it?)

Preload

Preload = none

Preload = none
Preload = metadata

Preload = none
Preload = metadata
Preload = auto

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>

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>

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

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

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

Performance
1 Does the Video Start?

Performance
2 Does the Video Stall?

Performance
3 Does it Look Good?

Performance
3 Does it Look Good? Optimizing video
delivery can help solve
many of these issues

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

Performance: Measure Start Time

https://dougsillars.github.io/StreamOrNot/

We can try to
simulate other
downloads & CPU
usage...

Performance

Performance: Measure Stalling

40% of videos on mobile
experienced at least 1
stall.

Even short ‘hiccup’
stalls cause
abandonment
20% > 2s stalled
10% > 10s stalled

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/

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

Video Sizing
4_vahyoz.mp4
https://res.cloudinary.com/dougsillars/video/upload/vc_auto/v1554841934/Bidwells_Shor
ty_PartA4_vahyoz.mp4
(MBPS)
MP4 1920 72.9 20
mp4
(vc_auto)
1920 7.7 2.1
webm 1920 7 2.0

Video Sizing
4_vahyoz.mp4
https://res.cloudinary.com/dougsillars/video/upload/vc_auto,w_1280/v1554841934/Bidw
ells_Shorty_PartA4_vahyoz.mp4
(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

Video Sizing
4_vahyoz.mp4
(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/

Video Sizing
4_vahyoz.mp4
(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/

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
eos/Bidwells_Shorty_PartB4.webm" type="video/webm" />
</video>

Size Bitrate
mp4 73 MB 20 MBPS
webm 34.7 MB 9.7 MBPS
<source
<source
</video>

Size Bitrate
mp4 73 MB 20 MBPS
<source
<source
</video>

<source
<source
</video>
Size Bitrate
mp4 73 MB 20 MBPS

<source
<source
</video>
Size Bitrate
mp4 73 MB 20 MBPS
AWS S3 costs $0.09/GB data transfer

<source
<source
</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

<source
<source
</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!

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%)

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

SSIM, PSNR are available in FFMPEG
VMAF can be added to FFMPEG

ffmpeg -i <smallervideo> -i <biggervideo> -lavfi
libvmaf="ssim=true:psnr=true:phone_model=true" -f null –

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

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

Width Size
(MB)
VMAF SSIM PSNR
MP4
(q_99)
1280 18 100

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

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

Vkmdp cologne

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Vkmdp cologne

Similar to Vkmdp cologne (20)

More from Doug Sillars

More from Doug Sillars (20)

Recently uploaded

Recently uploaded (20)

Vkmdp cologne