PARSOFLEX

Le choix du programme

Et oui, maintenant j’aimerais bien choisir mon film, parce que les pop corn c’est bon à l’entracte mais …

Pas de problème, mediaelement nous permet de changer la source de la vidéo comme dans

l’exemple suivant >>

pour commencer nous allons ajouter une liste déroulante avec nos vidéos dans la page HTML

<form class="form-inline">
   <label>selectionnez une video
     <select class="input-large" id='listeVideo'>
       <option selected="">choisir un film</option>
       <option value='assets/media/big_buck_bunny.mp4'>Big Buck Bunny</option>
       <option value="assets/media/pop.mp4">Pop Corn</option>
       <option value="assets/media/echo-hereweare.mp4">echo hereweare</option>
     </select>
  </label>
</form>

puis reprendre notre script et ajouter un écouteur sur notre liste en utilisant la méthode on de Jquery sur événement change diffusé à chaque changement de sélection,

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

nous disons ainsi à l’élément qui a l’id listeVideo (notre liste) de ‘faire quelque chose ‘ lorsque l’on change la sélection. Dans notre cas le quelque chose pourrait ressembler à ça :

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>

e.currentTarget correspond ici à notre liste ayant répondu à l’événement ‘change‘ et dont la valeur est la valeur de l’option sélectionnée ( le chemin et le nom de la video ex: assets/media/pop.mp4)

puis à l’aide de la méthode setSrc nous passons cette valeur à notre objet media ainsi

1
2
3
4

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

nous utilisons un objet JSON contenant 2 attributs : src et type le type est ici toujours le même puisque nous n’utilisons que des videos au format mpg4 et src (la source) correspond à la valeur que nous venons de récupérer pour finir nous chargeons le vidéo.

Vous remarquerez que la zone d’affichage présente un simple rectangle noir (parfois la première image de la video).

Si l’on souhaite afficher une image avant que la video ne se joue on utilisera un autre attribut : poster en lui passant le nom de l’image à utiliser.

Le plus simple est de créer une image par video portant le même nom que cette dernière (pop.jpg, big_buck_bunny,jpg,…) et de renseigner l’attribut poster avant l’appel à la méthode setSrc

1

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

premièrement nous découpons  la valeur de l’option en utilisant le caractère ‘.’ de façon à récupérer un tableau. par exemple la chaine assets/media/pop.mp4″> donnera un tableau contenant :
tableau[0] = assets/media/pop
tableau[1] = mp4
comme mes images se trouvent dans le même dossier que mes vidéos je ne suis pas géné par le chemin présent dans le tableau (assets/media) s’il en avait été autrement il aurait fallu supprimer cette chaine de caractère pour ne récupérer que le nom.
var poster=value[0]+’.jpg’;
enfin nous renseignons l’attribut poster de notre élément video ($(‘#player1’)) en utilisant la méthode attr de Jquery.
$(‘#player1’).attr(‘poster’,poster)
vous aurez peur être remarqué l’appel ) la fonction tooglePlay(). Il s’agit juste d’une fonction permettant de changer le texte du bouton play/pause que nous pourrons utiliser à différents endroits (lors du clic sur le bouton, lors du changement de vidéo,…) et que nous allos ajouter dans la méthode ‘success‘

function tooglePlay(){
	if(!media.paused){
		$(".playButton").html('pause')

	}else{
		 $(".playButton").html('play')

	}
}

Il s’agit de la méthode déja utilisée dans le bouton play/pause … soyons DRY 🙂

Pour résumer voici le code complet de notre script

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

jQuery(document).ready(function($) {
 
var player = new MediaElementPlayer('#player1',
 {
                success: function(media, node,player) {
                    $(".mejs-controls").remove();    
                    $('.mejs-overlay').remove();
                    $(".playButton").on("click", function(e) {
                        if(media.paused){
                          media.play()
                         }else{
                         media.pause()
                         }
                         tooglePlay()
                    });    
                    $(".stopButton").on("click", function() {
 
                    media.currentTime=0;
                    media.pause()    
                    tooglePlay()
                                        })    
                    $(".muteButton").on("click", function(e) {
 
                        if(!media.muted ){
                            $(".muteButton").html('sonorise')
                            media.setMuted(true)    
                        }else{
                            $(".muteButton").html('muet')
                            media.setMuted(false)        
                        }
 
                    })
                    $('#listeVideo').on('change',function(e) {
                        var param = e.currentTarget.value;
                        var value = param.split('.')
                        var poster=value[0]+'.jpg';
 
                       $('#player1').attr('poster',poster)
                        media.setSrc([ {src:e.currentTarget.value, type:'video/mp4'} ]);
                        media.load()
                        tooglePlay()
                        });
 
                    function tooglePlay(){
                        if(!media.paused){
                        $(".playButton").html('pause')
 
                         }else{
                         $(".playButton").html('play')
 
                         }
                    }
 
                } // fin success
                });
 
    });