vendredi 21 décembre 2012

Web & Intégration vidéo

LA VIDEO & INTERNET 


Veille réalisée par Guillaume, Sami & Pauline




Sommaire

I - Les différents formats vidéo
    A - AVI / .avi
    B - WMV / .wmv
    C - MOV / .mov
    D - Divx et Xvid
    E - MKV / .mkv .mka .mks
    F - H264 / MPEG4 AVC .mp4 et .avc
    G - FLV / .flv (format pour youtube...)
    H - Real Video / .rmvb
II -  Intégration en XHTML , HTML 4, HTML5
    A - XHTML
    B - HTML 4
    C - HTML 5 et la balise video
    D - Sur YouTube et Daylimotion
III - Les codecs jusqu’au HTML 5
IV - La perspective du Web HD
V - Webographie


I - Les différents formats vidéo

Pour le stockage de la vidéo , on a besoin de trois éléments :
  • Un format conteneur : c'est un peu comme une boîte qui va servir à contenir les codecs. On reconnaît en général le type de conteneur à l'extension du fichier : AVI, MP4, MKV…

  • Un codec audio : c'est le format du son de la vidéo, généralement compressé : MP3, AAC, OGG…

  • Un codec vidéo : c'est le format qui va compresser les images. C'est là que les choses se corsent, car ces formats sont complexes et on ne peut pas toujours les utiliser gratuitement. Les principaux à connaître pour le Web sont :

    • H.264 : l'un des plus puissants et des plus utilisés aujourd'hui… mais il n'est pas 100% gratuit. En fait, on peut l'utiliser gratuitement dans certains cas (comme la diffusion de vidéos sur un site web personnel), mais il y a un flou juridique qui fait qu'il est risqué de l'utiliser à tout va.
    • Ogg Theora : un codec gratuit et libre de droits, mais moins puissant que H.264. Il est bien reconnu sous Linux mais, sous Windows, il faut installer des programmes pour pouvoir le lire.   
    • WebM : un autre codec gratuit et libre de droits, plus récent. Proposé par Google, c'est le concurrent le plus sérieux de H.264 à l'heure actuelle.

Quelle est la compatibilité des codecs vidéo sur les différents navigateurs ?

Là encore, vous allez voir que c'est un joyeux bazar car aucun format ne sort du lot.

Il est conseillé de proposer chaque vidéo dans plusieurs formats pour qu'elle soit lisible sur un maximum de navigateurs:


Format / extension
Utilisation
Logiciel / support
AVI / .avi
Dans un fichier AVI, chaque composante audio ou vidéo peut être compressée par n'importe quel codec (DIvX et mp3 par exemple). C'est un "conteneur" très pratique, le plus utilisé.
Normalement tous les logiciels de lecture vidéo.
WMV / .wmv
Un format conteneur de Microsoft et sa famille de codecs vidéo. On le trouve souvent chez des vidéo en streaming ou en téléchargement.
MOV / .mov
Format conteneur d'Apple, pouvant contenir un très large choix de codec, y compris haute définition.
DivX et Xvid
Les codecs vidéo les plus utilisés. Permet de diviser par 6 la taille d'un film en DVD sans trop de perte de qualité. Xvid est le concurrent libre de DivX.
Nécessite l'installation des codecs DivX / Xvid à jour, qui sont inclus dans de nombreux lecteurs vidéo.
MKV / .mkv .mka .mks
Format conteneur russe, pouvant contenir de très nombreux codecs.
H264 / MPEG 4 AVC
C'est le Codec utilisé pour la haute définition.
Se retrouve dans les Blu-ray. Se lit avec la majorité des lecteurs vidéo à jour.
FLV / .flv
Le format Flash Video, utilisé en quantité sur Internet (comme Linternaute Video).
Real Video / .rmvb
Codec video propriétaire de Real Networks.

Sources:

II -  Intégration en XHTML , HTML 4, HTML5
   
A – XHTML

<embed> n'est plus valide en XHTML (la version actualisée du HTML), il faut donc le remplacer par <object> qui lui est valide.
Les attributs à insérer diffèrent selon les formats (et donc les plug-in à employer):

