A comprehensive guide to video on your websiteCFCamp, Germering, 14. Oktober 2013

© WavebreakMediaMicro - Fotolia.com

Video Now!

Make or Buy?

Production

Encoding

Presentation

Distr ibution

Pro

cess

Encoding

• Which browser?• What encodings?• Which resolutions?• What bitrate?• How to transcode?

Encoding

Questions to ask

Encoding

Encoding

Grafic: encoding.com

+ Ogg

+ Ogg

FLV, MP4

Resolutions

Grafic: Wikipedia.com

Formats

What does YouTube do?Quelle: Wikipedia.com

Encoding

non automated

Encoding

non automated

Encoding

non automated

+ good quality+ flexible-- very time consuming- can‘t automate-- does not scale

Encoding

zu Fuß

Encoding

automated, in House

Encoding

automated, in House

Encoding

automated, in House

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

Encoding

automated, in House

Encoding

Cloud based

Encoding

Cloud based

Encoding

Cloud based

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

Encoding

Cloud based

Produktion

Encoding

Presentation

Distr ibution

Pro

cess

Presentation

• HTML5 or Flash?• Which player?

Presentation

Questions to ask

Presentation

Grafic: Longtail Video

Presentation

Source: CanIUse.comHTML5 video browser support

Grafic: Longtail Video

Presentation

HTML5 video browser support

What does YouTube do?

Flash Player HTML5 native

Source: Wikipedia.com

Presentation

Demowww.bokowsky.net/de/knowledge-base/video

Presentation

Video Player

www.praegnanz.de/html5video

Demowww.bokowsky.net/de/knowledge-base/video

Production

Encoding

Presentation

Distr ibution

Pro

cess

Distr ibution

• Progressive loading vs streaming?

• Streaming-Server vs Adaptive bitrate streaming?

Distr ibution

Questions to ask

Distr ibution

Progressive loading

Distr ibution

Streaming server

Distr ibution

Streaming server

Distr ibution

Streaming server

+ 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

Distr ibution

Streaming server

But do we really need that anymore?

HLS

Distr ibution

HTTP Live Streaming (HLS) Grafic: encoding.com

Distr ibution

HTTP Live Streaming (HLS) Grafic: encoding.com

+ 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

Distr ibution

HLS (HTTP Live Streaming)

Demowww.bokowsky.net/de/knowledge-base/video

Distr ibution

HTTP Dynamic Streaming (HDS) Grafic: encoding.com

Distr ibution

Cloud Streaming Services

Distr ibution

Cloud Streaming Services

Distr ibution

Cloud Streaming Services

Distr ibution

Cloud Streaming Services

Distr ibution

Cloud Streaming Services

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

ColdFuson & HTML5 video

• 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>

Conclusion

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 Bokowskymarkus@bokowsky.de@MarkusBokowskyalso on Facebook, Google+, Foursquare, LinkedIn, Lanyrd, Pinterest, etc .

Bokowsky + Laymann GmbHwww.bokowsky.com@BokowskyLaymannalso 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