Playlist vidéo erreur dans le code

**DEVLYNE** · 19/01/2015, 21h26

Bonjour.

Tout d'abord sachez que mes conaissances en javascript sont vraiment très limitées.
Mon objectif est d'obtenir une playlist avec la balise vidéo d'html 5 pour obtenir ceci:

http://codepen.io/dudleystorey/pen/vnedg

Sachez que j'ai recopié le code comme ceci:

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
 
<style type="text/css" title="text/css">
 
 
body { background: #222; }
#video_player { 
  display: table; line-height: 0;
  font-size: 0; background: #000;
  max-width: 1000px;
  margin: 0 auto;
}
#video_container { 
  position: relative;
}
#video_player div, #video_player figcaption { 
  display: table-cell;
  vertical-align: top; 
}
#video_container video { 
  position: absolute; 
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
}
#video_player figcaption { width: 25%; }
#video_player figcaption a { display: block; }
#video_player figcaption a { 
  opacity: .5;
  transition: 1s opacity; 
}
#video_player figcaption a img, figure video { 
  width: 100%; height: auto; 
}
#video_player figcaption a.currentvid, #video_player figcaption a:hover, #video_player figcaption a:focus { opacity: 1; }
@media (max-width: 700px) {
  #video_player video, #video_player figcaption { 
    display: table-row; 
  }
#video_container { padding-top: 56.25%; }
#video_player figcaption a { 
  display: inline-block; width: 33.33%; 
}
}
 
 
</style>
 
 <script type="text/javascript">
 
var video_player = document.getElementById("video_player");
video = video_player.getElementsByTagName("video")[0],
video_links = video_player.getElementsByTagName("figcaption")[0],
source = video.getElementsByTagName("source"),
link_list = [],
vidDir = "http://demosthenes.info/assets/videos/",
currentVid = 0,
allLnks = video_links.children,
lnkNum = allLnks.length;
video.removeAttribute("controls");
video.removeAttribute("poster");
 
(function() {
function playVid(index) {
 video_links.children[index].classList.add("currentvid");
    source[0].src = vidDir + link_list[index] + ".webm";  
        source[1].src = vidDir + link_list[index] + ".mp4";
    currentVid = index;
    video.load();
        video.play();
}
 
for (var i=0; i<lnkNum; i++) {
var filename = allLnks[i].href;
link_list[i] = filename.match(/([^\/]+)(?=\.\w+$)/)[0];
(function(index){
        allLnks[i].onclick = function(i){
        i.preventDefault();  
                for (var i=0; i<lnkNum; i++) {
                allLnks[i].classList.remove("currentvid");
                }
                playVid(index);
        }    
    })(i);
}
video.addEventListener('ended', function () {
    allLnks[currentVid].classList.remove("currentvid");
    if ((currentVid + 1) >= lnkNum) { nextVid = 0 } else { nextVid = currentVid+1 }
    playVid(nextVid);
})
 
video.addEventListener('mouseenter', function() {
    video.setAttribute("controls","true");
})
 
video.addEventListener('mouseleave', function() {
    video.removeAttribute("controls");
})
 
var indexOf = function(needle) {
    if(typeof Array.prototype.indexOf === 'function') {
        indexOf = Array.prototype.indexOf;
    } else {
        indexOf = function(needle) {
            var i = -1, index = -1;
                        for(i = 0; i < this.length; i++) {
                if(this[i] === needle) {
                    index = i;
                    break;
                }}
            return index;
        };}
    return indexOf.call(this, needle);
};
        var focusedLink = document.activeElement;
        index = indexOf.call(allLnks, focusedLink);
        
document.addEventListener('keydown', function(e) {
if (index) {
        var focusedElement = document.activeElement;
    if (e.keyCode == 40 || e.keyCode == 39) { // down or right cursor
    var nextNode = focusedElement.nextElementSibling;
    if (nextNode) { nextNode.focus(); } else { video_links.firstElementChild.focus(); }
    }
   if (e.keyCode == 38 || e.keyCode == 37) { // up or left cursor
    var previousNode = focusedElement.previousElementSibling;
    if (previousNode) { previousNode.focus(); } else { video_links.lastElementChild.focus(); }
    }
 }
});
 
})();  
 
</script>
</head>
 
<body>
 
<figure id="video_player">
  <div id="video_container">
  <video controls poster="http://demosthenes.info/assets/images/vid-glacier.jpg">
    <source src="http://demosthenes.info/assets/videos/glacier.webm" type="video/webm">
    <source src="http://demosthenes.info/assets/videos/glacier.mp4" type="video/mp4">
</video>
</div>
<figcaption>
  <a href="http://demosthenes.info/assets/videos/glacier.mp4" class="currentvid">
    <img src="http://demosthenes.info/assets/images/vid-glacier.jpg" alt="Athabasca Glacier">
  </a>
  <a href="http://demosthenes.info/assets/videos/lake.mp4">
    <img src="http://demosthenes.info/assets/images/vid-lake.jpg" alt="Athabasca Lake">
  </a>
  <a href="http://demosthenes.info/assets/videos/mountain.mp4">
    <img src="http://demosthenes.info/assets/images/vid-mountain.jpg" alt="Mountain">
  </a>
</figcaption>
</figure>
 
</body>
 
</html>

Le truc est que quand je clique sur l'une des images la vidéo se lance sur une nouvelle page au lieu de se lancer dans le lecteur vidéo et je pense vraiment que la personne qui a écrit ce code a oublié quelque chose; enfin je ne fais que supposer.

Je doute que l'erreur se situe dans le code html et encore moins dans le css et le javascript est vraiment ce que je maitrise le moins. Peut etre aussi que j'ai fait une erreur monumentale quelque part ?

Merci beaucoup pour toute aide apportée car j'ai cherché quelque chose de simple pour obtenir une playlist mais même là je n'y arrive pas....

Et bonne année à tous.

**kakashi99** · 20/01/2015, 11h18

Salut,

d'abord un petit conseil, quand tu fais du dev web et surtout du javascript affiche toujours la console du navigateur (la touche F12).

dans le js tu as ça

Code :

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

var video_player = document.getElementById("video_player");

alors que l'élément html n'est pas encore créé, donc ça plante ^^

soit tu mets toute ta balise <script> à la fin de ton body (comme ça le javascript est éxécuté une fois que l'html à été généré), soit tu utilise jquery et tu mets tout le code javascript dans la fonction ready.

Code :

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

1
2
3
4
 
$(document).ready(function() {
//ton code ici
})

Playlist vidéo erreur dans le code

JavaScript

Discussions similaires

Partager

Partager