Introduction
La <video> balise en HTML5 est une excellente chose. Il permet la lecture vidéo native dans tous les navigateurs actuels, plutôt que de s'appuyer sur un plugin comme Flash. Il ouvre la porte à la vidéo Web sur les appareils qui ne prennent pas en charge Flash et active des codecs qui n'étaient auparavant pas lisibles sur le Web.
Mais si vous publiez du contenu vidéo, la prise en charge du navigateur peut prêter à confusion. Pour vraiment prendre en charge la vidéo Web, combien de versions de sortie devez-vous créer ? WebM, Ogg et MP4 ? Qu'en est-il de l'iPhone ou d'Android ? Qu'en est-il des versions à débit binaire faible/moyen/élevé ?
Il n'y a pas de réponse unique à cette question, voici donc un court guide pour choisir les sorties pour la vidéo HTML5.
Quoi la toile formats?
Il existe trois formats vidéo qui fonctionnent de manière native dans certains navigateurs. Malheureusement, aucun format ne fonctionne dans tous les navigateurs, vous devez donc en faire au moins deux si vous voulez une prise en charge vidéo HTML5 significative.
Au minimum, vous devez utiliser MP4 + H.264, avec AAC ou MP3. La vidéo MP4 est lue en mode natif dans Safari, Chrome et IE9 (Vista / Windows 7). C'est également votre meilleure option pour une vidéo de secours Flash, et joue en natif sur de nombreux appareils (iOS, Android, Blackberry, PSP, Xbox, PS3, etc.). Utilisez le profil haut H.264 pour la meilleure qualité ou le profil de base si vous souhaitez que la même vidéo puisse être lue sur les appareils mobiles.
Au-delà, utilisez soit WebM + VP8 ou Ogg + Theora avec Vorbis audio pour les autres navigateurs.
Recommandation : Au minimum, MP4 + soit WebM ou Ogg, ou peut-être les deux.
Quels appareils mobiles ?
Encore une fois, il n'y a pas de profil mobile unique qui fonctionne sur tous les appareils mobiles. En fait, il y a plus de normes différentes pour la vidéo mobile que pour le Web. Mais heureusement, quelques recettes bien sélectionnées peuvent couvrir la plupart des appareils mobiles modernes.
Pour plus de détails, consultez notre guide sur encodage vidéo pour une utilisation mobile.
1. La plupart des appareils mobiles modernes prennent en charge MP4 / H.264. Cela inclut toute la série iOS (iPhone, iPod, iPad, Apple TV, etc.), la plupart des appareils Android, les téléphones Blackberry modernes, etc. Pour la plupart, veillez à utiliser le profil de référence H.264. Utilisez 640x480 ou moins pour iOS et Android, et 480x360 ou moins pour la prise en charge de Blackberry.
Notez que le même fichier qui joue sur un iPhone peut être lu sur le Web, via HTML5 (certains navigateurs) ou Flash. Donc, si vous souhaitez réduire les versions, utilisez la même. Mais vous êtes coincé avec le profil de base pour la plupart des appareils mobiles, et Main / High fait une grande différence, donc utiliser des versions de sortie séparées est une bonne idée si vous voulez la meilleure qualité pour chaque appareil.
2. Utilisez 3GP / MPEG4 pour les appareils mobiles plus anciens. La plupart des BlackBerry et certains Androids prennent également en charge la 3GP, et la 3GP joue généralement même sur iPhone/iPod (puisque iOS joue MP4/MPEG-4 et 3GP n'est qu'un sous-ensemble de MP4).
Recommandation : Au minimum, MP4, 640x480 ou 480x360. Au maximum, trois versions MP4 (480x360, 640x480, 720p + profil principal) plus une ou deux versions 3GP (320x240 et peut-être 176x144). Voir notre article précédent pour paramètres d'encodage spécifiques.
Débits multiples
Devriez-vous utiliser plusieurs débits binaires pour diffuser des vidéos plus volumineuses aux utilisateurs disposant d'une connexion Internet rapide, et des vidéos plus petites aux utilisateurs ayant des connexions Internet plus lentes ? Si vos utilisateurs regardent des vidéos de haute qualité sur le Web, la réponse est probablement "Oui". Envisagez d'utiliser 2 à 3 tailles et débits binaires pour y parvenir, par exemple une vidéo à 640 x 360 et une autre à 1280 x 720. Plus d'informations à ce sujet dans un prochain article.
Diffusion
Zencoder prend en charge Diffusion HTTP en direct pour les appareils iOS, ainsi que Microsoft Smooth Streaming (Silverlight).
Sommaire
1. Le minimum pour la vidéo HTML5 est MP4 + WebM ou Ogg (ou les deux), en utilisant la version MP4 pour le secours Flash.
2. Pour l'assistance mobile, un H.264 / MP4 la sortie peut vous prendre un long chemin. 2-3 permet une meilleure qualité et une compatibilité plus large.
Recommandations
Voici quelques configurations suggérées. Zencoder prend en charge tous ces formats. Si vous vous demandez comment créer les profils de sortie optimaux à l'aide de Zencoder, ouvrez un ticket d' assistance. Nous sommes toujours heureux de vous conseiller.
1. Faites-le fonctionner
- HTML5, Flash, Mobile : MP4 / H.264, profil de base, 480x360 ou 640x480
- HTML5 : WebM ou 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, profil haut
- HTML5 : WebM
- HTML5 : Ogg
- Dispositif mobile : MP4 / H.264, profil de base, 480x360 ou 640x480
2. Arrondissez-le
{
"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. Soutenez tout
- HTML5, Flash : MP4 / H.264, profil haut
- HTML5 : WebM
- HTML5 : Ogg
- Dispositif mobile : MP4 / H.264, profil de base, 480x360, pour une large compatibilité
- Dispositif mobile : MP4 / H.264, profil principal, 1280x720, pour les nouveaux appareils iOS (iPhone 4, iPad, Apple TV)
- Dispositif mobile : 3GP / MPEG4, 320x240 et / ou 177x144, pour les non-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"
}
]
}