Démarrer une vidéo à partir d'une sélection dans une liste

**marsouin_89** · 10/12/2014, 08h35

Bonjour à tous,

N'étant pas particulièrement à l'aise en HTML, je me permet de venir vers vous.

Je souhaiterais pouvoir lancer une vidéo à partir d'une sélection dans une liste.

Je sais comment définir une liste.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<select NAME="Liste" Id="VideoName">
	<option value="Video01.MP4">Vidéo 1</option>
	<option value="Video02.MP4">Vidéo 2</option>
</select>

Je sais comment ajouter un objet vidéo.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<object type="video/x-msvideo" width="500" height="400">
	<param name="filename" value="Video01.MP4"/>  
</object>

J'aimerais donc, lorsque je clique sur le bouton de lancement de la vidéo, que cette vidéo soit celle définie à partir de ma liste, soit, que la valeur de "value" de l'objet vidéo puisse être dynamique.

**johnlobs** · 11/12/2014, 12h48

Bonjour,

Tu pourrais aller voir la balise vidéo (html5).
Tu devra aussi inclure un événement "onclick" dans ta liste.
Enfin tu t'occupe du CSS en fonction de ton besoin (faire apparaître la vidéo dans une zone précise ou encore uniquement déclencher la lecture de la vidéo déjà visible).
Concernant le fait que la vidéo soit dynamique,il suffira uniquement d'affecter la valeur adéquate (il faudra bien sur avoir un id pour ta video) grâce à jquery ou en javascript.
Bon courage.

**marsouin_89** · 11/12/2014, 21h43

Bonsoir,

Tout d'abord, merci de t'interresser à mon sujet.

Pour le CSS, je ne m'inquiète pas, je devrais arriver à mes fins.
Cependant, c'est pour le reste que je coince totalement malgré mes nombreuses recherches.

Lancer une fonction sur onchange, je sais faire, mais comment faire reconnaître au contrôle vidéo le changement de source vidéo ?

Merci de votre aide

**lysandro** · 12/12/2014, 00h54

Bonsoir,

C'est assez "bourrin" mais en attendant une meilleure proposition ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html>
  <head>
    <script>
      function createVideo ( videoURL ) {
        var fragment = document.createElement("div");
 
        var object = document.createElement("object");
        object.id     = "video";
        object.type   = "video/x-msvideo";
        object.width  = "500";
        object.height = "400";
 
        fragment.appendChild(object);
 
        var param   = document.createElement("param");
        param.name  = "filename";
        param.value = videoURL;
 
        object.appendChild(param);
 
        return fragment;
      }
      window.addEventListener('load', function onload ( event ) {
        var cboVideo = document.getElementById("cboVideo");
 
        cboVideo.addEventListener('change',function onchange ( event ) {
          var video  = document.getElementById("video"),
              parent = video.parentNode;
          parent.replaceChild(createVideo(cboVideo.value).firstChild,video);
        },false );
 
      },false );
    </script>
  </head>
  <body>
    <select id="cboVideo">
      <option value="video1.mp4">Vidéo 1</option>
      <option value="video2.mp4">Vidéo 2</option>
    </select><br>
    <script>document.write(createVideo(document.getElementById('cboVideo').value).innerHTML)</script>
  </body>
</html>

on se contente de recréer la balise object à chaque changement dans la sélection.

edit: La même chose mais en plus "basique/portable" ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html>
  <head>
    <script>
      function createVideoAsHTML ( videoURL ) {
        var html = '<'+'object type="video/x-msvideo" width="500" height="400">'
                   + '<'+'param name="filename" value="'+videoURL+'">'
                   + '<'+'/object>';
        return html;
      }
      function cboVideo_onChange ( event ) {
        var video = document.getElementById("video");
        video.innerHTML = createVideoAsHTML((event.target||event.srcElement).value);
        return true;
      }
    </script>
  </head>
  <body>
    <select id="cboVideo" onchange="return cboVideo_onChange(event||window.event)">
      <option value="video1.mp4">Vidéo 1</option>
      <option value="video2.mp4">Vidéo 2</option>
    </select><br>
    <div id="video">
      <script>document.write(createVideoAsHTML(document.getElementById('cboVideo').value))</script>
    </div>
  </body>
</html>

**johnlobs** · 12/12/2014, 16h40

Bonjour,

je pense que j'ai du mal m'exprimé;en fait pour commencer et faisant abstraction des navigateurs,la balise vidéo te simplifie les choses;tu peux modifier la source de la vidéo facilement avec du jquery :
une première recherche me donne cela et ça a l'air d’être correcte;ça te montre comment changer la source d'une vidéo et comment déclarer un vidéo.
Il faut noter que tu peux utiliser

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<video id='videoPlayer' src=" " width="320" height="240" controls="controls">

mais dans ce cas tu ne t’intéresses pas au navigateur il est donc préférable d'utiliser la balise <source> pour gérer les différents formats pour une même vidéo et le jquery pour modifier le contenu de "src" qui correspond à la source de ta vidéo(comme tu le verra plus bas, la différence entre les deux balises source est le format mp4 ou bien ogg) et pour changer la source il faut utiliser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(idadequat).attr('src', "/path/newVideo.mp4");

Je pense que le code suivant resume tout ca et est assez simple donc je pense que c'est pas la peine de faire compliqué quand on peut faire très simple.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html>
  <body>
    <video id='videoPlayer' width="320" height="240" controls="controls">
       <source id='mp4Source' src="movie.mp4" type="video/mp4" />
       <source id='oggSource' src="movie.ogg" type="video/ogg" />
    </video>
 
<!-- You MUST give your sources tags individual ID's for the solution to work. -->
 
    <script>
      var player = document.getElementById('videoPlayer');
 
      var mp4Vid = document.getElementById('mp4Source');
 
      player.pause();
 
      // Now simply set the 'src' attribute of the mp4Vid variable!!!!
      // (...using the jQuery library in this case)
 
      $(mp4Vid).attr('src', "/pathTo/newVideo.mp4");
 
      player.load();
      player.play();
    </script>
  </body>
</html>

Enfin le code jquery avec le $ tu dois le rattacher à un événement qui dans ton cas sera "onclick" sur un lien de ta liste...
J'espère avoir été assez clair et t'avoir été d'un quelconque intérêt !!

tu as de quoi t'amuser avec tout ça et surtout "tester" les dev sur differents navigateurs et si besoin inclure une reconnaissance de navigateur etc...

Bon courage.

**marsouin_89** · 15/12/2014, 09h03

Bonjour,

Vraiment un grand merci à vous deux pour le temps que vous avez passé à me faire ces codes.
Vous n'imaginez pas l'épine que vous m'enlevez du pied.

Désolé johnlobs, mais je ne maitrise pas l'emploi du jquery, je resterais donc simplement sur du HTML et JS.

lysandro : ton code fonctionne parfaitement.

Je vous souhaite de bonne fêtes de fin d'année ainsi qu'à vos familles.

Démarrer une vidéo à partir d'une sélection dans une liste

JavaScript

Discussions similaires

Partager

Partager