Video Now!

© WavebreakMediaMicro - Fotolia.com

A comprehensive guide to video on your website
CFCamp, Germering, 14. Oktober 2013
Make or Buy?
Process

Production
Encoding
Presentation
Distribution
Encoding
Encoding

•
•
•
•
•

Which browser?
What encodings?
Which resolutions?
What bitrate?
How to transcode?
Questions to ask
Encoding
Encoding

+ Ogg

+ Ogg

FLV, MP4

Grafic: encoding.com
Resolutions

Grafic: Wikipedia.com
Formats

What does YouTube do?

Quelle: Wikipedia.com
Encoding

non automated
Encoding

non automated
Encoding

non automated
Encoding

+ good quality
+ flexible
-- very time consuming
- can‘t automate
-- does not scale
zu Fuß
Encoding

automated, in House
Encoding

automated, in House
Encoding

automated, in House
Encoding
+ good quality
+ fast
+ batch processable
+ Row data stay in house (on the
continent)
- requires maintainance
- expensive for small volumes
- scales badly
automated, in House
Encoding

Cloud based
Encoding

Cloud based
Encoding

Cloud based
Encoding
+ easy
+ cheap at small volumes
+ scales quite good
+ no need for maintainance
- row data leaves home
- slow
- limited in functionality

Cloud based
Process

Produktion
Encoding
Presentation
Distribution
Presentation
Presentation

•
•

HTML5 or Flash?
Which player?

Questions to ask
Presentation

Grafic: Longtail Video
Presentation

HTML5 video browser support

Source: CanIUse.com
Presentation

Grafic: Longtail Video

HTML5 video browser support
Presentation
Flash Player

What does YouTube do?

HTML5 native

Source: Wikipedia.com
Demo
www.bokowsky.net/de/knowledge-base/video
Presentation

Video Player
www.praegnanz.de/html5video
Demo
www.bokowsky.net/de/knowledge-base/video
Process

Production
Encoding
Presentation
Distribution
Distribution
Distribution

•
•

Progressive loading
vs streaming?
Streaming-Server vs
Adaptive bitrate
streaming?
Questions to ask
Distribution

Progressive loading
Distribution

Streaming server
Distribution

Streaming server
Distribution

Streaming server
Distribution

+ consumes less bandwith, might be an
option for high traffic sites
+ works with almost any client (Set-top
boxes, old computers etc.)
+ easy skipping
++ out of the box bandwith detection
-- massive problems with firewalls
- problematic in combination with CDNs
Streaming server
But do we really
need that
anymore?
HLS
Distribution

HTTP Live Streaming (HLS)

Grafic: encoding.com
Distribution

HTTP Live Streaming (HLS)

Grafic: encoding.com
Distribution
+ runs via http, needs just a webserver
+ works great with firewalls
+ can handle CDNs
+ build in bandwith detection
- runs natively only on iOS and MacOS
+ with some help from JWPlayer it runs on
almost every browsern
- a nightmare on Android
HLS (HTTP Live Streaming)
Demo
www.bokowsky.net/de/knowledge-base/video
Distribution

HTTP Dynamic Streaming (HDS)

Grafic: encoding.com
Distribution

Cloud Streaming Services
Distribution

Cloud Streaming Services
Distribution

Cloud Streaming Services
Distribution

Cloud Streaming Services
Distribution

Cloud Streaming Services
ColdFuson &
HTML5 video
ColdFuson &
HTML5 video

• <cfmediaplayer> tag
supports HTML5 video
since CF10
• Player is based on OSMF
• Does not support multiple
resolutions
• Does support HDS, does
not support HLS
Conclusion
• provide mp4 and webm files
(ignore flv and ogg)
• provide them in 240p, 360p, 480p, 720p
and 1080p
• use HLS for iOS Devices
• favour HTML5 video over Flash
• provide Flash Fallback for IE8
• consider using JWPlayer instead of
<cfmediaplayer>
My Recommendations
This slides and much
more at:

www.bokowsky.net/de/knowledge-base/
Come and see us

Club Mate and
fritz-kola for free
Thank You!
Markus Bokowsky

markus@bokowsky.de
@MarkusBokowsky
also on Facebook, Google+, Foursquare,
LinkedIn, Lanyrd, Pinterest, etc.

Bokowsky + Laymann GmbH

www.bokowsky.com
@BokowskyLaymann
also on Facebook, Slideshare, YouTube, Flickr

BTW:We are hiring. Looking for ColdFusion and Java Devs
jobs@bokowsky.de or contact us in a social network of your
choice

Video Now! a comprehensive guide to video on your website