How-toVideo heute: im Web, mobile und überhaupt
MobileTech Conference, München, 19. September 2013
How-toVideo heute
© fre...
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
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
Was machtYouTube?
Quelle:Wikipedia.com
Darstellung
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
Distribution
Serverseitige Geräteerkennung
• mp4 and webm files anbieten
(flv und ogg ignorieren)
• Versionen in 240p, 360p, 480p, 720p und
1080p anbieten
• Für iOS De...
Diese Folien und noch
viel mehr gibt‘s unter
www.bokowsky.net/de/knowledge-base/
Come and see us
Club Mate and
fritz-kola for free
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.274 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. Eine 360-Grad-Betrachtung der Aufgabenstellung Video im Web und auf mobilen Devices zwischen Bequemlichkeit und Perfektionismus.

Veröffentlicht in: Internet
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.274
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
121
Aktionen
Geteilt
0
Downloads
0
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, München, 19. September 2013 How-toVideo heute © fredmantel - 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. Formate Was machtYouTube? Quelle:Wikipedia.com
  11. 11. Encoding zu Fuß
  12. 12. Encoding zu Fuß
  13. 13. Encoding zu Fuß
  14. 14. + gute Qualität + flexibel -- extrem aufwändig - nicht automatisierbar -- Skaliert garnicht Encoding zu Fuß
  15. 15. Encoding automatisiert, in House
  16. 16. Encoding automatisiert, in House
  17. 17. Encoding automatisiert, in House
  18. 18. + 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
  19. 19. Encoding in der Cloud
  20. 20. Encoding in der Cloud
  21. 21. Encoding in der Cloud
  22. 22. + bequem + bei kleinen Menge billig + skaliert gut + wartungsfrei - Rohdaten verlassen das Haus - langsam - eingeschränkter Funktionsumfang Encoding in der Cloud
  23. 23. 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
  24. 24. Android, in App OfflineVideo Encoding Quelle: developer.android.com
  25. 25. Produktion Encoding Darstellung Distribution Prozess
  26. 26. Darstellung
  27. 27. • HTML5 oder Flash? • Welcher Player? Darstellung Fragen
  28. 28. Darstellung Grafik: Longtail Video
  29. 29. Darstellung Quelle: CanIUse.com HTML5Video Browser Support
  30. 30. Grafik: Longtail Video Darstellung HTML5Video Browser Support
  31. 31. Was machtYouTube? Quelle:Wikipedia.com Darstellung
  32. 32. Was machtYouTube? Flash Player HTML5 native Quelle:Wikipedia.com Darstellung
  33. 33. Demo www.bokowsky.net/de/knowledge-base/video
  34. 34. Darstellung ÜbersichtVideo Player www.praegnanz.de/html5video
  35. 35. Demo www.bokowsky.net/de/knowledge-base/video
  36. 36. Produktion Encoding Darstellung Distribution Prozess
  37. 37. Distribution
  38. 38. • Progressive Loading oder Streaming? • Streaming-Server oder Adaptive Bitrate Streaming? Distribution Fragen
  39. 39. Distribution Progressive Loading
  40. 40. Distribution Streaming Server
  41. 41. Distribution Streaming Server
  42. 42. Distribution Streaming Server
  43. 43. + 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
  44. 44. Aber, muss das wirklich sein?
  45. 45. HLS
  46. 46. Distribution HTTP Live Streaming (HLS) Grafik: encoding.com
  47. 47. Distribution HTTP Live Streaming (HLS) Grafik: encoding.com
  48. 48. + 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)
  49. 49. Demo www.bokowsky.net/de/knowledge-base/video
  50. 50. Distribution HTTP Dynamic Streaming (HDS) Grafik: encoding.com
  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. Distribution Cloud Streaming Services
  56. 56. Distribution Serverseitige Geräteerkennung
  57. 57. • mp4 and webm files anbieten (flv und ogg ignorieren) • Versionen in 240p, 360p, 480p, 720p und 1080p anbieten • Für iOS Devices HLS bereitstellen • HTML5Video dem Flash-Player vorziehen • Für den IE8 ein Flash Fallback bereithalten • Über serverseitige Gerätererkennung nachdenken Zusammenfassung Meine Empfehlung
  58. 58. Diese Folien und noch viel mehr gibt‘s unter www.bokowsky.net/de/knowledge-base/
  59. 59. Come and see us Club Mate and fritz-kola for free
  60. 60. 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

×