Pour une vidéo .mov (QuickTime):
<object classid=\"clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B\" codebase=\"http://www.apple.com/qtactivex/qtplugin.cab\" width=\"\" height=\"\">
<param name=\"src\" value=\"*.mov\" />
<param name=\"controller\" value=\"true\" />
<object type=\"video/quicktime\" data=\"/images/peint.mov\" width=\"\" height=\"\" class=\"mov\">
<param name=\"controller\" value=\"true\" />
</object>
</object>


Pour les .mpg .mpeg .wma:
<object type=\"application/x-mplayer2\" width=\"\" height=\"\">
<param name=\"autostart\" value=\"true\" />
<param name=\"showcontrols\" value=\"true\" />
<param name=\"filename\" value=\"*.mpg\" />
</object>


Pour les .rm (Real Media):
<object classid=\"clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA\" width=\"\" height=\"\">
<param name=\"autostart\" value=\"true\" />
<param name=\"shuffle\" value=\"0\" />
<param name=\"prefetch\" value=\"0\" />
<param name=\"nolabels\" value=\"0\" />
<param name=\"src\" value=\"*.rm\" />
<param name=\"controls\" value=\"ImageWindow\" />
<param name=\"console\" value=\"video1\" />
<param name=\"loop\" value=\"0\" />
<param name=\"numloop\" value=\"0\" />
<param name=\"center\" value=\"0\" />
<param name=\"maintainaspect\" value=\"0\" />
<!--[if !IE]> <-->
<object type=\"audio/x-pn-realaudio-plugin\" data=\"../Videos/Reaction_public.rm\" width=\"\" height=\"\">
<param name=\"autostart\" value=\"true\" /><param name=\"controls\" value=\"ImageWindow\" />
</object>
<!--> <! endif -->
</object>
B - HTML 4

    En HTML4, le moyen le plus répandu pour insérer une vidéo sur une page web est l’utilisation des éléments <object> ou <embed>. Pour lire une vidéo ou un fichier audio, l’utilisation d’un plugin compatible avec le fichier est nécessaire. Or ces plugins s’avèrent être une source d’instabilité pour les navigateurs.
C - HTML 5 et la balise video   

Avec le HTML4, pour simplement intégrer une vidéo ou du son, on devait passer par Flash. HTML5 permet d’intégrer directement les médias avec de simples balises <video>  et <audio>. La balise <video> s'accompagne d'un attribut src pour désigner le fichier, mais aussi d'attributs comme start, stop, autoplay etc qui définissent le comportement de la vidéo.

Grâce aux nouvelles balises <audio> et <video>, les formats multimédias deviennent des éléments du code à part entière. Ils peuvent être insérés à partir d’une simple url et redimensionnées en utilisant des transitions CSS. Cette facilité d’intégration est un réel avantage à l’ère du web 2.0. En revanche, tous les navigateurs n’exploitant pas la même technologie pour lire les formats vidéo,  il est nécessaire d’encoder les vidéos en plusieurs formats pour lire la même vidéo sur plusieurs navigateurs.

L’utilisation du Flash à été pendant longtemps la seule solution pour publier de la vidéo en bonne qualité sur le web.. ça change avec l’arrivée du HTML5 qui offre aux contenus vidéos d’intéressantes perspectives.

Grâce à  la nouvelle balise HTML5 <video> il est désormais possible de lire nativement et très simplement des vidéos sur de nombreux navigateurs et supports : firefox, chrome,  iphone, ipad, android, playstation 3, xbox…  une standardisation qui va permettre une démocratisation des contenus vidéos sans devoir avoir une colonie de plugins installés : Flash, Real player, Windows media player...

Quelques exemples de players vidéos en HTML5

tableau comparatif -> http://praegnanz.de/html5video/

Projekktor – Simply Might <video>
Un “must-have” pour les fonctionnalités avancée qu’il contient : Playlists et chaînes, intégration de publicités avant la lecture de la vidéo, fonctions de partage social Twitter et Facebook, support des anciens navigateurs avec Flash, publier la vidéo sur un autre site/blog grâce à une sortie <embed>, possibilité de créer une surcouche texte pour du sous titrage par exemple.

Projekktor supporte les formats .MP4 (H.264), .OGG (Theora), .WEBM et l’API Youtube pour la vidéo.. ainsi qu’ .OGG (Vorbis) et le MP3 pour le lecteur <audio>. Mieux encore ce lecteur vidéo HTML5 dispose d’un plugin WordPress et est distribué sous licence GNU GPL3.

