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

Version imprimable

10/12/2014, 08h35
marsouin_89

Démarrer une vidéo à partir d'une sélection dans une liste
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:

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:

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.
11/12/2014, 12h48
johnlobs

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.
11/12/2014, 21h43
marsouin_89

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

Bonsoir,

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

Code:

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:

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>

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:

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

$(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:

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>  <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 !!:D
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.

15/12/2014, 09h03
marsouin_89

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. :aie:

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.