http://i47.servimg.com/u/f47/17/17/18/21/zeze13.png KyloulGraph :: inserer une video en htlm5
KyloulGraph Index du Forum

KyloulGraph
forum de graphisme sous Adobe photoshop

 FAQ   Rechercher   Membres   Groupes   S’enregistrer 
 Profil   Se connecter pour vérifier ses messages privés   Connexion 

inserer une video en htlm5

 
Poster un nouveau sujet   Répondre au sujet    KyloulGraph Index du Forum -> Formation -> Tutoriels et Astuces
Sujet précédent :: Sujet suivant  
Auteur Message
kyloul
KyloulGraph

Hors ligne

Inscrit le: 13 Jan 2011
Messages: 182
Point(s): 122
Moyenne de points: 0,67

MessagePosté le: Lun 24 Jan - 00:56 (2011)    Sujet du message: inserer une video en htlm5 Répondre en citant

e HTML 5 est la dernière version de l'HTML, langage utilisé pour la création de sites web. Voyons la définition donnée par Wikipédia
:

Citation : Wikipédia
HTML5 (HyperText Markup Language Version 5) est la dernière révision du principal langage du World Wide Web, HTML. Le travail a été repris par le W3C en mars 2007 après avoir été initié par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie.


Cette nouvelle version inclue de nouvelles balises (comme <video> ) et de nouveaux attributs mais en déprécie également.
Ce qu'il ne faut surtout pas oublier avec le HTML 5 : changer le Doctype. Voici un exemple de page web en HTML 5 :

Code : HTML - Sélectionner
Code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Exemple de code HTML5</title>
    <script src="demo.js"></script> <!-- Pas besoin d'attribut TYPE en HTML5 s'il s'agit de Javascript -->
</head>

<body>
    <section>
        <p>Contenu [...]</p>
    </section>
</body>
</html>






Voilà pour les rappels pour le HTML5, maintenant, on peut passer au vif du sujet, comment utiliser cette nouvelle balise ...
La balise
Comment l'utiliser ?

Nous y voilà. Vous attendez tous de savoir comment on utilise cette balise. Et bien, le HTML5 a été créé pour faire un langage plus simple, c'est pourquoi cette balise est elle aussi très simple d'utilisation. Regardez plutôt :

Code : HTML - Sélectionner
Code:
1
2


Code:
<video src="movie.webm">
</video>





Comme je vous le disais, c'est simplissime !



Sous Notepad++, les balises HTML5 ne sont reconnues que depuis la version 5.7. Ainsi, si vous souhaitez les voir colorées, téléchargez-la !


Par contre vous pouvez tester ce code, je vous invite d'ailleurs tout au long du tuto à tester les codes, ça vous fait pratiquer et vous comprendrez mieux ce que je fais.

IE ne prenant pas encore en charge cette balise, nous devons proposer une alternative. Ainsi :

Code : HTML - Sélectionner
Code:
1
2
3
4
5
6
7


Code:
<video src="movie.webm">
 <!-- C'est ici que vous écrivez l'alternative et vous pouvez, par exemple, proposer un code flash -->
 <object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/_etwz7NkemE&hl=fr">
  <param name="movie" value="http://www.youtube.com/v/_etwz7NkemE&hl=fr" />
  <param name="wmode" value="transparent" />
 </object>
</video>






PS : J'ai pris le code flash dans ce tuto qui vous permettra d'insérer une vidéo youtube ou daylimotion en étant valide W3C
Vous pouvez bien sûr également ajouter un id à la vidéo et d'autres attributs que nous verrons en détail très bientôt ...

Quels formats vidéos sont supportés ?

Là est un problème de la balise vidéo à contourner : chaque navigateur choisit les formats qu'il supporte. Les deux qui vous seront utiles sont :
  • en .webm, un format supporté par Google Chrome, Mozilla Firefox (dans sa version 4.0) et Opera
  • en .mp4, un format supporté par Safari


Il existe également un autre format utilisé mais qui ne devrait pas vous être utile si vous utilisez ceux cités ci-dessus : en .ogg. Sachez tout de même qu'il existe.


Pour encoder votre vidéo, nous pouvons remercier tyler-durden qui m'a conseillé Free WebM Encoder


