Catégorie : html5

video -HTML5- la librairie mediaelement.js

L’élément video du HTML5 permet d’intégrer un player video directement dans le code HTML comme img permet d’intégrer une image

Fantastique, terminé le Flash. Allez hop la video directement intégrée à ma page en tapant juste :

<video width="400" height="200" src="mavideo.mp4"></video>

Mais non, pas si simple 🙂
Premièrement tous nos chers navigateurs ne comprennent pas forcément le HTML5 et ses nouveaux tags magiques, video entre autres
Parlez en à IE7 ou IE8 ils vous diront ce qu’ils en pensent, il en va de même pour un bon nombre de navigateurs.

Pour vous en convaincre allez faire un tour sur ce site : http://html5test.com/, qui vous donnera une petite idée de ce que votre navigateur comprend au HTML5.

si vous utilisez IE7 vous obtenez quelque chose comme ça :

compatibiliteIE7

Oups …. Arrrg ! direz vous . C’est pas gagné . Faites le même test avec Chrome ça vous redonnera confiance en l’avenir 🙂

compatibiliteIChrome

Donc il y’a un premier souci mais peut être vous direz vous que vous vous fichez des vieux machins et que vous êtes résolument tourné vers l’avenir.. C’est alors qu’arrivera le second souci : le CODEC . Même si les choses tendent à se normaliser tous les navigateurs (voir suivant l’OS qui les supporte) ne lisent pas les même formats.

firefox par exemple supporte le H264 depuis le version 21 sur Vista et la version 25 sur mac :

Firefox does not natively support MP4 format. Instead it depends on the underlying OS or hardware codec. If you want to play MPEG4 videos, the minimum version required is version 21 for Windows 7, 22 (Windows Vista), 20 (Android), 15 (Firefox OS).

si le sujet vous intéresse voici quelques liens :

l’idée n’étant pas ici de décrire la balise video ni ses modalités d’utilisation je ne m’étendrais pas plus sur le sujet. Retenons juste que si je veux être certain de faire plaisir à tout le monde je vais devoir encoder 3 fois mes vidéos en H264/mpeg4, Ogg Theora et webm afin de pouvoir faire un truc comme ça :

<video width="400" height="200" controls="controls">
  <source src="mavideo.mp4" type="video/mp4" />
  <source src="mavideo.webm" type="video/webm" />
  <source src="mavideo.ogv" type="video/ogg" />
   une alternative pour les navigateurs ne comprenant pas le HTML5
</video>

Je ne sais pas pour vous, moi ça m’a vite fait regretter Flash, mais comme je voulais jouer ma vidéo sur Ipad et que flash lui colle des boutons il a fallu en passer par là.
Le plus drôle étant que l’alternative utilisée en général par les vieux navigateurs reste encore …. Flash.

HTML5 & mpg4 sinon … Flash | Silverlight

Pour commencer je vous invite à voir ce premier exemple:

premier exemple >>

rien d’exceptionnel en soit mais l’on peu déjà constater que nous réglons nos problème de compatibilité HTML5 et que cet exemple n’utilise qu’une source vidéo au format mp4 et que ça fonctionne quelque soit le navigateur ou le device utilisé. Vous pouvez voir cette vidéo sur votre IPAD en mode natif (puisqu’il s’agit de HTML5 et du CODEC qui lui convient) mais aussi avec toutes le versions de firefox, opéra ou d’Internet Explorer (qui lui ne digère le HTML5 qu’à partir de sa V.9).

Et c’est là que cela devient intéressant, plus d’encodage multiple et une double solution de fallBack pour les vieux navigateurs (Flash ou SilverLight).

Si vous voulez essayer il va vous falloir

  • récupérer mediaelements.js : ici >>
  • le décompresser sur votre machine
  • vous rendre dans le dossier où vous l’avez décompréssé
  • copier le contenu du répertoire build et le coller dans un dossier créé à cet effet dans l’arborescence de votre site(js/libs/MediaElement par exemple)

puis, créer une nouvelle page html et ajouter les lignes suivantes :

1
2
3
<script type="text/javascript" src="js/libs/MediaElement/jquery.js" />
<script type="text/javascript" src="js/libs/MediaElement/mediaelement-and-player.js">
<link href="js/libs/MediaElement/mediaelementplayer.min.css" rel="stylesheet" />

puis ajouter votre balise VIDEO ou vous le souhaitez

1
2
3
4
5
6
<video  id='player1' 
   src="chemin_video/nomVideo.mp4"
   width='100%' 
   height: "100%"
  style="width: 100%; height: 100%;max-width:100%;"
</video>

puis créez un fichier javascript script.js et collez y les lignes suivantes:

1
2
3
4
$(document).ready(function() {
var player = new MediaElementPlayer('#player1');
// player1 correspond ici à l'id de l'elementvideo
	});

enfin appelez votre script en bas de votre page HTML

1
<script src="chemin_du_script_js/nom_du_script.js"></script>

Bien normalement votre video se jouera très bien sur Ipad, firefox, chrome, opera … et même sur IE7 🙂

noControlSans contrôle … mais contrôlé

Si la barre de contrôle ne vous plait pas mediaelement vous permet de la ré-habiller avec vos propres styles mais, si comme moi vous souhaitez utiliser vos propres éléments de contrôle (boutons, slider, liens,…) le plus simple selon moi est de la supprimer et d’utiliser vos propres composants pour interagir avec le player.

Et c’est là que c’est très fort, parce que même dans le cas des navigateurs utilisant des plugin de fallBack flash ou silverLight vous pouvez utiliser des éléments HTML pour manipuler le video et donc de causer avec ces plugins.

par exemple >> ici j’ai supprimmé la barre de contrôle native et ajouté mes propres boutons.

Dans un but de simplification je ne présenterais ici que les boutons play/pause/stop et Mute, si j’ai le temps je reviendrais sur les autres éléments de contrôle ultérieurement (la slideBae et les info du timer, le contôle du son…)
Pour commencer reprenons notre script javascript et supprimons les contrôles proposés par mediaelement.js .
Mon approche peut sembler brutale sachant que mediaelement.js propose d’utiliser votre propre feuille de style . Si cette solution vous intéresse je vous laisse regarder cette page

Cette solution ne me convenait pas me contraignant à utiliser les éléments natifs su player alors que je souhaitais avoir une totalr liberté sur le fonctionnement et ne pas me limiter à un ré-habillage de l’existant.

pour supprimer la barre de contrôle et tout son contenu entrez les lignes suivante:

var player = new MediaElementPlayer('#player1',
 {                success: function(media, node, player) {
                    $(".mejs-controls").remove();
                    $('.mejs-overlay').remove();
                }
                });

C’est sur, c’est radical 🙂 et maintenant nous n’avons plus du tout de contrôle sur la video. Il faut donc ajouter nos propres boutons dans la page

<button type="submit" name="play">play</button> <button name="STOP" type="submit">stop</button> <button name="MUTE" type="submit">muet</button> ...lire la suite