jplayer_min


IPlajer - очень хороший плагин проигрывателя видео и аудио записей. Но если нужен плейлист для видео с картинками (постерами) в списке плейлиста, то с версией из коробки у вас ничего не выйдет. Там выводится только названия видео треков. Для того, чтобы добавить миниатюру к трекам в плейлист, нужно немного подшаманить файл jplayer.playlist.min.js. Скачайте архив jPlayer-2.9.2.zip c официального сайта http://jplayer.org/ и найдите в нем jplayer.playlist.min.js. Затем прогоните его через декомпрессор, чтоб удобнее было редактировать. Online decompressor - ссылка для онлайн декомпрессора. А затем добавьте в скрипт строки для создания опции миниатюра к треку.
Где-то в 66 строке найдите

1
removeItemClass: "jp-playlist-item-remove",

и вставьте следом

1
thumbItemClass: "jp-playlist-item-thumb";

Затем найдите (примерно строка 114)

1
_createListItem: function(b) { var c = this,

и вставьте следом

1
 thumbs = '';  if (b.thumb) {thumbs = b.thumb;};

А строчку (примерно 127 строка)

1
2
3
return d += "<a class="" + this.options.playlistOptions.itemClass + "" tabindex="0">" + b.title + (b.artist ? " <span class="jp-artist">by " + b.artist + "</span>" : "") + "</a>", d += "

"

заменить на

1
2
3
return d += "<a class="" + this.options.playlistOptions.itemClass + "" tabindex="0">" + b.title + (b.artist ? " <span class="jp-artist">by " + b.artist + "</span>" : ""), d += "<img class="" + this.options.playlistOptions.thumbItemClass + "" src="" + thumbs + "" />", d += "</a>

"

А когда вы будете формировать опции плейлиста javascript теперь уже можно использовать выше созданную вами опцию  thumb: "http://test/cyti-1.png",  которая добавляется к ранее существовавшим

1
2
3
4
5
6
{title: "Title1",
artist: "",
m4v: "http://test/cyti_1.mp4",
thumb: "http://test/cyti-1.png",
poster: "http://test/cyti-1.png",
},

Demo
Download

Translate »
Рейтинг@Mail.ru Яндекс.Метрика