JS код
(function () {
var videos = [
{
src: [
'playlist/N1.mp4'
],
poster: 'src/img/n1.jpg',
title: 'Это видео про рыбок. Это видео про рыбок. Это видео про рыбок.'
},
{
src: [
'playlist/N2.mp4'
],
poster: 'src/img/n2.jpg',
title: 'Это очень длинное и нудное видео'
},
{
src: [
'playlist/N3.mp4'
],
poster: 'src/img/n3.jpg',
title: 'До чего же красива природа России'
},
{
src: [
'playlist/N4.mp4'
],
poster: 'src/img/n4.jpg',
title: 'это просто так. скачала откуда-то'
}
];
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="play">▶</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);
});
this.player.on('lastVideoEnded', function (e) {
self.updateActiveVideo.apply(self);
console.log('Last video has finished');
});
},
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);
