Préparez les différents formats vidéos
Plus vous voulez être compatible, plus vous aurez à préparer de vidéos. Puisque vous travaillez dans la conception vous avez l'habitude de gérer un certain niveau de compatibilité.
Même si ça semble fastidieux, je vous conseille tout de même de préparer vos vidéos dans les formats suivants :
- MP4 : le standard actuel
- OGG : pour les versions de Firefox qui n'interprêtait pas le MP4 (< 21 environ, selon le système d'exploitation)
- FLV : pour les anciens navigateurs qui ont le plug-in Flash
- 3GP : pour les anciens téléphones portables qui n'interprètent pas le MP4
Si vraiment vous voulez avoir bonne conscience, vous pouvez préparer une dernière vidéo au format MPG 1. La vidéo fonctionnera sur un PC avec Windows 95 sans installation de logiciel quelconque.
Convertir une vidéo en OGV avec ffmpeg2theora sur Mac
Commencez par télécharger et installer ffmpeg2theora. Ce compresseur s'utilise dans le Terminal, mais pas de panique c'est très simple.
Lancez ~/Applications/Utilitaires/Terminal.app
- Tapez (ou copier-coller) "ffmpeg2theora " dans votre fenêtre de terminal
- Glissez le fichier à compresser sur la fenêtre du terminal
- Appuyez sur la touche Entrée
- C'est parti !
Il est possible d'utiliser quelques options
ffmpeg2theora [liste des options] [chemin vers le fichier à compresser]
Les options utiles :
- -x : largeur de la vidéo en pixel
- -y : hauteur de la vidéo en pixel
- -v : qualité vidéo de 0 à 10
- -a : qualité audio de -2 à 10
Exemple :
ffmpeg2theora -v 9 -a 3 [chemin vers le fichier à compresser]
Cet exemple va compresser la vidéo avec une qualité vidéo de 9 et une qualité audio de 3.
Si votre fichier OGV ne s'affiche pas dans le navigateur ou n'est pas reconnu par votre serveur, vous devez certainement ajouter son type dans votre fichier .htaccess
AddType audio/ogg .oga
AddType video/ogg .ogv .ogg
Conversion 3GP
Pour enregistrer des vidéos au format 3GP, Quicktime pro suffit.
- Menu "Fichier/Exporter…"
- Choisir Vidéo vers 3G dans le menu "Exporter"
- Paramétrer les options
iPad, le cas particulier
L'iPad est capable de lire des vidéos au format MP4 ou H.264, mais attention aux paramètres d'encodage, vous ne pouvez pas faire n'importe quoi !
- Format : MP4
- Dimensions : 640 x 480 pixels
- Images par seconde : 25 ou 30 ips
- Profil : baseline ou main
- Niveau : 3.0
- Débit : jusqu'à 2.5 Mbits
- Format : H.264
- Dimensions : 1080p
- Images par seconde : 30
- Profil : High
- Niveau : 4.2
- Débit : jusqu'à 2.5 Mbits
Vous trouverez plus d'info dans la documentation technique iOs.
Intégrer des vidéos
Voici une fonction très simple qui va vous renvoyer un code HTML avec une balise video et/ou object selon les formats de fichier que vous envoyez en paramètre.
- une balise vidéo HTML 5 pour les sources en mp4, webm, ogg
- une balise object pour une la source flv avec un player swf
Dans le cas ou le navigateur ne peut lire aucun format des formats vidéos que vous avez ajouté, la fonction affiche un texte avec des liens pour télécharger le lecteur Flash ou un navigateur plus récent (Safari, Firefox, Chrome, Opera).
<?php
function vidGetHtml($aId=0, $aVidMP4='', $aVidOGV='', $aVidWebM='', $aPreview='', $aWidth=0, $aHeight=0, $tSwfPlayer='', $tSwfParam=''){
// #1
// balise video html 5
if($aVidMP4!='' || $aVidOGV!='' || $aVidWebM!=''){
$html = '<video id="'.$aId.'" width="'.$aWidth.'" height="'.$aHeight.'" autoplay="true" controls="true" poster="'.$aPreview.'">';
// format mp4
if($aVidMP4!=''){
$html .= ' <source src="'.$aVidMP4.'" type="video/mp4" />';
}
// format WebM
if($aVidWebM!=''){
$html .= ' <source src="'.$aVidWebM.'" type="video/webm" />';
}
// format OGV
if($aVidOGV!=''){
$html .= ' <source src="'.$aVidOGV.'" type="video/ogg" />';
}
}
// #2
// format flv
if($tSwfPlayer!=''){
$html .= ' <object type="application/x-shockwave-flash" data="'.$tSwfPlayer.'" width="'.$aWidth.'" height="'.$aHeight.'">';
$html .= ' <param name="movie" value="'.$tSwfPlayer.'" />';
$html .= ' <param name="FlashVars" value="'.$tSwfParam.'" />';
$html .= ' <img src="'.$aPreview.'" width="'.$aWidth.'" height="'.$aHeight.'" alt="Please upgrade your browser"/>';
// #3
// pas de lecteur flash, affiche une lien pour installer flash ou mettre à jour le navigateur
$html .= '<p>Your browser lack a video function. You can choose to install <a href="http://get.adobe.com/fr/flashplayer/" title="Download Flash player">Flash Player</a> or a modern browser (<a href="http://www.apple.com/safari/download/" title="Download Apple Safari">Safari</a>, <a href="http://www.mozilla.org/en-US/firefox/new/" title="Download Mozilla Firefox">Firefox</a>, <a href="http://www.opera.com/download/" title="Download Opera">Opera</a>, <a href="https://www.google.com/intl/fr_fr/chrome/browser/" title="Download Google Chrome">Chrome</a>)</p>';
$html .= ' </object>';
}
if($aVidMP4!='' || $aVidOGV!='' || $aVidWebM!=''){
// fin de la balise video
$html .= '</video>';
}
// fin du code
return $html;
}
?>
La fonction attend les paramètres suivants :
- $aId : identifiant de l'objet vidéo
- $aVidMP4 : le chemin vers la vidéo au format MP4
- $aVidOGV : le chemin vers la vidéo au format OGG
- $aVidWebM : le chemin vers la vidéo au format WebM
- $aPreview : le chemin vers l'image de prévisualisation
- $aWidth : la largeur de la vidéo
- $aHeight : la hauteur de la vidéo
- $tSwfPlayer : le chemin vers le lecteur SWF
- $tSwfPlayer : la liste des variables Flash
Vous n'avez plus qu'à l'adapter à vos besoins. Bonne compression vidéo !