How-toVideo heute: im Web, mobile und überhaupt
MobileTech Conference, Berlin, 04. September 2013
How-toVideo heute
© Wave...
Make or Buy?
Produktion
Encoding
Darstellung
Distribution
Prozess
Encoding
• Welche Browser?
• Welche Formate?
• Welche Auflösungen?
• Welche Bandbreiten?
• WieTranscodieren?
Encoding
Fragen
Encoding
Encoding
Grafik: encoding.com
+ Ogg
+ Ogg
FLV, MP4
Auflösungen
Grafik: Wikipedia.de
Formate
Was machtYouTube?
Quelle:Wikipedia.com
Encoding
zu Fuß
Encoding
zu Fuß
Encoding
zu Fuß
+ gute Qualität
+ flexibel
-- extrem aufwändig
- nicht automatisierbar
-- Skaliert garnicht
Encoding
zu Fuß
Encoding
automatisiert, in House
Encoding
automatisiert, in House
Encoding
automatisiert, in House
+ gute Qualität
+ schnell
+ automatisierbar
+ Rohdaten verlassen das Haus
(den Kontinent) nicht
- erfordert Wartung
- bei ...
Encoding
in der Cloud
Encoding
in der Cloud
Encoding
in der Cloud
+ bequem
+ bei kleinen Menge billig
+ skaliert gut
+ wartungsfrei
- Rohdaten verlassen das Haus
- langsam
- eingeschränkte...
iOS, in App OfflineVideo
• iPhone 3G and 3GS	

640 x 480
• iPhone 4 and iPad 1	

1280 x 720
• iPhone 4S and iPad 2 & 3	

 1...
Android, in App OfflineVideo
Encoding
Quelle: developer.android.com
Produktion
Encoding
Darstellung
Distribution
Prozess
Darstellung
• HTML5 oder Flash?
• Welcher Player?
Darstellung
Fragen
Darstellung
Grafik: Longtail Video
Darstellung
Quelle: CanIUse.com
HTML5Video Browser Support
Grafik: Longtail Video
Darstellung
HTML5Video Browser Support
Grafik: encoding.com
+ Ogg
+ Ogg
Darstellung
Browser und Formate
Was machtYouTube?
Flash Player HTML5 native
Quelle:Wikipedia.com
Darstellung
Demo
www.bokowsky.net/de/knowledge-base/video
Darstellung
ÜbersichtVideo Player
www.praegnanz.de/html5video
Demo
www.bokowsky.net/de/knowledge-base/video
Produktion
Encoding
Darstellung
Distribution
Prozess
Distribution
• Progressive Loading
oder Streaming?
• Streaming-Server oder
Adaptive Bitrate
Streaming?
Distribution
Fragen
Distribution
Progressive Loading
Distribution
Streaming Server
Distribution
Streaming Server
Distribution
Streaming Server
+ Bandbreitenschonend, wichtig bei
vielen gleichzeitigen Abrufen
+ Auch Set-Top-Boxen und alte Clients
können damit umgehe...
Aber, muss das
wirklich sein?
HLS
Distribution
HTTP Live Streaming (HLS) Grafik: encoding.com
Distribution
HTTP Live Streaming (HLS) Grafik: encoding.com
+ Läuft per http, braucht nur einen
Webserver
+ Geht durch die Firewall
+ Mit CDNs kompatibel
+ Automatische Bandbreitener...
Demo
www.bokowsky.net/de/knowledge-base/video
Distribution
HTTP Dynamic Streaming (HDS) Grafik: encoding.com
Distribution
Cloud Streaming Services
Distribution
Cloud Streaming Services
Distribution
Cloud Streaming Services
Distribution
Cloud Streaming Services
Distribution
Cloud Streaming Services
Diese Folien und noch
viel mehr gibt‘s unter
www.bokowsky.net/de/knowledge-base/
Neu: Jetzt auch als App
Vielen Dank
Markus Bokowsky
markus@bokowsky.de
@MarkusBokowsky
sowie auf Facebook, Google+, Foursquare,
LinkedIn, Lanyrd, ...
Nächste SlideShare
Wird geladen in …5
×

How-to Video heute: im Web, mobile und überhaupt

1.037 Aufrufe

Veröffentlicht am

Videos sind heute ein selbstverständlicher Bestandteil jeder Homepage. War die Einbindung früher "dank" Flash und FLV-Player unspektakulär, sind mit HTML5 und den mobilen Devices neue Möglichkeiten, aber auch neue Herausforderungen hinzugekommen. Dieser Vortrag ist ein Streifzug durch die komplette Prozesskette und beleuchtet die dabei entstehenden Fragen: Welche Formate soll ich anbieten? In welchen Auflösungen? In welchen Kodierungen? Was machen mit den mobilen Devices? HLS ja oder nein, und wenn ja, wie? Selber encoden oder besser in der Cloud machen lassen? Wie krieg' ich das in mein CMS zurück, und soll es da überhaupt hin? Und last but not least was tun, wenn man ein CDN nutzen muss/möchte? Oder spart man sich den ganzen Aufwand doch besser, stellt seine Videos einfach auf YouTube und lässt Google die Arbeit machen? Eine 360-Grad-Betrachtung der Aufgabenstellung Video im Web und auf mobilen Devices zwischen Bequemlichkeit und Perfektionismus.

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.037
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
44
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