VideoJS – HTML5 Video Player

Le plus léger des lecteurs, il mise sur son look 100% éditable via CSS et ses skins. A noter que le plugin n’utilise aucune image, les dégradés, arrondis, boutons play/pause sont entièrement réalisés en CSS3. 
OpenSource la librairie VideoJS bénéficie elle aussi d’un plugin WordPress et le lecteur dispose d’une possibilité d’interaction avec jQuery.

SublimeVideo – HTML5 Video Player

 


A la différence des autres players, SublimeVideo ne peux pas être téléchargé ni modifié. Actuellement en beta fermée, le site dispose d’un panel d’administration qui donne des statistiques sur l’utilisation du service pour chacun de vos sites. Ce lecteur 100% JavaScript est desservi directement depuis leurs CDN en ajoutant simplement une ligne de code sur votre site (donc pas besoin de faire de mise à jours).
Il dispose de sa propre API et permet des interactions avec la page que les autres lecteurs vidéos HTML5 n’offrent pas.

Media Front – Open Standard Media (OSM)


Entièrement écrit en jQuery l’OSM player est distribué sous licence GNU GPL 3. Il est personnalisable avec jQueryUI ThemeRoller et supporte aussi bien les vidéos HTML5 que l’importation de vidéos Youtube ou Vimeo. A noter que c’est le seul player disposant d’une extension pour Dupral.

Kaltura – Html5video.org

 


Player qui lit les balises <video> et <audio> de l’HTML5 pas grand chose d’autres à dire.. Partenaire de la Wikimedia Foundation il est le lecteur HTML5 utilisé par Wikipedia.com.
Site : http://www.html5video.org


D - ViaYouTube et Daylimotion
- les changements aux yeux du W3C et la balise <embed>
    - Apparition de la balise vidéo avec le html 5

Que font les majors vidéos en terme d’HTML5 ?

Youtube en HTML5

Youtube a été le premier service à proposer une version HTML5 de leur lecteur vidéos. Vous pouvez activer la fonction player HTML5 en vous inscrivant au programme beta du lien http://www.youtube.com/html


Dailymotion
Sûrement le + impressionnant, Dailymotion offre une série de démo sur l’utilisation de la balise<video> HTML5 couplée à des fonctions CSS3 et filtres SVG. De la simple rotation, à l’effet « fil de fer »...Lumière d’ambiance, qui projette en fond un flou lumineux en rapport avec la scène...

http://www.dailymotion.com/openvideodemo


III - Les codecs jusqu’au HTML 5

Le nouveau standard HTML5 propose une balise video qui permet d’intégrer directement un lecteur vidéo dans une page web.

Il s’agit bien d’une avancée technologique car il sera possible de lire une vidéo sans plugin.
De plus, pour un meilleur affichage des vidéos en haute résolutions, HTML5 introduit de nouveaux codecs. Ils seront supportés nativement par votre navigateur.

Les principaux acteurs n’ont toujours pas réussi à se mettre d’accord sur les formats et les codecs vidéo à utiliser. A l’heure actuelle,  trois codecs sont proposés: Ogg Theora, H264 et VP8.

Le format Ogg est libre et Open Source, ce qui permet bien sûr d’améliorer sa diffusion. Par contre, les vidéos HD ne sont pas toujours de très bonne qualité.

Le codec H264 est propriétaire mais propose une excellente qualité vidéo. Il est aujourd’hui fortement soutenu par Microsoft. Le problème avec le codec H264 est sa licence restrictive qui comprend des clauses financières assez gênantes pour une large diffusion de vidéos.

De l’autre côté, Google propose une alternative très intéressante: le codec VP8. Ce codec devrait être proposé en Open Source et deviendrait donc complètement libre. Ceci permettrait une très large diffusion et pourrait être un gros avantage par rapport à H264.

De plus, il est fort probable que Youtube proposera des vidéos en VP8, ce qui permettra de diffuser largement de codec et son usage. N’oublions pas que Youtube appartient à Google !

Bref, HTML5 pose des questions sur les nouveaux standards de la vidéo. Grâce à Google, le codec VP8 sera bientôt disponible et devrait également être utilisable pour d’autres périphériques (pourquoi pas les mobiles).

