<< Retour au sommaire

 

HTML 5, le streaming vidéo

 

 

 

Le streaming est une technologie qui permet de lire une vidéo en ligne.

Mais contrairement à la nouvelle balise <video> du HTML 5 qui utilise le lecteur « Flash Player » installé sur votre machine, les lecteurs que je vais vous proposer ici dans ce manuel doivent être installés dans votre site en ligne.

 

Le principe est simple !

Lorsque votre navigateur charge une page WEB contenant une vidéo, le lecteur de votre site débute la lecture de la vidéo est vous envoie les images et le son à fur et à mesure de sa lecture. Le navigateur n’est donc pas obligé de charger entièrement la vidéo avant d’en débuter la lecture…

 

Le lecteur que voici permet de lire les vidéos au format MP4, il s’intitule « Media Player ».

 

Télécharger Media Player >>

 

Dans ce dossier, vous trouverez les éléments suivants :

1.     Le fichier « player.swf », il s’agit du lecteur lui-même ;

2.     Les fichiers « jwplayer.js » et « swfobject.js », ce sont des fichiers Javascript complémentaires ;

3.     Le fichier « preview.jpg », il s’agit d’une image affichée dans le lecteur en attendant le démarrage de la vidéo ;

4.     Et enfin, le fichier « Code du lecteur MP4 mediaplayer-5.7.txt », il contient le code HTML que vous devez placer dans la page, à l’endroit exact où doit être affichée la vidéo.


Voici le code, nous allons l’étudier :

 

<!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE -->

            <div id="mediaplayer">JW Player goes here</div>

<script type="text/javascript" src="jwplayer.js"></script>

            <script type="text/javascript">

                       jwplayer("mediaplayer").setup({flashplayer: "player.swf",

file: "video.mp4",

autostart: true,

volume: 100,

image: "preview.jpg"});

            </script>

           

La description :

·        « file :”, doit recevoir en paramètre le nom de la vidéo, ici à titre d’exemple, le fichier spécifié est “video.mp4 » ;

·        « autostart : », peut recevoir deux propriétés, « true » si vous souhaitez que la vidéo soit jouée à l’ouverture de la page, et « false » dans le cas contraire ;

·        « volume : », permet d’exprimer le volume, 100 étant le volume naturel de la vidéo.

·        « image : », permet de spécifier l’image qui doit être affichée en attendant que la vidéo soit lancée, il s’agit donc d’une image de prévisualisation. Ici, l’image spécifiée est « preview.jpg ».

 

Tester un exemple en ligne >>

 

Télécharger un modèle complet avec couleurs et images >>

 

Philippe BOULANGER