How-to Video heute: im Web, mobile und überhaupt

  1. 1. How-toVideo heute: im Web, mobile und überhaupt MobileTech Conference, Berlin, 04. September 2013 How-toVideo heute © WavebreakMediaMicro - Fotolia.com
  2. 2. Make or Buy?
  3. 3. Produktion Encoding Darstellung Distribution Prozess
  4. 4. Encoding
  5. 5. • Welche Browser? • Welche Formate? • Welche Auflösungen? • Welche Bandbreiten? • WieTranscodieren? Encoding Fragen
  6. 6. Encoding
  7. 7. Encoding Grafik: encoding.com + Ogg + Ogg FLV, MP4
  8. 8. Auflösungen Grafik: Wikipedia.de
  9. 9. Formate Was machtYouTube? Quelle:Wikipedia.com
  10. 10. Encoding zu Fuß
  11. 11. Encoding zu Fuß
  12. 12. Encoding zu Fuß
  13. 13. + gute Qualität + flexibel -- extrem aufwändig - nicht automatisierbar -- Skaliert garnicht Encoding zu Fuß
  14. 14. Encoding automatisiert, in House
  15. 15. Encoding automatisiert, in House
  16. 16. Encoding automatisiert, in House
  17. 17. + gute Qualität + schnell + automatisierbar + Rohdaten verlassen das Haus (den Kontinent) nicht - erfordert Wartung - bei kleiner Menge relativ teuer - skaliert schlecht Encoding automatisiert, in House
  18. 18. Encoding in der Cloud
  19. 19. Encoding in der Cloud
  20. 20. Encoding in der Cloud
  21. 21. + bequem + bei kleinen Menge billig + skaliert gut + wartungsfrei - Rohdaten verlassen das Haus - langsam - eingeschränkter Funktionsumfang Encoding in der Cloud
  22. 22. iOS, in App OfflineVideo • iPhone 3G and 3GS 640 x 480 • iPhone 4 and iPad 1 1280 x 720 • iPhone 4S and iPad 2 & 3 1920 x 1080 Encoding
  23. 23. Android, in App OfflineVideo Encoding Quelle: developer.android.com
  24. 24. Produktion Encoding Darstellung Distribution Prozess
  25. 25. Darstellung
  26. 26. • HTML5 oder Flash? • Welcher Player? Darstellung Fragen
  27. 27. Darstellung Grafik: Longtail Video
  28. 28. Darstellung Quelle: CanIUse.com HTML5Video Browser Support
  29. 29. Grafik: Longtail Video Darstellung HTML5Video Browser Support
  30. 30. Grafik: encoding.com + Ogg + Ogg Darstellung Browser und Formate
  31. 31. Was machtYouTube? Flash Player HTML5 native Quelle:Wikipedia.com Darstellung
  32. 32. Demo www.bokowsky.net/de/knowledge-base/video
  33. 33. Darstellung ÜbersichtVideo Player www.praegnanz.de/html5video
  34. 34. Demo www.bokowsky.net/de/knowledge-base/video
  35. 35. Produktion Encoding Darstellung Distribution Prozess
  36. 36. Distribution
  37. 37. • Progressive Loading oder Streaming? • Streaming-Server oder Adaptive Bitrate Streaming? Distribution Fragen
  38. 38. Distribution Progressive Loading
  39. 39. Distribution Streaming Server
  40. 40. Distribution Streaming Server
  41. 41. Distribution Streaming Server
  42. 42. + Bandbreitenschonend, wichtig bei vielen gleichzeitigen Abrufen + Auch Set-Top-Boxen und alte Clients können damit umgehen + Springen und Spulen problemlos möglich ++ Automatische Bandbreitenerkennung -- Probleme mit Firewalls - Problematisch mit CDNs Distribution Streaming Server
  43. 43. Aber, muss das wirklich sein?
  44. 44. HLS
  45. 45. Distribution HTTP Live Streaming (HLS) Grafik: encoding.com
  46. 46. Distribution HTTP Live Streaming (HLS) Grafik: encoding.com
  47. 47. + Läuft per http, braucht nur einen Webserver + Geht durch die Firewall + Mit CDNs kompatibel + Automatische Bandbreitenerkennung - Läuft native nur auf iOS und MacOS + Mit JWPlayer auf allen Browsern - unter Android ein Alptraum Distribution HLS (HTTP Live Streaming)
  48. 48. Demo www.bokowsky.net/de/knowledge-base/video
  49. 49. Distribution HTTP Dynamic Streaming (HDS) Grafik: encoding.com
  50. 50. Distribution Cloud Streaming Services
  51. 51. Distribution Cloud Streaming Services
  52. 52. Distribution Cloud Streaming Services
  53. 53. Distribution Cloud Streaming Services
  54. 54. Distribution Cloud Streaming Services
  55. 55. Diese Folien und noch viel mehr gibt‘s unter www.bokowsky.net/de/knowledge-base/
  56. 56. Neu: Jetzt auch als App
  57. 57. Vielen Dank Markus Bokowsky markus@bokowsky.de @MarkusBokowsky sowie auf Facebook, Google+, Foursquare, LinkedIn, Lanyrd, Pinterest, etc. Bokowsky + Laymann GmbH www.bokowsky.de @BokowskyLaymann sowie auf Facebook, Slideshare, YouTube, Flickr P.S: Bokowsky + Laymann sucht Entwickler Objective-C, Java (Android), PHP, ColdFusion jobs@bokowsky.de oder im Social Network IhresVertrauens

×