Pour que votre vidéo puisse être lue par tous les navigateurs, vous allez donc devoir l'encoder deux fois !
Il faut alors également changer le code pour mettre votre vidéo. Pour que le navigateur gère les différents formats, nous allons utiliser la balise <source> . Celle-ci, utilisée plusieurs fois donne une alternative au navigateur : si le premier format n'est pas compatible, il prend le suivant. Ce qui nous donne pour insérer notre vidéo :

Code : HTML - Sélectionner
Code:
1
2
3
4
5


Code:
<video>
 <source src="video.webm" type="video/webm"/>  <!-- Pour Chrome, Firefox et Opéra -->
 <source src="video.mp4" type="video/mp4"/>  <!-- Pour Safari -->
 La vidéo ne peut être lue ...    <!-- Pour IE -->
</video>







Pour activer la version de youtube avec le format webm, rajoutez &webm=1 à la fin de l'url de la vidéo

Vous savez maintenant rendre votre vidéo accessible à tous les navigateurs !

De nouveaux attributs

Pour cette nouvelle balise, viennent s'ajouter de nouveaux attributs :
  • width et height qui permettent de régler la taille de la vidéo. Si vous n'en spécifiez qu'un, le navigateur gardera les proportions de la vidéo pour l'autre.
  • controls ; c'est un booléen qui s'il est présent affichera les commandes par défaut du navigateur. Vous apprendrez dans la troisième partie de ce tuto comment vous en passer.
  • poster qui permet d'afficher une image pendant que la vidéo se charge jusqu'à ce qu'elle débute. Si cet attribut n'est pas présent, c'est la première image de la vidéo qui joue ce rôle.
  • autoplay ; booléen qui s'il est présent permet au navigateur de commencer la vidéo automatiquement
  • loop ; booléen qui s'il est présent permet au navigateur de jouer la vidéo en boucle
  • autobuffer ; booléen qui s'il est présent permet de commencer le préchargement de la vidéo dès le chargement de la page

Ça en fait un bon paquet déjà


Bon maintenant qu'on a vu comment utiliser la balise, maintenant on va passer à ce qui vous intéresse sûrement le plus : apprendre à créer vos propres commandes en JavaScript.


Faire ses propres commandes
Le bouton play/pause

Pour débuter, nous allons utiliser ce code HTML de départ. Il vous faut également une vidéo pour pouvoir le tester. Ici, je l'ai appelée video.

Code : HTML - Sélectionner
Code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


Code:
<!DOCTYPE html>  <!-- On oublie pas le Doctype spécial HTML5 -->
<html> 
<head> 
 <title>Créer ses propres commandes pour la balise vidéo</title> 
</head> 
<body> 
 <video name="media" id="video" height="300" width="500">
  <source src="video.webm" type="video/webm"/>  <!-- Pour Chrome, Firefox et Opéra -->
  <source src="video.mp4" type="video/mp4"/>  <!-- Pour Safari -->
  La vidéo ne peut être lue ...     <!-- Pour IE -->
 </video>
</body> 
</html>






Pour créer votre bouton play/pause, nous allons utiliser, la balise <button></button> .
Ce qu'on veut, c'est que quand l'utilisateur clique sur le bouton, la vidéo se mette en pause si elle ne l'était pas et qu'elle démarre s'il était en pause. Pour le savoir, on utilise document.getElementById("video").paused qui renvoie un booléen : vrai si la vidéo est en pause, faux si elle ne l'est pas. Pour mettre la vidéo en marche, on utilisera la fonction play() et pour la mettre en pause, pause() .

Ce qui nous donne pour ce bouton :

Code : HTML - Essayer le code - Sélectionner
Code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


Code:
<!DOCTYPE html> 
<html> 
<head> 
 <title>Créer ses propres commandes pour la balise vidéo</title> 
