Comment modifier une vidéo ?

Version imprimable

Bonjour,

Actuellement dans une page web, j'ai ce code pour visualiser une vidéo :
Code:

1 2 3 4 5 6 7 <div class="centre"> <video width="640" height="420" controls="controls"> <source src="http://www.xxxxx.com/xxxxx.m4v" type="video/mp4"> 'Vidéo 1' <source src="http://www.xxxxx.com/xxxxx.m4v" type="video/mp4">'Vidéo 2' <span style="color: #7A7A00; ">Votre navigateur n'est pas assez récent pour lire cette vidéo !</span> </video> </div>
Est-il possible d'avoir un bouton ou case d'option afin que je puisse choisir la vidéo 1 ou la vidéo 2 que je veux visualiser ?
J'ai fouillé sur Google, mais n'ai pas trouvé quelque chose de satisfaisant...
D'avance, merci.

Il y a du codage sur mesure que les quelques modérateurs experts du forum peuvent donner.
C'est possible aussi de partir d'un diaporama ou slider JS et de rajouter des vidéo dedans.

Grosso modo cela donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div class="container"> <div id="slides"> <img src="img/example-slide-1.jpg" alt="Photo by"> <img src="img/example-slide-2.jpg" alt="Photo by"> <img src="img/example-slide-3.jpg" alt="Photo by"> <img src="img/example-slide-4.jpg" alt="Photo by"> <div id='fa'> <a href="https://youtu.be/26Nuj6dhte8" target="blank">YOUTUBE : Georges Brassens - La Mauvaise Réputation 1952 </a><br> <img src="img/example-slide-28.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/"> <br> Fin de SlidesJS<br><br> </div> <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a> <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a> </div> </div>
Ici container passe un lien vers une vidéo après example-slide-4.jpg
Le button on/off qui fait tout n'est pas le plus rapide à programmer !

07/05/2017, 19h03
momongana

Re Bonjour,

Merci de votre réponse rapide... Mais je ne suis pas assez expert pour comprendre votre code...
Un code en javascript m'irait beaucoup mieux... Si c'est possible bien sur !
De plus, je créé moi-même mes vidéos... donc pas de YouTube. Elles sont sur mon serveur.
Merci quand même de votre obligeance.
08/05/2017, 08h29
Invité

Bonjour,

À voir :

Html5 Video selection avec OnMouseOver

:salut:

Le tag source sert uniquement pour proposer plusieurs formats vidéo alternatifs, voir : https://developer.mozilla.org/fr/doc.../Element/Video.

Il faut modifier l'attribut source du tag vidéo, exemple :

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
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    label {
      display: block;
    }
  </style>
  <script>
    'use strict';
    
    document.addEventListener( "DOMContentLoaded", ev => {
      
    }, false );
    
    window.addEventListener( "load", ev => {
      
      const
        elemVideo = document.querySelector( "#testVideo" );
        
      document.querySelector( "#selectVideo" ).addEventListener( "change", ev => {
        elemVideo.pause();
        elemVideo.setAttribute( "src", ev.target.value );
      }, false );
            
    }, false );
  </script>
</head>
<body>
  <main>
 
    <video id="testVideo" width="480" controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">
      Votre navigateur ne permet pas de lire les vidéos HTML5.
    </video>
 
    <label>Changer la vidéo : <select id="selectVideo">
      <option selected value="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">webmvp8_512kb.mp4</option>
      <option value="http://techslides.com/demos/sample-videos/small.mp4">small.mp4</option>
      <option value="https://ia800203.us.archive.org/13/items/VideoSample-Video3/ArchitectVideo_512kb.mp4">ArchitectVideo_512kb.mp4</option>
    </select></label>
 
  </main>
</body>
</html>

09/05/2017, 09h33
momongana

Bonjour,

Super !
Exactement ce que je recherchais...
Un grand merci à tous ceux qui m'ont répondu.
Bien à vous.