Quelques éléments multimedia et « nouveautés »

On représente ici brièvement quelques éléments multimedia mais il ne peuvent montrer leur potentiel complet qu'au travers des API javascript.

Vidéo

• On introduit une vidéo avec la balise <video>.
• Si on positionne l'attribut controls l'interface fournira des element de manipulation de la vidéo (démarrage/arrêt, positionnement , son ...)

il n'y a pas de normalisation du format vidéo à utiliser. Le choix de supporter ou non un format est laissé au navigateur.

Pour que quelque soit le navigateur client, l'utilisateur puisse visualiser la vidéo, il vous appartient de fournir plusieurs format alternatif. On fournit donc une suite de format (et de video a ces format), introduit par une balise sourcesur laquelle on positionne l'attribut src par exemple.

 <source src="./FILM/tempsModernes.mp4" type="video/mp4">

Si aucun des formats n'est reconnu par le navigateur, le contenu alternatif () entre les balise video mais hors de source !) sera affiché.

<video controls>
    <source src="./FILM/tempsModernes.webm"
        type="video/webm">
    <source src="./FILM/tempsModernes.mp4"
        type="video/mp4">
    Downloader les fichiers
    <a href="./FILM/tempsModernes.webm">WEBM</a>
    ou
    <a href="./FILM/tempsModernes.mp4">MP4</a>
</video>

Audio

Sur le meme modèle on peut introduire des contenu audio avec la balise <audio>

<audio
        controls
        src="./FILM/interGuitarTorrisi.mp3">
            <a href="./FILM/interGuitarTorrisi.mp3">
                Download audio  
            </a>
</audio>

Canvas

La balise <canvas> permet de définir une zone, ou l'on peut, en Javascript, dessiner des graphiques placer et manipuler des images ou des trame video. Le contenu visuel à l'intérieur du canevas peut être scripté pour changer au fil du temps (d'où l'animation) et en réponse à l'interaction de l'utilisateur (clics de souris et pressions sur les touches).

Cela permet aussi de faire de la 3D via la bibliothèque threeJS

Exemple 2D

<script>
function draw() {
  const canvas = document.getElementById('canvas1');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);  // Cercle extérieur
    ctx.moveTo(110,75);
    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Bouche (sens horaire)
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Oeil gauche
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Oeil droite
    ctx.stroke();
  }
}
</script>
 
</head>
<div style="border:solid" width="80%" >
    <canvas id="canvas1" height="150"></canvas>
    <script>draw();</script>
</div>

Svg

SVG est un standard W3C (compatible avec HTML 5) pour les graphiques vectoriels
Vous pouvez l'utiliser comme format d'image en affectant un fichier contenant du code svg à l'attribut src de la balise img.

<img src="fichier.svg" alt=""/>

Vous pouvez aussi écrire du code svg dans une page html.
Puis éventuellement l'animer avec du javascript.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="-100 -100 200 200">
    <polygon points="0,0 80,120 -80,120" fill="#234236" />
    <polygon points="0,-40 60,60 -60,60" fill="#0C5C4C" />
    <polygon points="0,-80 40,0 -40,0" fill="#38755B" />
    <rect x="-20" y="120" width="40" height="30" fill="brown" />
</svg>

Principe de svg

On a un "style courant", qui indique comment les éléments seront dessinés.
Le style précise la couleur, le remplissage, etc... des formes
Les formes à dessiner sont représentées par des balises : <line>, <rect>, <circle> ... <path>
Par défaut, le système de coordonnées a son origine en haut à gauche et l'axe des y pointe vers le bas :

