Download to read offline
Uploaded byBokowsky + Laymann GmbH
Video Now! a comprehensive guide to video on your website
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.
Video Now! a comprehensive guide to video on your website
- 1. Video Now! © WavebreakMediaMicro- Fotolia.com A comprehensive guide to video on your website CFCamp, Germering, 14. Oktober 2013
- 2.
- 3.
- 4.
- 5. Encoding • • • • • Which browser? What encodings? Whichresolutions? What bitrate? How to transcode? Questions to ask
- 6.
- 7. Encoding + Ogg + Ogg FLV,MP4 Grafic: encoding.com
- 8.
- 9. Formats What does YouTubedo? Quelle: Wikipedia.com
- 10.
- 11.
- 12.
- 13. Encoding + good quality +flexible -- very time consuming - can‘t automate -- does not scale zu Fuß
- 14.
- 15.
- 16.
- 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.
- 19.
- 20.
- 21. Encoding + easy + cheapat small volumes + scales quite good + no need for maintainance - row data leaves home - slow - limited in functionality Cloud based
- 22.
- 23.
- 24. Presentation • • HTML5 or Flash? Whichplayer? Questions to ask
- 25.
- 26. Presentation HTML5 video browsersupport Source: CanIUse.com
- 27. Presentation Grafic: Longtail Video HTML5video browser support
- 28. Presentation Flash Player What doesYouTube do? HTML5 native Source: Wikipedia.com
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. Distribution • • Progressive loading vs streaming? Streaming-Servervs Adaptive bitrate streaming? Questions to ask
- 35.
- 36.
- 37.
- 38.
- 39. Distribution + consumes lessbandwith, 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. But do wereally need that anymore?
- 41.
- 42. Distribution HTTP Live Streaming(HLS) Grafic: encoding.com
- 43. Distribution HTTP Live Streaming(HLS) Grafic: encoding.com
- 44. Distribution + runs viahttp, 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.
- 46. Distribution HTTP Dynamic Streaming(HDS) Grafic: encoding.com
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 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. Conclusion • provide mp4and 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. This slides andmuch more at: www.bokowsky.net/de/knowledge-base/
- 56. Come and seeus Club Mate and fritz-kola for free
- 57. Thank You! Markus Bokowsky markus@bokowsky.de @MarkusBokowsky alsoon 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