Einleitung
Das <video> Tag in HTML5 ist eine großartige Sache. Es ermöglicht die native Videowiedergabe in allen aktuellen Browsern, anstatt sich auf ein Plugin wie Flash zu verlassen. Es öffnet die Tür zu Webvideos auf Geräten, die Flash nicht unterstützen, und aktiviert Codecs, die zuvor nicht über das Internet abgespielt werden konnten.
Wenn Sie jedoch Videoinhalte veröffentlichen, kann die Browserunterstützung verwirrend sein. Wie viele Ausgabeversionen müssen Sie erstellen, um Webvideos wirklich zu unterstützen? WebM, Ogg und MP4? Was ist mit iPhone oder Android? Was ist mit Versionen mit niedriger / mittlerer / hoher Bitrate?
Es gibt keine einzige Antwort auf diese Frage, daher finden Sie hier eine kurze Anleitung zur Auswahl von Ausgängen für HTML5-Video.
Was Netz Formate?
Es gibt drei Videoformate, die in einigen Browsern nativ funktionieren. Leider funktioniert kein Format in allen Browsern, sodass Sie mindestens zwei ausführen müssen, wenn Sie eine aussagekräftige Unterstützung für HTML5-Videos wünschen.
Minimal müssen Sie verwenden MP4 + H.264 mit AAC oder MP3. MP4-Videos werden nativ in Safari, Chrome und IE9 (Vista / Windows 7) abgespielt. Es ist auch die beste Option für einen Flash-Video-Fallback und wird nativ auf vielen Geräten (iOS, Android, Blackberry, PSP, Xbox, PS3 usw.) abgespielt. Verwenden Sie H.264 High Profile für die beste Qualität oder Baseline-Profil, wenn dasselbe Video auf Mobilgeräten abgespielt werden soll.
Verwenden Sie darüber hinaus entweder WebM + VP8 oder Ogg + Theora mit Vorbis Audio für andere Browser.
Empfehlung: Minimal MP4 + entweder WebM oder Ogg oder vielleicht beides.
Welche mobilen Geräte?
Auch hier gibt es kein einzelnes mobiles Profil, das auf jedem mobilen Gerät funktioniert. Tatsächlich gibt es für mobile Videos unterschiedlichere Standards als für das Web. Glücklicherweise können einige ausgewählte Rezepte die meisten modernen Mobilgeräte abdecken.
Ausführliche Informationen finden Sie in unserem Leitfaden unter Codierung von Videos für den mobilen Einsatz.
1. Die meisten modernen Mobilgeräte unterstützen MP4 / H.264. Dies umfasst die gesamte iOS-Serie (iPhone, iPod, iPad, Apple TV usw.), die meisten Android-Geräte, moderne Blackberry-Telefone usw. Verwenden Sie für die meisten davon das H.264-Baseline-Profil. Verwenden Sie 640 x 480 oder kleiner für iOS und Android und 480 x 360 oder kleiner für die Blackberry-Unterstützung.
Beachten Sie, dass dieselbe Datei, die auf einem iPhone abgespielt wird, im Internet über HTML5 (einige Browser) oder Flash abgespielt werden kann. Wenn Sie also Versionen reduzieren möchten, verwenden Sie dieselbe. Bei den meisten Mobilgeräten bleibt das Baseline-Profil jedoch bestehen, und Main / High macht einen großen Unterschied. Daher ist die Verwendung separater Ausgabeversionen eine gute Idee, wenn Sie für jedes Gerät die beste Qualität erzielen möchten.
2. Verwenden Sie 3GP / MPEG4 für ältere mobile Geräte. Die meisten Blackberrys und einige Androids unterstützen auch 3GP, und 3GP spielt im Allgemeinen sogar auf iPhone/iPod (da iOS MP4/MPEG-4 spielt und 3GP nur eine Teilmenge von MP4 ist).
Empfehlung: Minimal MP4, 640 x 480 oder 480 x 360. Maximal drei MP4-Versionen (480 x 360, 640 x 480, 720p + Hauptprofil) sowie eine oder zwei 3GP-Versionen (320 x 240 und möglicherweise 176 x 144). Siehe unseren früheren Beitrag für spezifische Kodierungseinstellungen.
Mehrere Bitraten
Sollten Sie mehrere Bitraten verwenden, um Benutzern mit schnellen Internetverbindungen größere Videos und Benutzern mit langsameren Internetverbindungen kleinere Videos bereitzustellen? Wenn Ihre Benutzer qualitativ hochwertige Videos im Web ansehen, lautet die Antwort wahrscheinlich "Ja". Verwenden Sie dazu 2-3 Größen und Bitraten - z. B. ein Video mit 640 x 360 und ein anderes mit 1280 x 720. Mehr dazu in einem zukünftigen Beitrag.
Streaming
Zencoder unterstützt HTTP Live Streaming für iOS-Geräte sowie Microsoft Smooth Streaming (Silverlight).
Zusammenfassung
1. Das Minimum für HTML5-Videos ist MP4 + WebM oder Ogg (oder beides) Verwenden der MP4-Version für Flash-Fallback.
2. Für den mobilen Support eine H.264 / MP4 Die Ausgabe kann einen langen Weg dauern. 2-3 ermöglicht eine bessere Qualität und eine breitere Kompatibilität.
Empfehlungen
Hier sind einige vorgeschlagene Konfigurationen. Zencoder unterstützt alle diese Formate. Wenn Sie sich fragen, wie Sie mit Zencoder die optimalen Ausgabeprofile erstellen können, öffnen Sie bitte a Unterstüzungsticket. Wir beraten Sie gerne.
1. Bring es zum Laufen
- HTML5, Flash, Mobile: MP4 / H.264, Basislinienprofil, 480 x 360 oder 640 x 480
- HTML5: WebM oder Ogg
{
"input": "s3://bucket-name/file-name.avi",
"outputs": [
{
"url": "s3://output-bucket/output-file-name.mp4",
"size": "640x480"
},
{
"url": "s3://output-bucket/output-file-name.webm",
"size": "640x480"
}
]
}
- HTML5, Flash: MP4 / H.264, Hochkarätig
- HTML5: WebM
- HTML5: Ogg
- Handy, Mobiltelefon: MP4 / H.264, Basislinienprofil, 480 x 360 oder 640 x 480
2. Runden Sie es ab
{
"input": "s3://bucket-name/file-name.avi",
"outputs": [
{
"url": "s3://output-bucket/output-file-name.mp4",
"h264_profile": "high"
},
{
"url": "s3://output-bucket/output-file-name.webm"
},
{
"url": "s3://output-bucket/output-file-name.ogg"
},
{
"url": "s3://output-bucket/output-file-name-mobile.mp4",
"size": "640x480"
}
]
}
3. Unterstütze alles
- HTML5, Flash: MP4 / H.264, Hochkarätig
- HTML5: WebM
- HTML5: Ogg
- Handy, Mobiltelefon: MP4 / H.264, Basislinienprofil, 480 x 360, für breite Kompatibilität
- Handy, Mobiltelefon: MP4 / H.264, Hauptprofil, 1280 x 720, für neuere iOS-Geräte (iPhone 4, iPad, Apple TV)
- Handy, Mobiltelefon: 3GP / MPEG4, 320x240 und / oder 177x144 für Nicht-Smartphones *
{
"input": "s3://bucket-name/file-name.avi",
"outputs": [
{
"url": "s3://output-bucket/output-file-name.mp4",
"h264_profile": "high"
},
{
"url": "s3://output-bucket/output-file-name.webm"
},
{
"url": "s3://output-bucket/output-file-name.ogg"
},
{
"url": "s3://output-bucket/output-file-name-mobile-480x360.mp4",
"size": "480x360"
},
{
"url": "s3://output-bucket/output-file-name-mobile-1280x720.mp4",
"size": "1280x720"
},
{
"url": "s3://output-bucket/output-file-name-mobile.3gp",
"size": "320x240"
}
]
}