H2 - P2019

Développement web

Cours 06 - 2014-10-26

• github : https://github.com/brunosimon/hetic-p2019
• site : http://bruno-simon.com/hetic/p2019/
• contact : bruno.simon@hetic.net

HTML5

Audio / Video

APIs HTML5 permettant de lire des fichiers audio et vidéo directement dans la page à travers des balises <audio> et <video> sans utiliser Flash

Audio

Exemples

<audio src="audio.mp3"></audio>
                    

Message de fallback pour les visiteurs dont le navigateur ne supporte pas l'audio

<audio src="audio.mp3">
    Your browser doesn't support video API
</audio>
                    

Quelques attributs

<audio 
    src="audio.mp3"
    autoplay="autoplay"
    loop="loop"
    controls="controls"
></audio>
                    

Attributs

• autoplay Lance la lecture dès que le fichier est chargé
• loop Recommence la lecture à la fin
• preload Choix du buffering (none / auto / metadata)
• controls Affiche un controlleur (propre au navigateur)

Controllers

• Chrome
  
• Firefox
  
• Safari
  
• Opera
  

Formats

Il est possible d'envoyer plusieurs formats et de laisser le navigateur choisir celui qu'il préfère

<audio autoplay="autoplay" loop="loop" controls="controls">
    
    
    Your browser doesn't support audio API
</audio>
                    

Compatibilité

Can I Use : http://caniuse.com/#feat=audio

Video

Comme l'API audio mais on remplace par video...

Exemples

Le plus simple

<video src="video.mp4"></video>
                    

Message de fallback pour les visiteurs dont le navigateur ne supporte pas la vidéo

<video src="video.mp4">
    Your browser doesn't support video API
</video>
                    

Avec quelques attributs

<video 
    src="video.mp4" 
    poster="image.jpg"
    autoplay="autoplay" 
    loop="loop" 
    controls="controls" 
    width="800"
    height="600"
></video>
                    

Attributs

• autoplay Lance la lecture dès que le fichier est chargé
• loop Recommence la lecture à la fin
• preload Choix du buffering (none / auto / metadata)
• controls Affiche un controlleur (propre au navigateur)

• width Largeur du player
• height Hauteur du player
• poster Lien de l'image de presentation de la vidéo

Formats

Il est possible d'envoyer plusieurs formats et de laisser le navigateur choisir celui qu'il préfère

<video autoplay="autoplay" loop="loop" controls="controls" width="800">
    <source src="video.mp4"  type="video/mp4"  />
    <source src="video.webm" type="video/webm" />
    <source src="video.ogv"  type="video/ogg"  />
    Your browser doesn't support video API
</video>
                    

• OGG (ogv) : Libre et gratuit (Firefox)
• WEBM : Libre et gratuit (Chrome)
• MP4 : Non-libre et payant

Convertir ses vidéos

• Miro Video Converter Simple et efficace (Mac et Windows)
• HandBrake Plus complexe (Mac, Windows et Linux)

Compatibilité

Can I Use : http://caniuse.com/#feat=video

Manipuler en Javascript

Avant tout, il faut récupérer l'élément.
En JS, il existe plusieurs façon de récupérer un élément HTML

var video = document.getElementsByTagName('video')[0]; // Renvoie un tableau
var video = document.getElementById('video'); // Suppose que l'ID a bien été rajouté en HTML
var video = document.querySelector('.video'); // Suppose que la classe à bien été rajoutée en HTML
                    

Une fois récupéré, on va pouvoir utiliser ses méthodes et modifier ses propriétés

Méthodes

Fonctions que l'on peut appliquer

• play()
• pause()
• load()

video.play();
video.pause();
video.load();
                    

Propriétés

Informations que l'on peut obtenir et modifier

console.log(video.volume);
video.volume += 0.1;
                    

Événements

Évenements que l'on peut écouter

video.addEventListener('play',function(e)
{
    console.log('playing');
});
                    

Méthodes / Propriétés / Événements

Liste complète : http://www.w3schools.com/tags/ref_av_dom.asp

Exemples

Écouter l'événement "click" sur un bouton pour augmenter le volume sans dépasser la limite

<video src="#"></video>
<button id="volume-up">+</button>
                    

// Récupérer les éléments
var video     = document.getElementById('video'),
    volume_up = document.getElementById('volume-up');

// Écouter les clicks
volume_up.onclick = function()
{
    // Met à jour le volume
    if(video.volume + 0.1 <= 1)
        video.volume += 0.1;
    else
        video.volume = 1;
};
                    

Exemples

Écouter l'événement "click" sur une div pour changer la position de la lecture
(CSS non inclus)

<video src="#"></video>

    


                    

// Récupérer les éléments
var video = document.getElementById('video'),
    bar   = document.getElementById('bar');

// Écouter les clicks
bar.onclick = function(e)
{
    // Calculer le temps de la vidéo par rapport à la position du click sur la bar
    var ratio   = e.offsetX / bar.offsetWidth,
        current = video.duration * ratio;

    // Met à jour la lecture de la vidéo
    video.currentTime = current;
};
                    

Exemples

Mettre à jour le curseur d'une barre en fonction de l'avancement dans la vidéo
(CSS non inclus)

<video src="#"></video>

    


                    

// Récupérer les éléments
var video     = document.getElementById('video'),
    bar       = document.getElementById('bar'),
    cursor    = document.getElementById('cursor');

// Executer cette fonction toutes les 50ms
window.setInterval(function()
{
    // Calcul le pourcentage de vidéo déjà passé
    var percent = (video.currentTime / video.duration) * 100;

    // Met à jour la bar de lecture
    cursor.style.width = percent + '%';
},50);