Il est certain que le Player Flash d’Apple ne sera plus le seul moyen de diffuser de la vidéo. L’ouverture de la vidéo en HTML était très attendue et permettra enfin de s’affranchir des plugins propriétaires.

-->
Navigateurs
H.264/MP4
OGG Theora
WebM
non
Firefox 3.5+
Firefox 4+
non
Opera 10.5+
Opera 10.6+
Internet Explorer 9+
non
si les codecs sont installés
Google Chrome 4-16
mais supprimé après
Google Chrome 4+
Google Chrome 6+
Safari 5+
non
non


source:http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html

IV - La perspective du Web HD

Avec la généralisation des écrans "retina" chez Apple, et de l'augmentation de la densité des pixels sur les nouveaux téléphones intelligents, le web HD devient une réalité qu'il faut prendre en compte. Si la différence entre la HD d’aujourd’hui et une très bonne qualité d'écran n’est pas encore visible, nous nous dirigeons vers un standard de qualité d'écran toujours plus grand.

Le retina display n’est pas le seul écran haute définition:

Source: http://marcdrummond.com/responsive-web-design/2012/08/10/responsive-design-retina-images

On constate avec des comparaisons simples que la qualité des écrans a évolué:

Ici, un simple zoom sur des caractères prouve que la qualité de l'écran joue beaucoup dans la perception de la qualité du contenu par l’utilisateur.

Comment alors faire en sorte que la qualité des nouveaux écrans soit en adéquation avec le contenu qu’ils affichent?
Il faut que les pixels de l’image soient égaux à ceux de l'écran sur lequel ils sont vus
https://lh6.googleusercontent.com/Uf_tBtV_a3r-FQV7kVrXhZjbhDPznwX-uBXqijgL53O--xFNwey05XUiYTYwkmaYwl9HSGGp01RTFVCQgP09dHcxVKwGTHsPCaQG95TtF_8O

- Les pages web s’adaptent de plus en plus facilement à leur contenu
- Les navigateurs ont amélioré leur capacité à redimensioner les images
- dans la même zone CSS on peut mettre “plus” de pixels: une image de taille plus grande sera restreinte dans le même espace tout en gardant une meilleure qualité

Concrètement, si l'écran a la capacité de rendre en haute définition, l’objectif est de créer, pour les contenus appropriés, une version adapté afin de permettre une expérience web optimisée.
IMAGES VOITURES

L’exemple ci-dessus illustre la méthode du “Pixel doubling” (en anglais, doubler le ratio des pixels) pour l’adaptation à la qualité d’écran.

Pourquoi tout le monde ne crée pas les pages web en HD alors?

- Tout le monde ne dispose pas encore d’un écran HD
- Les images restent tout de même significativement plus larges et donc plus longues à charger selon la connexion internet
- Pour certains contenus, le web HD peut être considéré comme un gâchis de bande passante
- L’ouverture de contenu HD comme les vidéos par exemple requiert non seulement une très bonne connexion mais aussi une mémoire ram que tous les appareils n’ont pas

Solution à l’heure d’aujourd’hui:

Même si le web HD fait miroiter de belles promesses, chaque développeur doit se poser les même questions avant de construire en haute définition:

- Qui sont mes clients? Quelle est leur cible? Qui seront les utilisateurs du site et disposent-ils d'écran en HD, de bande passante suffisante, de machines assez puissantes?
- Quelle taille ne pas dépasser en HD? Quelle résolution?
- Les moteurs de recherches vont-ils être capable d’indexer mon contenu de la même façon? - Les utilisateurs auront-ils une meilleure expérience web grâce à du contenu en HD?

Bon à savoir: l’évolution du web permet aujourd’hui de limiter l’usage des images dans une page. De nombreux boutons et textes peuvent maintenant être fait en CSS ce qui permet aux pixels de se dimensionner avec la page et donc de permettre un rendu de meilleur qualité.

Nous sommes dans une période transitoire où résolution normale et haute résolution offrent chacune leurs avantages et leurs inconvénients.

Aux développeurs de savoir  se poser les bonnes questions avant de choisir l’un ou l’autre, à nous de rester attentifs et nous tenir au courant des évolutions!


V - Webographie
·        




 


0 commentaires:

Enregistrer un commentaire

Twitter Delicious Facebook Digg Stumbleupon Favorites More