Как создать такой плейлист

ребята помогите пожалуйста как можна создать такой плейлист ?

 

Плейлист для видео VKontakte с разделением на серии и сезоны в одном плеере » Мир шаблонов популярных CMS | OpenCart | DLE | Landing page | Лендинги

 

недоскрипт от этого Конструктор видео v3.x для dle - по крайней мере стиль там есть точно такой же, как и на скрине описания упомянутой ссылки.

видеоконуктор рулит, только вот список править надо будет уже под ТС, т.к. в многообразии скинов нет такого, который бы выводил инфу так, как нужно это ТС.

 

установил ну вот что получилось
в чем можете быть проблема?

Спойлер: вот css

#player-vk-write { background:#101010; margin:auto; width:610px; -moz-border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; border:1px solid #676767; position:relative; font-size:12px; }
#player-vk-player { background:#000000; margin:0px auto; width:100%; height:372px; clear:both; }
#player-vk-season, #player-vk-serial { margin:0px auto; padding:0px; width:530px; height:40px; list-style:none; overflow:hidden; white-space:nowrap; position:relative; }
#player-vk-season li, #player-vk-serial li { list-style:none; float:left; height:30px; padding-top:4px; cursorointer; position:absolute; }
#player-vk-season li span, #player-vk-serial li span { background:#010101; display:inline-block; text-align:center; width:60.25px; line-height:22px; margin:4px 2px; -moz-border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; color:#FFF; border:1px solid #676767; }
#player-vk-season li span:hover, #player-vk-serial li span:hover { background:#4091b8; }
#player-vk-write .active { background:#1b6e8b; }
#player-vk-write .prev { background: url("../images/prev.png") 0 0 no-repeat; line-height:0px; outline:none; font-size:0px; width:24px; height:24px; display:block; position:absolute; left:5px; top:8px; }
#player-vk-write .prev:hover { background: url("../images/prev1.png") 0 0 no-repeat;}
#player-vk-write .next { background: url("../images/next.png") 0 0 no-repeat; line-height:0px; outline:none; font-size:0px; width:24px; height:24px; display:block; position:absolute; right:5px; top:8px; }
#player-vk-write .next:hover { background: url("../images/next1.png") 0 0 no-repeat;}
#player-vk-write .prev1 { background: url("../images/prev.png") 0 0 no-repeat; line-height:0px; outline:none; font-size:0px; width:24px; height:24px; display:block; position:absolute; left:5px; bottom:8px; }
#player-vk-write .prev1:hover { background: url("../images/prev1.png") 0 0 no-repeat;}
#player-vk-write .next1 { background: url("../images/next.png") 0 0 no-repeat; line-height:0px; outline:none; font-size:0px; width:24px; height:24px; display:block; position:absolute; right:5px; bottom:8px; }
#player-vk-write .next1:hover { background: url("../images/next1.png") 0 0 no-repeat;}

 

нажимаешь f12 и ищешь стили, которые отвечают за цвет кнопок и цвет текста на кнопках. На многих шаблонах уже встречал такое, но точные классы, которые там используются не могу сказать, т.к. надо смотреть всё на реальном сайте.

 

Я только что сам скачал его и проверил. Все работает на 5+ (только файл js перекодировал в utf-8)

 

я установил работает нормально
помогите пожалуйста какой код отвечать за перемоткой серии кокда нажиманию на некст перематаиестся 10 серии сразу как изменить по 2 серии
вот js код

Код:

var pos = 0;
var poz = 0;
var sea = null;
var width = 530;
var vk = new Object();
(vk = {
    init: function () {
        document.write("<div id=\"player-vk-write\" align=\"center\">                            <ul id=\"player-vk-season\"><li id=\"seasons\"></li></ul>                            <div id=\"player-vk-player\"></div>                            <ul id=\"player-vk-serial\"></ul>                            <a href=\"javascript://\" class=\"prev\" onclick=\"vk.move(1);\">prev</a>                           <a href=\"javascript://\" class=\"next\" onclick=\"vk.move(0);\">next</a>                           <a href=\"javascript://\" class=\"prev1\" onclick=\"vk.move1(1);\">prev</a>                           <a href=\"javascript://\" class=\"next1\" onclick=\"vk.move1(0);\">next</a>                           <\/div>")
    },
    player: function (a, b) {
        document.getElementById("player-vk-player").innerHTML = "";
        var d = document.createElement("iframe");
        d.src = String(a);
        d.width = "100%";
        d.height = "372";
        d.setAttribute("border", "0");
        d.setAttribute("frameborder", "0");
        d.setAttribute("scrolling", "no");
        d.setAttribute("allowfullscreen", "");
        d.setAttribute("webkitallowfullscreen", "");
        d.setAttribute("mozallowfullscreen", "");
        d.setAttribute("oallowfullscreen", "");
        d.setAttribute("msallowfullscreen", "");
        document.getElementById("player-vk-player").appendChild(d);
        if (document.getElementById("player-vk-serial")) {
            c = document.getElementById("player-vk-serial").getElementsByTagName("span");
            for (var i = 0; i < c.length; i++) {
                c[i].removeAttribute("class")
            }
        }
        b.setAttribute("class", "active")
    },
    season: function (a, b) {
        if (document.getElementById("player-vk-season")) {
            c = document.getElementById("player-vk-season").getElementsByTagName("span");
            for (var i = 0; i < c.length; i++) {
                document.getElementById("season" + i).style.display = "none";
                c[i].removeAttribute("class")
            }
            document.getElementById("season" + a).style.display = "";
            sea = a
        }
        b.setAttribute("class", "active")
    },
    show: function (a, b) {
        for (var i = 0; i < a; i++) {
            document.getElementById("player-vk-season").getElementsByTagName("li")[0].innerHTML += "<span onclick=\"vk.season(" + i + ", this)\">Сезон " + (i + 1) + "</span>";
            document.getElementById("player-vk-serial").innerHTML += "<li id=\"season" + i + "\" style=\"display:none;\"></li>"
        }
        for (var i = 0; i < a; i++) {
            for (var j = 0; j < b[i].length; j++) {
                document.getElementById("season" + i).innerHTML += "<span onclick=\"vk.player('" + b[i][j] + "', this);\">Серия " + (j + 1) + "</span>"
            }
        }
        document.getElementById("player-vk-season").getElementsByTagName("span")[0].setAttribute("class", "active");
        document.getElementById("player-vk-season").getElementsByTagName("span")[0].click();
        document.getElementById("season0").getElementsByTagName("span")[0].click();
        document.getElementById("season0").style.display = ""
    },
    move: function (d) {
        var a, b;
        var c = document.getElementById("seasons");
        var e = c.offsetWidth;
        var f = c.offsetLeft;
        if (d == 0) {
            clearTimeout(a);
            b = setInterval(function () {
                pos = pos - 10;
                if (pos >= (f - width) && pos >= -(e - width)) {
                    c.style.left = pos + "px"
                } else clearTimeout(b)
            }, 15)
        }
        if (d == 1) {
            clearTimeout(b);
            b = setInterval(function () {
                pos = pos + 10;
                if (pos <= (f + width) && pos <= 0) {
                    c.style.left = pos + "px"
                } else clearTimeout(b)
            }, 15)
        }
    },
    move1: function (d) {
        var a, b;
        var c = document.getElementById("season" + sea);
        var e = c.offsetWidth;
        var f = c.offsetLeft;
        if (d == 0) {
            clearTimeout(a);
            b = setInterval(function () {
                poz = poz - 10;
                if (poz >= (f - width) && poz >= -(e - width)) {
                    c.style.left = poz + "px"
                } else clearTimeout(b)
            }, 15)
        }
        if (d == 1) {
            clearTimeout(b);
            b = setInterval(function () {
                poz = poz + 10;
                if (poz <= (f + width) && poz <= 0) {
                    c.style.left = poz + "px"
                } else clearTimeout(b)
            }, 15)
        }
    }
});

 

всё нашёл

 

Код:

 pos = pos - 10;

? Поделись с остальными, может ещё кому-то пригодится эта информация.

 

нет
var width = 530; поставил 50

pos = pos - 10; походу скорости перемоткой