</head>
<body> 
 <video name="media" id="video" height="300" width="500">
  <source src="video.webm" type="video/webm"/>  <!-- Pour Chrome, Firefox et Opéra -->
  <source src="video.mp4" type="video/mp4"/>  <!-- Pour Safari -->
  La vidéo ne peut être lue ...     <!-- Pour IE -->
 </video>
 <button onclick="marchePause('video', 'bouttonMarchePause')" id="bouttonMarchePause">
     Play
 </button>
 
 <script><!--
  function marchePause(videoId, bouttonMarchePauseId) //Les arguments sont l'id de la video et celui du boutton
  {
   var video = document.getElementById(videoId);   //Pour la lecture du code
   var bouttonMarchePause = document.getElementById(bouttonMarchePauseId);
   
   if (video.paused)  //Si la vidéo est en pause, on la met en marche
   {
    video.play();
    bouttonMarchePause.innerHTML = 'Pause' ;
   } 
   else    //Sinon on la met sur pause et on change le bouton
   {
    video.pause();
    bouttonMarchePause.innerHTML = 'Play' ;
   }
  }
 --></script> 
</body> 
</html>






Quand la vidéo s'arrête, il faut également changer le contenu du bouton tout comme quand la vidéo se met en pause ou qu'elle repart autrement qu'avec nos boutons. Ainsi, on va utiliser l'évènement de la vidéo onended pour le premier et onpause et onplay pour le deuxième. Rajoutez-donc dans le code javascript ceci :

Code : JavaScript - Essayer le code - Sélectionner
Code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


Code:
function finVideo(videoId, bouttonMarchePauseId) 
{
 var video = document.getElementById(videoId);   //Pour la lecture du code
 var bouttonMarchePause = document.getElementById(bouttonMarchePauseId);  
 bouttonMarchePause.innerHTML = 'Play' ;
}

function pauseVideo(videoId, bouttonMarchePauseId)  //Quand la vidéo est mise en pause ou part
{
 var video = document.getElementById(videoId);   //Pour la lecture du code
 var bouttonMarchePause = document.getElementById(bouttonMarchePauseId);  
 bouttonMarchePause.innerHTML = video.paused ? 'Play' : 'Pause';   //On change le bouton
}





Pour le code de la vidéo, on doit rajouter les fonctions aux évènements, ce qui donne ceci :

Code : HTML - Sélectionner
Code:
1
2
3
4
5


Code:
<video name="media" id="video" height="500" width="300" onended="finVideo('video', 'bouttonMarchePause');" onpause="pauseVideo('video', 'bouttonMarchePause');" onplay="pauseVideo('video', 'bouttonMarchePause');">
 <source src="boulevard.webm" type="video/webm" />  <!-- Pour Chrome, Firefox et Opéra -->
 <source src="boulevard.mp4" type="video/mp4"/>   <!-- Pour Safari -->
 La vidéo ne peut être lue ...      <!-- Pour IE -->
</video>






Contrôler le volume

Pour contrôler le volume, on va utiliser les attributs volume et muted.
Pour le mettre en silencieux, nous allons donc utiliser un <button> qui quand on clique dessus, enlève ou met le son suivant le son de la vidéo.
Ce qui nous donne (je ne vous remets pas tout le code HTML) :

Code : HTML - Essayer le code - Sélectionner
Code:
1
2
3


Code:
<button id="boutonMuet" onclick="videoMuet('video', 'boutonMuet')">
 Muet
</button>





Code : JavaScript - Sélectionner
Code:
1
2
3
4
5
6
7


Code:
function videoMuet(videoId, boutonMuetId) 
{
        var video = document.getElementById(videoId); 
        var bouton = document.getElementById(boutonMuetId); 
 video.muted = !video.muted; //On inverse la position du muet
 boutonMuet.innerHTML = video.muted ? 'Son' : 'Muet';    //On change le bouton
}






Vous savez maintenant mettre une vidéo en mode muet, mais vous ne contrôlez pas pour autant le volume ! Pour cela, nous allons utiliser un <input/> d'un nouveau type (merci HTML5
) qui vous permet d'avoir des barres de contrôle : elles sont de type range. A cette nouveauté, deux attributs s'ajoutent : step qui définit la précision de la barre, max et min qui permettent de donner les valeurs max et min et enfin value qui définit la valeur du champs. C'est cet attribut qui sera utiliser pour le code JavaScript.
Pour contrôler le volume, on va utiliser des valeurs entre 0 et 1 ce qui nous donne nos valeurs max et min. Pour la précision, c'est comme vous voulez mais moi je vais utiliser 0.1 ce qui donne dix valeurs possibles pour le volume.


