PARSOFLEX

Sans 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:

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" />

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>

puis apportons quelques modifications à notre fichier javascript. J’utilise Jquery pour celà mais vous êtes entièrement libre de procéder autrement.
Commençpns par le bouton play

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>

Je place mon écouteur sur le click du bouton play [$(« .playButton »)] dans le fonction success de mon objet
je teste si la video est en pause (media.paused) si c’est le cas je la relance et change le texte du bouton si ce n’est pas le cas je la met en pause et change aussi le texte du bouton.
L’objet media peut faire référence a l’élément HTML video ou à une API qui permet de dialoguer avec le plugin qui mime son comportement pour les navigateurs ne comprenant pas la balise video.
Je peux faire de même avec mes deux autres boutons

1
2
3
4

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

Nous nous contentons d’utiliser (en apparence au moins) les méthodes natives de l’élément video du HTML5 et peu importe que le navigateur les comprenne nativement ou non.