INTCSS: Multimédia

📖 Introduction 🎵 L'élément <audio> 🎬 L'élément <video> 🎨 L'élément <canvas> 🖼️ SVG intégré 📝 Exemple complet

📖 Introduction au multimédia HTML5

HTML5 a révolutionné le multimédia sur le web en introduisant des balises natives pour l'audio, la vidéo, le dessin vectoriel et la graphique interactive.

❌ Avant HTML5

<!-- Utilisation de plugins (Flash, Silverlight) -->
<object type="application/x-shockwave-flash">
    <param name="movie" value="video.flv">
</object>

Nécessitait des plugins externes

✅ Avec HTML5

<!-- Balises natives HTML5 -->
<video src="video.mp4" controls></video>

Intégré nativement dans le navigateur

⚡

Sans plugin

Fonctionne nativement dans le navigateur

📱

Responsive

S'adapte à tous les écrans

🎮

Interactif

Canvas permet des animations temps réel

🔧

Contrôle JavaScript

API complète pour la manipulation

🎵 1. L'élément <audio>

La balise <audio> permet d'intégrer des fichiers audio nativement dans une page web.

📝 Syntaxe de base

<audio controls>
    <source src="musique.mp3" type="audio/mpeg">
    <source src="musique.ogg" type="audio/ogg">
    Votre navigateur ne supporte pas l'élément audio.
</audio>

✨ Aperçu (lecteur audio)

📌 Attributs de <audio>

`controls`

Affiche les contrôles de lecture (play/pause, volume, progression)

`autoplay`

Démarre la lecture automatiquement

⚠️ Souvent bloqué par les navigateurs

`loop`

Répète l'audio en boucle

`muted`

Démarre en mode muet

`preload`

Précharge l'audio (none, metadata, auto)

🎵 Formats audio supportés

🎵

MP3

type="audio/mpeg"

✅ Tous navigateurs

🎶

OGG

type="audio/ogg"

✅ Firefox, Chrome, Edge

🎧

WAV

type="audio/wav"

✅ Tous navigateurs

📝 Exemple : Lecture avec JavaScript

<audio id="monAudio" src="musique.mp3"></audio>
<button onclick="document.getElementById('monAudio').play()">Lire</button>
<button onclick="document.getElementById('monAudio').pause()">Pause</button>

✨ Démo interactive

🎬 2. L'élément <video>

La balise <video> permet d'intégrer des vidéos nativement, sans plugins tiers.

📝 Syntaxe de base

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track src="sous-titres.vtt" kind="subtitles" srclang="fr" label="Français">
    Votre navigateur ne supporte pas la balise vidéo.
</video>

📌 Attributs de <video>

`controls`

Affiche les contrôles de lecture

`width / height`

Dimensions de la vidéo

`autoplay`

Lecture automatique (souvent bloqué)

`loop`

Lecture en boucle

`muted`

Vidéo muette (nécessaire pour autoplay)

`poster`

Image d'aperçu avant lecture

`preload`

Préchargement (none, metadata, auto)

🎬 Formats vidéo supportés

📹

MP4 (H.264)

type="video/mp4"

✅ Tous navigateurs

🌐

WebM

type="video/webm"

✅ Firefox, Chrome, Edge

📦

OGV

type="video/ogg"

✅ Firefox, Chrome

📝 Exemple : Vidéo avec affiche (poster)

<video width="100%" controls poster="https://via.placeholder.com/640x360/2c3e66/white?text=Aperçu">
    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
</video>

✨ Aperçu vidéo

📝 Exemple : Contrôle JavaScript de la vidéo

<video id="maVideo" width="100%">
    <source src="video.mp4" type="video/mp4">
</video>
<div>
    <button onclick="document.getElementById('maVideo').play()">Play</button>
    <button onclick="document.getElementById('maVideo').pause()">Pause</button>
    <button onclick="document.getElementById('maVideo').volume += 0.1">Volume +</button>
    <button onclick="document.getElementById('maVideo').volume -= 0.1">Volume -</button>
    <button onclick="document.getElementById('maVideo').currentTime += 10">+10s</button>
</div>

✨ Démo interactive

💡 Cliquez sur "Lire la vidéo" pour voir les contrôles JavaScript en action !

💡 Bonnes pratiques : Toujours fournir plusieurs formats vidéo (MP4 + WebM) pour la compatibilité maximale.

🎨 3. L'élément <canvas>

La balise <canvas> permet de dessiner des graphiques 2D dynamiques via JavaScript. Idéal pour les animations, jeux et visualisations de données.

📝 Syntaxe de base

<canvas id="monCanvas" width="400" height="200" style="border:1px solid #ddd;">
    Votre navigateur ne supporte pas canvas.
</canvas>
<script>
    const ctx = document.getElementById('monCanvas').getContext('2d');
    ctx.fillStyle = '#3498db';
    ctx.fillRect(50, 50, 100, 100);
</script>

🎨 Exemples de dessins canvas

📐 1. Rectangle

ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 100, 60);

⚪ 2. Cercle

ctx.beginPath();
ctx.arc(100, 50, 40, 0, 2 * Math.PI);
ctx.fillStyle = '#e74c3c';
ctx.fill();

📈 3. Dégradé

const gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0, '#3498db');
gradient.addColorStop(1, '#e74c3c');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 80);

✏️ 4. Texte

ctx.font = 'bold 20px Arial';
ctx.fillStyle = '#2c3e66';
ctx.fillText('Canvas', 50, 50);

📝 Exemple : Horloge canvas animée

