Comment modifier une vidéo ?

**momongana** · 07/05/2017, 17h08

Bonjour,

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

Code :

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

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.

bm · 07/05/2017, 17h48

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 :

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

**momongana** · 07/05/2017, 19h03

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.

Invité · 08/05/2017, 08h29

Bonjour,

À voir :

Html5 Video selection avec OnMouseOver

**danielhagnoul** · 08/05/2017, 11h31

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

**momongana** · 09/05/2017, 09h33

Bonjour,

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

Comment modifier une vidéo ?

JavaScript

Discussions similaires

Partager

Partager