outils et langages numériques

1 - La vidéo intégrée avec l'élément <figure>

La syntaxe de base de la balise <video> est extrêmement simple mais elle se doit d'être obligatoirement accompagnée des attributs src (définit l'adresse du fichier vidéo) et controls (permet de piloter la lecture de la vidéo). Pour des raisons qui seront développées lorsque la question de la légende sera abordée (chapitre 6), cet élément <video> sera compris entre les balises <figure></figure> :

Résultat dans un navigateur :

Nota bene : le texte alternatif dans la balise <p> informe que le navigateur, accédant à la page, ne supporte pas l'élément <video>. Ce texte prend généralement cette forme : Ce navigateur ne supporte pas HTML5 video.

Sur ce principe de base fonctionnel, vous pouvez ajouter des attributs pour singulariser l'apparence et la diffusion du média :
- width et height pour la taille de la vidéo,
- autoplay + muted pour lancer immédiatement la lecture du média,
- poster^* pour la vignette de la vidéo (pas l'audio),
- muted pour couper le son de la vidéo et
- loop pour la lecture en boucle du media.

^* l'image de présentation poster permet d'indiquer une image à afficher par défaut dans l'espace réservé par la vidéo, avant que la lecture de celle-ci ne soit lancée.

Voici un exemple qui sollicite les attributs width, height, poster, muted et loop :

Résultat dans un navigateur :

2 - Les formats vidéo éligibles

Présentée comme cela, l'intégration d'une vidéo reste relativement simple. Mais, il y a un mais car les différents navigateurs (Internet Explorer, Safari, Chrome, Firefox…) acceptent des formats video différents. Pour parer à ce problème, il est possible de fournir plusieurs sources en convoquant l'élément <source>, le navigateur utilisera la première ressource dont il connaît le format.

Les formats vidéo les plus populaires sur le web (avec leur codec) sont :

• - Webm (VP8) avec son extension .webm
• - Mp4 (H.264) avec son extension .mp4
• - Ogg (Theora) avec extension .ogv

À l’origine, les spécifications HTML5 prévoyaient d’utiliser Ogg en tant que format standard, mais cette décision n’a pas trouvé l’accord des différents navigateurs et par conséquent les trois formats sont supportés.

Voici un exemple qui sollicite par trois fois l'élément <source> incluant l'attribut type pour en indiquer le media-type :

Résultat dans un navigateur :

3 - La vidéo partagée et hébergée sur les plateformes Dailymotion, Vimeo, Youtube…

Les sites web d'hébergement de vidéos et média social comme Dailymotion, Vimeo ou Youtube peuvent partager des vidéos en streaming. Grâce à l'option d'intégration, vous pouvez ajouter des vidéos ou des playlists à un site internet. Cette option d'un hébergement des vidéos hors de votre espace serveur distant (Hostinger, OVH…) vous permet de ne pas le surcharger inutilement (gain de place pour vos pages HTML et vos images).

Comment intégrer une vidéo partagée :
1 - Sur votre ordinateur, via un navigateur, accédez à la vidéo ou à la playlist Dailymotion, Vimeo, Youtube… que vous souhaitez intégrer.
2 - Cliquez sur PARTAGER ou les icônes ou .
3 - Dans la liste des options de partage, cliquez sur Intégrer ou Vidéo intégrée ou sur l'cône .
4 - Copiez le code HTML figurant dans la zone qui s'affiche qui se présente avec les balises ouvrante et fermante <iframe> et </iframe>.
5 - Collez le code dans le code HTML de votre site Web. Ce code HTML peut être encadré d'une <div> et </div> qui permet d'adapter la vidéo à l'affichage sur le device de consultation.

Votre vidéo est maintenant intégrée au corps de votre page HTML. Vous pouvez le constater dans un navigateur.
Notez toutefois que si le lien sur le site hébergeur est rompu, cette vidéo ne sera plus visible sur votre page.

4 - La vidéo pleine page ou fullscreen

Immerger et attirer l'attention des internautes peut se réaliser par le biais de l'utilisation d'une vidéo d'arrière-plan en plein écran (fullscreen) derrière, éventuellement, certains contenus. Je vous livre, ci-après, les codes HTML et CSS pour y parvenir. ^exemple

Étape 1 : écrire la structure HTML

Vous constatez, dans le code ci-dessus :
- que l'élément video est complété d'une class nommée video-container.
- que la vidéo est mise en lecture automatique (autoplay), en boucle (loop), muette (muted) et sera lue par les navigateurs mobiles là où elle se trouve au lieu de la fonction par défaut, qui consiste à l'ouvrir en plein écran pendant sa lecture (playsinline). Ces quatre derniers paramètres sont indispensables à la lecture en continu de la vidéo sur différents devices.

Étape 2 : écrire la feuille de styles CSS

Avant toute chose : neutraliser les marges par défaut du navigateur et des éléments HTML en convoquant le sélecteur universel * :

Ensuite renseigner la class convoquée dans le HTML, plus haut :

Ce qu'il faut comprendre des lignes de code ci-dessus :
- la vidéo occupe 100% de la hauteur et de la largeur du viewport : width:100vw; et height:100vh;.
- la vidéo couvre toute la surface du viewport : object-fit:cover;, au risque d'être étirée, déformée.
- la vidéo est positionnée par rapport à la fenêtre d'affichage avec position:fixed;, ce qui signifie qu'elle reste toujours à la même place, même si la page défile avec un contenu qui lui serait superposé.

Voici un autre ^exemple avec un titre et un texte scrollable au dessus de la vidéo. ^{télécharger l'exemple}

5 - L'audio intégré avec l'élément <figure>

Le principe d'intégration d'une source audio au format .mp3 dans une page HTML procède de la même méthode que celle de la vidéo.
La syntaxe de base de la balise <audio> est extrêmement simple mais elle se doit d'être obligatoirement accompagnée de l'attribut src (définit l'adresse du fichier audio) et controls (permet de piloter la lecture de l'audio). L'apparence du player peut varier en fonction du navigateur utilisé.
Pour des raisons qui seront développées lorsque la question de la légende sera abordée (chapitre 6), cet élément <audio> sera compris entre les balises <figure></figure> :

Résultat dans un navigateur :

Nota bene : le texte alternatif dans la balise <a> informe que le navigateur, accédant à la page, ne supporte pas l'élément <audio> et vous propose de le télécharger (fichier zippé) pour le lire hors du navigateur.

Sur ce principe de base fonctionnel, vous pouvez ajouter des attributs pour singulariser l'apparence et la diffusion du média :
- muted pour activer ou couper le son de l'audio et
- loop pour la lecture en boucle du media.

Voici un exemple qui sollicite les attributs muted et loop :

Résultat dans un navigateur :

6 - La légende sous une vidéo ou un audio avec l'élément <figcaption>

L'élément <figcaption> est diversement convoqué soit pour une image, soit une vidéo et / ou soit un audio. Il peut se placer au dessus ou en dessous du média convoqué et permet de légender celui-ci :

La légende sous un élément image

Résultat dans un navigateur :

La légende sous un élément vidéo

Résultat dans un navigateur :

La légende sous un élément audio

Résultat dans un navigateur :

7 - L'utilitaire Miro Video Converter pour convertir tous les formats audio et vidéo

Pour la génération et la conversion de fichiers audio et vidéo, il existe plusieurs logiciels qui permettent de générer les fichiers MP3, MP4, WebM et OGV. Le plus simple et le plus pratique, à mon sens, est Miro Video Converter qui a en plus la qualité non négligeable d'être libre et gratuit. Il gère tous les formats de compression (H.264/MP4, WebM/VP8, OGG/Theora) et son utilisation est très intuitive.