<canvas id="clock" width="200" height="200"></canvas>
<script>
    function drawClock() {
        const ctx = document.getElementById('clock').getContext('2d');
        const now = new Date();
        // Dessiner le cadran, les aiguilles...
        requestAnimationFrame(drawClock);
    }
    drawClock();
</script>

✨ Horloge canvas animée

📚 API Canvas principales

Formes

fillRect(), strokeRect(), beginPath(), arc(), fill(), stroke()

Couleurs

fillStyle, strokeStyle, createLinearGradient(), createRadialGradient()

Texte

fillText(), strokeText(), font, textAlign

Images

drawImage(), getImageData(), putImageData()

Transformations

translate(), rotate(), scale(), save(), restore()

Animations

requestAnimationFrame(), clearRect()

🖼️ 4. SVG intégré (Scalable Vector Graphics)

SVG est un format d'image vectoriel qui permet de créer des graphiques scalables (qui ne perdent pas en qualité) directement dans le HTML.

📌 Canvas vs SVG

Caractéristique	Canvas	SVG
Type	Bitmap (pixels)	Vectoriel (formes)
Évolutivité	Perte de qualité à zoom	Parfaite à toute échelle
Interactivité	Par script	DOM + scripts
Animation	Par JavaScript	CSS + SMIL + JS
Performance	Bon pour animations complexes	Bon pour peu d'éléments

📝 Syntaxe SVG de base

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <!-- Cercle -->
    <circle cx="100" cy="100" r="50" fill="#3498db" stroke="#2c3e66" stroke-width="3"/>
    <!-- Rectangle -->
    <rect x="50" y="50" width="100" height="100" fill="#e74c3c" opacity="0.5"/>
    <!-- Ligne -->
    <line x1="20" y1="180" x2="180" y2="20" stroke="#27ae60" stroke-width="2"/>
</svg>

🎨 Exemples SVG

🔵 Cercle

<circle cx="50" cy="50" r="40" fill="#3498db"/>

📦 Rectangle arrondi

<rect x="10" y="10" width="80" height="80" rx="15" fill="#e74c3c"/>

⭐ Étoile

<polygon points="50,10 61,35 90,40..." fill="#f1c40f"/>

🌈 Dégradé

<linearGradient id="grad">
    <stop offset="0%" stop-color="#3498db"/>
    <stop offset="100%" stop-color="#e74c3c"/>
</linearGradient>

📝 Exemple : SVG animé avec CSS

<style>
    .pulse { animation: pulse 2s infinite; }
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.2); }
        100% { transform: scale(1); }
    }
</style>
<svg width="100" height="100">
    <circle class="pulse" cx="50" cy="50" r="30" fill="#3498db" transform-origin="50px 50px"/>
</svg>

✨ SVG animé

📝 Exemple complet : Lecteur multimédia personnalisé

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Lecteur multimédia HTML5</title>
    <style>
        .player { max-width: 800px; margin: 0 auto; background: #f8f9fa; border-radius: 12px; padding: 20px; }
        .controls { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
        button { background: #2c3e66; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
        .progress-bar { width: 100%; height: 8px; background: #ddd; border-radius: 4px; margin: 15px 0; }
        .progress { width: 0%; height: 100%; background: #3498db; border-radius: 4px; transition: width 0.3s; }
    </style>
</head>
<body>
    <div class="player">
        <h2>Lecteur vidéo personnalisé</h2>
        <video id="video" width="100%" poster="apercu.jpg">
            <source src="video.mp4" type="video/mp4">
        </video>
        <div class="progress-bar">
            <div id="progress" class="progress"></div>
        </div>
        <div class="controls">
            <button onclick="video.play()">▶ Play</button>
            <button onclick="video.pause()">⏸ Pause</button>
            <button onclick="video.volume += 0.1">🔊 Volume +</button>
            <button onclick="video.volume -= 0.1">🔈 Volume -</button>
        </div>
    </div>
    <script>
        const video = document.getElementById('video');
        video.addEventListener('timeupdate', () => {
            const percent = (video.currentTime / video.duration) * 100;
            document.getElementById('progress').style.width = percent + '%';
        });
    </script>
</body>
</html>

📝 Résumé du chapitre

Élément	Description	Utilisation principale
`<audio>`	Audio natif	Musique, podcasts, sons
`<video>`	Vidéo native	Films, tutoriels, clips
`<canvas>`	Graphiques bitmap dynamiques	Animations, jeux, visualisation
`<svg>`	Graphiques vectoriels	Icônes, logos, graphiques scalables

📌 Quiz de vérification

Question 1 : Quelle balise utilise-t-on pour intégrer une vidéo en HTML5 ?

📖 Voir la réponse

✅ Réponse

<video>

Question 2 : Quelle est la différence principale entre Canvas et SVG ?

📖 Voir la réponse

✅ Réponse

Canvas est bitmap (pixels) idéal pour animations complexes ; SVG est vectoriel idéal pour des graphiques scalables (logo, icônes).

Question 3 : Quels attributs peut-on utiliser sur la balise <audio> ?

📖 Voir la réponse

✅ Réponse

controls, autoplay, loop, muted, preload

Question 4 : Comment accède-t-on au contexte de dessin 2D d'un canvas ?

📖 Voir la réponse

✅ Réponse

const ctx = canvas.getContext('2d');

Question 5 : Quel format vidéo est supporté par tous les navigateurs ?

📖 Voir la réponse

✅ Réponse

MP4 (H.264) avec type="video/mp4"