Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Video Now!

© WavebreakMediaMicro - Fotolia.com

A comprehensive guide to video on your website
CFCamp, Germering, 14. Okt...
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
- e...
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
- li...
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
b...
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 det...
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 suppor...
Conclusion
• provide mp4 and webm files
(ignore flv and ogg)
• provide them in 240p, 360p, 480p, 720p
and 1080p
• use HLS fo...
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, Pi...
Upcoming SlideShare
Loading in …5
×

Video Now! a comprehensive guide to video on your website

1,177 views

Published on

Today videos are on almost every website. With Flash and the FLV-Player embeding them had been a nobrainer. But things have changed, there is HTML5 now all over the place and mobile devices give us new challenges. This talk will show you what to consider when it comes to bringing videos to the web which should work with any browser on any device on any bandwith.

  • Be the first to comment

Video Now! a comprehensive guide to video on your website

  1. 1. Video Now! © WavebreakMediaMicro - Fotolia.com A comprehensive guide to video on your website CFCamp, Germering, 14. Oktober 2013
  2. 2. Make or Buy?
  3. 3. Process Production Encoding Presentation Distribution
  4. 4. Encoding
  5. 5. Encoding • • • • • Which browser? What encodings? Which resolutions? What bitrate? How to transcode? Questions to ask
  6. 6. Encoding
  7. 7. Encoding + Ogg + Ogg FLV, MP4 Grafic: encoding.com
  8. 8. Resolutions Grafic: Wikipedia.com
  9. 9. Formats What does YouTube do? Quelle: Wikipedia.com
  10. 10. Encoding non automated
  11. 11. Encoding non automated
  12. 12. Encoding non automated
  13. 13. Encoding + good quality + flexible -- very time consuming - can‘t automate -- does not scale zu Fuß
  14. 14. Encoding automated, in House
  15. 15. Encoding automated, in House
  16. 16. Encoding automated, in House
  17. 17. 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
  18. 18. Encoding Cloud based
  19. 19. Encoding Cloud based
  20. 20. Encoding Cloud based
  21. 21. Encoding + easy + cheap at small volumes + scales quite good + no need for maintainance - row data leaves home - slow - limited in functionality Cloud based
  22. 22. Process Produktion Encoding Presentation Distribution
  23. 23. Presentation
  24. 24. Presentation • • HTML5 or Flash? Which player? Questions to ask
  25. 25. Presentation Grafic: Longtail Video
  26. 26. Presentation HTML5 video browser support Source: CanIUse.com
  27. 27. Presentation Grafic: Longtail Video HTML5 video browser support
  28. 28. Presentation Flash Player What does YouTube do? HTML5 native Source: Wikipedia.com
  29. 29. Demo www.bokowsky.net/de/knowledge-base/video
  30. 30. Presentation Video Player www.praegnanz.de/html5video
  31. 31. Demo www.bokowsky.net/de/knowledge-base/video
  32. 32. Process Production Encoding Presentation Distribution
  33. 33. Distribution
  34. 34. Distribution • • Progressive loading vs streaming? Streaming-Server vs Adaptive bitrate streaming? Questions to ask
  35. 35. Distribution Progressive loading
  36. 36. Distribution Streaming server
  37. 37. Distribution Streaming server
  38. 38. Distribution Streaming server
  39. 39. 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
  40. 40. But do we really need that anymore?
  41. 41. HLS
  42. 42. Distribution HTTP Live Streaming (HLS) Grafic: encoding.com
  43. 43. Distribution HTTP Live Streaming (HLS) Grafic: encoding.com
  44. 44. 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)
  45. 45. Demo www.bokowsky.net/de/knowledge-base/video
  46. 46. Distribution HTTP Dynamic Streaming (HDS) Grafic: encoding.com
  47. 47. Distribution Cloud Streaming Services
  48. 48. Distribution Cloud Streaming Services
  49. 49. Distribution Cloud Streaming Services
  50. 50. Distribution Cloud Streaming Services
  51. 51. Distribution Cloud Streaming Services
  52. 52. ColdFuson & HTML5 video
  53. 53. 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
  54. 54. 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
  55. 55. This slides and much more at: www.bokowsky.net/de/knowledge-base/
  56. 56. Come and see us Club Mate and fritz-kola for free
  57. 57. 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

×