Utiliser un CMSLe HTML 4 n'aime ni la vidéo, ni l'audio ! On doit utiliser la balise Object et écrire une grosse portion de code incompréhensible et complexe. On peut même dire que le multimédia était le clandestin sur le web, car il n'avait pas de balises dédiées. Une première idée est venue en 2007 par le groupe qui travaillait sur le HTML 5 qui a proposé l'élément video avec des attributs pour la lecture et l'arrêt. Par la suite, on a ajouté l'élément audio pour la musique. Mais contrairement à ce qu'on pensait, cela complique parfois les choses, notamment sur la protection des droits d'auteurs. Par ailleurs, le gros problème est la jungle des formats, car chaque géant du web veut imposer ses propres formats avec le HTML 5. Donc, la route est longue pour un web et des navigateurs qui n'auront jamais plus besoin de plug-ins pour afficher une vidéo. L'utilisation d'un plug-in possède des inconvénients majeurs. Et le principal est que c'est un élément extérieur à votre page et le navigateur. Quand vous affichez une vidéo, le navigateur ignore tout de ce qui se passe dans le plug-in et c'est impossible à indexer par les moteurs de recherche. Et cela peut aller plus loin, car des éléments de votre page peuvent être cachés par le lecteur de vidéo si vous utilisez un plug-in. Donc, le HTML 5 peut corriger de nombreux défauts dans ce domaine.
Pour ajouter une vidéo intitulée HTML5.ogv en HTML 5, vous devez utiliser le code suivant :
Vous vous attendiez à autre chose ? Désolé de vous décevoir ! L'élément video prend simplement la source de la vidéo pour l'afficher. Mais si vous testez ce code, cela ne fonctionnera pas. Tout ce que vous verrez est un lecteur dans votre navigateur et la première image du film. Notez aussi la similarité avec la balise Img où on fournit juste la source du document. Pour que cette vidéo, vous avez besoin de lui dire d'enclencher la lecture. Et vous pouvez le faire de deux manières, soit avec l'attribut autoplay et la vidéo se lancera automatiquement au chargement de la page. Ou encore, vous pouvez inclure l'attribut controls pour afficher la lecture, la pause et le stop dans la vidéo.
Afficher les contrôles est plus intéressant pour l'utilisateur. En effet, certains visiteurs détestent qu'une vidéo se lance automatiquement. Si vous testez ce code, vous remarquerez aussi que la vidéo affiche juste la première image lorsqu'elle est à l'arrêt. Mais vous pouvez utiliser l'attribut poster pour indiquer une image afin de proposer un meilleur visuel. Les habitués de YouTube seront familiers avec les différents attributs des vidéos en HTML 5. Vous pouvez aussi spécifier la dimension avec les attributs Height et Width. Et vous pouvez dire au navigateur de précharger la vidéo avec Preload. Avec cette dernière option, le navigateur chargera en amont la vidéo et elle se lancera sans aucune latence lorsqu'on déclenchera la lecture. Et l'élément audio utilise les mêmes attributs sauf ceux qui sont dédiés à l'image. Et évidemment, la balise qu'on utilise est
Utiliser la vidéo et l'audio en HTML 5
Pour ajouter une vidéo intitulée HTML5.ogv en HTML 5, vous devez utiliser le code suivant :
Vous vous attendiez à autre chose ? Désolé de vous décevoir ! L'élément video prend simplement la source de la vidéo pour l'afficher. Mais si vous testez ce code, cela ne fonctionnera pas. Tout ce que vous verrez est un lecteur dans votre navigateur et la première image du film. Notez aussi la similarité avec la balise Img où on fournit juste la source du document. Pour que cette vidéo, vous avez besoin de lui dire d'enclencher la lecture. Et vous pouvez le faire de deux manières, soit avec l'attribut autoplay et la vidéo se lancera automatiquement au chargement de la page. Ou encore, vous pouvez inclure l'attribut controls pour afficher la lecture, la pause et le stop dans la vidéo.
Afficher les contrôles est plus intéressant pour l'utilisateur. En effet, certains visiteurs détestent qu'une vidéo se lance automatiquement. Si vous testez ce code, vous remarquerez aussi que la vidéo affiche juste la première image lorsqu'elle est à l'arrêt. Mais vous pouvez utiliser l'attribut poster pour indiquer une image afin de proposer un meilleur visuel. Les habitués de YouTube seront familiers avec les différents attributs des vidéos en HTML 5. Vous pouvez aussi spécifier la dimension avec les attributs Height et Width. Et vous pouvez dire au navigateur de précharger la vidéo avec Preload. Avec cette dernière option, le navigateur chargera en amont la vidéo et elle se lancera sans aucune latence lorsqu'on déclenchera la lecture. Et l'élément audio utilise les mêmes attributs sauf ceux qui sont dédiés à l'image. Et évidemment, la balise qu'on utilise est