Vous pouvez régler la précision à l'infini en mettant step="any"


Voilà donc le code HTML :

Code : HTML - Sélectionner
Code:
1


Code:
<input type="range" value="1" max="1" step="0.1" id="volume" onchange="volumeVideo('video', 'volume')"/>






Pour le code JavaScript, ça nous donne :

Code : JavaScript - Essayer le code - Sélectionner
Code:
1
2
3
4
5
6


Code:
function volumeVideo(videoId, volumeId)
{
 var video = document.getElementById(videoId);   //Pour la lecture du code
 var volume = document.getElementById(volumeId);  //Pour faciliter la lecture
 video.volume = volume.value;  //on met le volume de la vidéo au niveau de la valeur du champs
}






J'ajoute qu'au cas où le volume de la vidéo serait changé par quelque autre façon, vous devez ajouter ce code :

Code : JavaScript - Sélectionner
Code:
1
2
3
4
5
6
7
8


Code:
function changementVolume(videoId, volumeId, boutonMuetId) //Si le volume change
{
 var video = document.getElementById(videoId);    //Pour la lecture du code
 var volume = document.getElementById(volumeId);   //Pour faciliter la lecture
 var boutonMuet = document.getElementById(boutonMuetId); 
 boutonMuet.innerHTML = video.muted ? 'Son' : 'Muet';   //On change le bouton s'il le faut
 volume.value = video.volume;        //On change le volume
}





Et le code HTML qui convient :

Code : HTML - Sélectionner
Code:
1
2
3
4
5


Code:
<video name="media" id="video" height="500" width="300" onvolumechange="changementVolume('video', 'volume', 'boutonMuet');">
 <source src="boulevard.webm" type="video/webm" />  <!-- Pour Chrome, Firefox et Opéra -->
 <source src="boulevard.mp4" type="video/mp4"/>   <!-- Pour Safari -->
 La vidéo ne peut être lue ...      <!-- Pour IE -->
</video>







Les <input type="range"/> ne sont pas pris en charge par tous les navigateurs notamment Firefox, c'est pourquoi à la fin de ce tuto, je vous donnerai une astuce pour avoir une accessibilité maximale


Voilà pour le contrôle du volume.

Une barre de progression

Pour faire une barre de progression pour votre vidéo, nous allons là encore utiliser un <input type="range"/> . Nous allons donc reprendre un code HTML sensiblement pareil mis à part que les valeurs max et min seront mises en JavaScript.

Code : HTML - Sélectionner
Code:
1


Code:
<input type="range" step="any" id="progression"/>





Commençons par configurer cette barre de progression ...

Code : JavaScript - Sélectionner
Code:
1
2
3
4
5
6
7
8


Code:
function mettreJourBarre(videoId, progressionId) //Appelée quand la durée change, pour du streaming, et au chargement
{
 var video = document.getElementById(videoId);   //Pour la lecture du code
 var progression = document.getElementById(progressionId);
 progression.min = video.startTime;   //Le min est le temps de départ de la vidéo
 progression.max = video.startTime + video.duration;  //Le max est le temps de départ ajouté à la durée
 progression.value = video.startTime ;  //On change la valeur de la barre pour le temps de départ
}






Maintenant, on veut pouvoir changer le moment de la vidéo avec la barre :

Code : JavaScript - Sélectionner
Code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


Code:
function changementBarre(videoId, progressionId)  //Appelée quand la valeur de la barre change
{
 var video = document.getElementById(videoId);     //Pour la lecture du code
 var progression = document.getElementById(progressionId);
 video.currentTime = progression.value;  //Le moment de la vidéo est égal à la valeur de la barre
}

function changementTempsVideo(videoId, progressionId) //Appelée quand le temps de la vidéo change
{
 var video = document.getElementById(videoId);     //Pour la lecture du code
 var progression = document.getElementById(progressionId);
 progression.value = video.currentTime; //La valeur de la barre est égal au moment de la vidéo
}





Et pour les évènements qui vont avec :

Code : HTML - Essayer le code - Sélectionner
Code:
1
2
3
4
5
6


