View
742
Download
0
Category
Tags:
Preview:
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.
Citation preview
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
Recommended