Playlist vidéo erreur dans le code
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:
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.