Les coordonnées sont données par rapport à l'origine de l'image svg (pas dans le repaire du navigateur web

Définir des formes géométriques simples en svg

Lignes :

<svg xmlns="http://www.w3.org/2000/svg" height="70px" width="200px">
    <line x1="0" y1="0" x2="100" y2="200" style="stroke:red;" />
</svg> 

Rectangles :

<svg xmlns="http://www.w3.org/2000/svg" height="70px" width="200px">
  <rect x="10" y="10" width="100" height="50" style="fill:none; stroke: red;"></rect>
</svg> 

Cercles :

 <svg xmlns="http://www.w3.org/2000/svg" width="90px" height="90px" style="fill: none; stroke: red; stroke-width: 4px;">
   <circle cx="40" cy="40" r="30"></circle>
 </svg>  

Les styles avec svg

Une forme peut être :

• remplie :

<svg xmlns="http://www.w3.org/2000/svg" height="70px" width="800px">
  <rect x="10" y="10" width="100" height="50"  style="fill:red; stroke: none;"/>
</svg>

• dessinée :

<svg xmlns="http://www.w3.org/2000/svg" height="70">
    <rect x="10" y="10" width="100" height="50"  style="fill: none; stroke: #FF0000; stroke-width: 10px;"/>
</svg>

• remplie et dessinée :

      <svg xmlns="http://www.w3.org/2000/svg" height="70">
        <rect x="10" y="10" width="100" height="50"  style="fill: blue; stroke: red; stroke-width: 10px"/>
      </svg>

Les propriétés qui définissent le style sont indiquées, comme en CSS, dans l'attribut style des balises.

On peut associer une classe à une balise SVG, et donner le style dans les CSS.

Couleur et remplissage

• La propriété fill indique le remplissage.

  Elle peut valoir :

  • none: la forme n'est pas remplie
    
  • une couleur (même forme que dans les CSS)
  • un gradient

• Les propriétés définissant le contour :

  • stroke : couleur du trait
  • stroke-width: épaisseur du trait (avec ou sans unité)
  • stroke-linecap : forme des extrémités des lignes (butt, round, square)
  • stroke-dasharray : pointillés

Formes complexes : Chemins

On décrit en gros le parcours d'un crayon qui dessinerait la forme

Le dessin est décrit par le contenu de l'attribut "d"

Exemple:

<svg xmlns="http://www.w3.org/2000/svg" style="fill: none; stroke: red; stroke-width: 10px;">
      <path d="M10,10 L100,10 L100,100 L10,100 Z"></path>
</svg>

• M10,10 : on se place en 10,10 (sans dessiner)
• L100,10 : on trace un trait de la position actuelle (10,10) vers la position 100,10 ;
• L100,100: on trace un trait de la position actuelle (100,10) vers 100,100 ;
• L10,100: on trace un trait de la position vers 10,100 ;
• Z: on ferme la forme (par une nouvelle ligne si nécessaire)

Courbes de bézier en svg

Outre les commandes M, L, Z vues précédemment, les chemins peuvent comporter des courbes.
Le système le plus général est celui des courbes de bézier cubique (commande C).

<svg xmlns="http://www.w3.org/2000/svg"  style="fill: none; stroke: red; stroke-width: 5px;" height="260">
      <path d="M100,100 C120,20 170,210 200,100"/>
      <circle cx="120" cy="20" r="5" style="fill: black; stroke: none;"/>
      <circle cx="170" cy="210" r="5" style="fill: black; stroke: none;"/>
      <path d="M100,100L120,20" style="fill: none; stroke: blue; stroke-width: 2px;"/>
      <path d="M170,210L200,100" style="fill: none; stroke: blue; stroke-width: 2px;"/>
</svg>

Grouper en svg

La balise <g> permet de créer un groupe.
Les groupes permettent de partager des styles, et de déplacer plusieurs éléments en leur associant une transformation.

::: {.columns style="font-size:50%;overflow-x: scroll;"}

<svg xmlns="http://www.w3.org/2000/svg">
  <g style="fill: red;" transform="translate(30, 30)">
    <circle cx="10" cy="10" r="10"/>
    <circle cx="30" cy="10" r="10"/>
  </g>
  <g style="fill: green;" transform="translate(100,60), rotate(30)">
    <circle cx="10" cy="10" r="10"/>
    <circle cx="30" cy="10" r="10"/>
  </g>
</svg>

Le groupe vert est tourné de 30°, puis translaté en 100, 60.

3D avec Aframe

La bibliothèque Aframe ajoute un langage de balise pour décrire des scene 3D.

Exemple :

<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>