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