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
| (function($){
var videos = [
{
src : [
'playlist/N1.mp4'
],
poster : 'src/img/n1.jpg',
title : 'Video 1'
},
{
src : [
'playlist/N2.mp4'
],
poster: 'src/img/n2.jpg',
title : 'Video 2'
},
{
src : [
'playlist/N3.mp4'
],
poster: 'src/img/n3.jpg',
title : 'Video 3'
},
{
src: [
'playlist/N4.mp4'
],
poster: 'src/img/n4.jpg',
title: 'Video 4'
},
{
src: [
'playlist/N5.mp4'
],
poster: 'src/img/n5.jpg',
title: 'Video 5'
}
];
var demoModule = {
init : function(){
this.els = {};
this.cacheElements();
this.initVideo();
this.createListOfVideos();
this.bindEvents();
this.overwriteConsole();
},
overwriteConsole : function(){
console._log = console.log;
console.log = this.log;
},
log : function(string){
demoModule.els.log.append('<p>' + string + '</p>');
console._log(string);
},
cacheElements : function(){
this.els.$playlist = $('div.playlist > ul');
this.els.$next = $('#next');
this.els.$prev = $('#prev');
this.els.log = $('div.panels > pre');
},
initVideo : function(){
this.player = videojs('video');
this.player.playList(videos);
},
createListOfVideos : function(){
var html = '';
for (var i = 0, len = this.player.pl.videos.length; i < len; i++){
html += '<li data-videoplaylist="'+ i +'">'+
'<span class="number">' + (i + 1) + '</span>'+
'<span class="poster"><img src="'+ videos[i].poster +'"></span>' +
'<span class="title">'+ videos[i].title +'</span>' +
'</li>';
}
this.els.$playlist.empty().html(html);
this.updateActiveVideo();
},
updateActiveVideo : function(){
var activeIndex = this.player.pl.current;
this.els.$playlist.find('li').removeClass('active');
this.els.$playlist.find('li[data-videoplaylist="' + activeIndex +'"]').addClass('active');
},
bindEvents : function(){
var self = this;
this.els.$playlist.find('li').on('click', $.proxy(this.selectVideo,this));
this.els.$next.on('click', $.proxy(this.nextOrPrev,this));
this.els.$prev.on('click', $.proxy(this.nextOrPrev,this));
this.player.on('next', function(e){
console.log('Next video');
self.updateActiveVideo.apply(self);
});
this.player.on('prev', function(e){
console.log('Previous video');
self.updateActiveVideo.apply(self);
});
},
nextOrPrev : function(e){
var clicked = $(e.target);
this.player[clicked.attr('id')]();
},
selectVideo : function(e){
var clicked = e.target.nodeName === 'LI' ? $(e.target) : $(e.target).closest('li');
if (!clicked.hasClass('active')){
console.log('Selecting video');
var videoIndex = clicked.data('videoplaylist');
this.player.playList(videoIndex);
this.updateActiveVideo();
}
}
};
demoModule.init();
})(jQuery); |
(