Code:
<video name="media" id="video" height="500" width="300" ondurationchange="mettreJourBarre('video', 'progression');" ontimeupdate="changementTempsVideo('video', 'progression');">
 <source src="boulevard.webm" type="video/webm" />  <!-- Pour Chrome, Firefox et Opéra -->
 <source src="boulevard.mp4" type="video/mp4"/>   <!-- Pour Safari -->
 La vidéo ne peut être lue ...      <!-- Pour IE -->
</video>
<input type="range" step="any" id="progression" onchange="changementBarre('video', 'progression');"/>







Vous voulez également afficher le temps de la vidéo ?


Pas de problème, il suffit de modifier notre fonction changementTempsVideo et de rajouter un
dans le code HTML. Après, on va utiliser video.currentTime et video.duration que l'on va convertir en minutes et secondes (ils sont à l'origine en secondes) avec la fonction que je vous donne ci-dessous.

Code : JavaScript - Sélectionner
Code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


Code:
function transformerTemps(tempsId)
{
 if(tempsId < 10)   // Si le temps est en dessous de 10 secondes
 {
  temps = '0:0'+Math.round(tempsId) ;     // On sait que le nombre de minutes sera de 0 et que la dizaine des secondse également, après on arrondi ce qui reste
 }
 else if (tempsId < 60)   // Si le temps est en dessous d'une minute
 {
  temps = '0:'+Math.round(tempsId) ;      // Même opération qu'au dessus en rassemblant toutes les secondes
 }
 else                               // Sinon, il fait plus d'une minute
 {
  var minutes = Math.floor(tempsId / 60);               // On cherche le nombre de minutes en tronquant
  var secondes = Math.round(tempsId % 60);        // On cherche le nombre de secondes en prenant le reste d'une division euclidienne
  
  if(secondes < 10)                                                   // S'il y a moins de  secondes, on rajoute un zéro pour les dizaines des secondes
  {
   secondes = '0'+Math.round(tempsId % 60);
  }
  
  temps = minutes+':'+secondes;                             // On crée une chaîne de caractères avec les résultats
 }
 
 return temps ;    // On retourne la chaîne 
}






Je crois que le code est suffisamment expliqué, je peux donc passer à notre fonction changementTempsVideo

Code : JavaScript - Essayer le code - Sélectionner
Code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10


Code:
function changementTempsVideo(videoId, progressionId) //Appelée quand le temps de la vidéo change
{
 var video = document.getElementById(videoId);     //Pour la lecture du code
 var progression = document.getElementById(progressionId);
 progression.value = video.currentTime;       //La valeur de la barre est égal au moment de la vidéo

        moment = transformerTemps(video.currentTime);                 // On transforme le temps du moment de la vidéo
 duree = transformerTemps(video.duration) ;                   // On transforme le temps de la durée de la vidéo
 document.getElementById('temps').innerHTML = moment+'/'+duree ;        // On l'insère dans le div "temps"
}






Voilà pour la barre de progression et les commandes principales... On commence déjà à avoir un bon lecteur là
...

Aller plus loin

Qu'est-ce que vous pouvez faire pour améliorer votre lecteur ?
Tout d'abord, changer le css, car avec ce qu'on a fait, le design n'est pas superbe. Pour ceux qui connaissent JQuery, je vous conseille d'aller voir par ici. C'est un plugin de JQuery qui vous permettra d'améliorer vos <input type="range"/> et de les rendre compatibles Firefox ! C'est un peu compliqué à coder mais ça vaut le coup ...
Avec un peu (beaucoup) de travail, voilà ce que ça m'a donné ...



J'espère que ce tuto vous aura permis de créer de beaux lecteurs ... Si vous avez des questions ou que vous ne comprenez pas quelque chose, ou même pour me montrer ce que donnent vos lecteurs n'hésitez pas à m'envoyer des MP. 
 

_________________
fume avant que la vie te fume!


Revenir en haut
Publicité






MessagePosté le: Lun 24 Jan - 00:56 (2011)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet    KyloulGraph Index du Forum -> Formation -> Tutoriels et Astuces Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  

Index | créer forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Powered by phpBB © 2001, 2005 phpBB Group
Traduction par : phpBB-fr.com