Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Ламерские вопросы Как с помощью BlockPro дать новостям ID по возрастанию?

Как с помощью BlockPro дать новостям ID по возрастанию?


     11.05.2015    Ламерские вопросы    1111

вопрос
Хотел использовать вывод треков с подгрузкой плеера uppod.
Использовать буду BlockPro или стандартныйми средствами.
Короче гооря вот что получилось -
http://www.goldaccordion.com/testaudio.html

Плюс такого использования - странице можно использовать сколько угодно треков и плеер будет каждый раз подгружаться. Такой вывод не будет грузить проц. у посетителей.

Но проблема одна - Если выводить новости в блоке, то как всем новостям дать ID по порядку (от 1 до XX)?
Например выводим на странице новости с помощью BlockPro, то как дать каждой новости ID?

Ответил: ПафНутиЙ


Итоговый рабочий код.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Плеер</title>
    <style>
        .track{
            margin:10px;
        }
        .trackIcon{
            width:24px;
            height:26px;
            background-color:#000;
            background: url("http://www.goldaccordion.com/engine/classes/flashplayer/play.png") 0 0;
            cursor: pointer;
        }
                .trackIcon2{
            width:480px;
            height:26px;
            padding-left:30px;
            padding-top:6px;
            font-size:13px;
        }
    </style>
</head>
<body>
    <div class="track">
        <div class="trackIcon" data-player-id="1" data-player-link="http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3">
            <div class="trackIcon2">Ричард Гальяно - Вальс Марго</div>
        </div>
    </div>
    <div class="track">
        <div class="trackIcon" data-player-id="150" data-player-link="http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3">
            <div class="trackIcon2">Ричард Гальяно - Вальс Марго</div>
        </div>
    </div>
    <div class="track">
        <div class="trackIcon" data-player-id="2" data-player-link="http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3">
            <div class="trackIcon2">Ричард Гальяно - Вальс Марго</div>
        </div>
    </div>
    <div class="playNext">следующий</div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        var playerId = 'trackPlayer', // ID создаваемого плеера, чтобы не повторяться по сто раз
            flashvars = {
                'm': 'audio',
                'st': 'http://www.goldaccordion.com/engine/classes/flashplayer/audiostyle.txt',
                'file': '',
                'uid': playerId
            },
            params = {
                allowFullScreen: "true",
                allowScriptAccess: "always",
                bgcolor: "#ffffff"
            },
            att = {
                id: playerId
            },
            playerExists, // Служебная переменная для определения играет ли трек
            currentId; // Служебная переменная для определения id проигрываемого трека

        $(document)
            // Слушаем клик по кнопке плеера
            .on('click', '[data-player-id]', function(e) {
                var $this = $(this), // Текущий элемент
                    $prevTrack = $('[data-player-id="' + currentId + '"]'), // Предыдущий трек
                    id = $this.data('playerId') // id текущего элемента (трек)
                    flashvars.file = $this.data('playerLink'); // Назначаем недостающую переменную
                    


                if (playerExists) {
                    // Удаляем запущенный плеер
                    swfobject.removeSWF(playerId);
                    // Показываем спрятанный трек
                    $prevTrack.show();
                }
                
                // Добавляем после текущего элемента блок под плеер.
                $this.after('<div style="display: none;" id="' + playerId + '"></div>');

                // Прячем текущий трек
                $this.fadeOut('500',function () {
                    // Показываем обёртку плеера
                    $(playerId).show();
                    // Запускаем плеер
                    new swfobject.embedSWF('http://www.goldaccordion.com/engine/classes/flashplayer/uppod.swf', playerId, '300', '27', '10.0.0', false, flashvars, params, att);
                });
                // Переназначаем переменную, содержащую информацию об ID запущенного трека
                currentId = id;
                

                // Говорим, что плеер запущен.
                playerExists = true;
                
            })
            // Слушаем клик по кнопке следующего трека
            .on('click', '.playNext', function(e) {
                e.preventDefault();
                var $firstTrack = $('[data-player-id]:first'), // Первый трек в списке
                    $currentTrack = $('[data-player-id="' + currentId + '"]'), // Предыдущий трек
                    $nextTrack = $currentTrack.parent().next().find('[data-player-id]'), // Следующий трек (тут фигово реализовано, привязка к структуре вёрстки)
                    $targetTrack = ($nextTrack.length) ? $nextTrack : $firstTrack; // Трек, который должен играть
                $targetTrack.trigger('click');

            });
    </script>
</body>
</html>

Комментарии пользователей (22)

vadims
10

373 | 63

vadims - 11 мая 2015 12:30 - Юзер

P.S. Каждый трек = новость

Gameer
226

1124 | 396

Gameer - 11 мая 2015 12:37 - Эксперт

vadims,
{include file="engine/modules/blockpro/block.pro.3.php?startFrom=1&order=old"}
попробуй так

Истина в противоречии.​

vadims
10

373 | 63

vadims - 12 мая 2015 17:50 - Юзер

Паша, ответ не совсем верный :)
Вернее не верный. Ерунда в том, что плеер проигрывает все, если ID идут по возрастанию, а когда все в перемешку то не пригрывает.

Мог бы кто нибудь подсказать как заставить плеер искать ближайший класс в место ID, чтобы тогда работало все по порядку, а не искал ID по возрастанию?
Проблема вся тут -
function NextPlayer(){
$("#track"+(currentTrack+1)+"Icon").length>0?$("#track"+(currentTrack+1)+"Icon").click():$("#track1Icon").click();
}


Вот весь код -
http://dumpz.org/1379954/

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 12 мая 2015 19:52 - Админ

Написал навскидку, по идее должно работать.

<div class="track">
    <div class="trackIcon" data-player-id="1" data-player-link="http://uppod.net/sample.mp3">
        <div class="trackIcon2">Ричард Гальяно - Вальс Марго</div>
    </div>
</div>
<div class="track">
    <div class="trackIcon" data-player-id="150" data-player-link="http://uppod.net/sample1.mp3">
        <div class="trackIcon2">Ричард Гальяно - Вальс Марго</div>
    </div>
</div>
<div class="track">
    <div class="trackIcon" data-player-id="2" data-player-link="http://uppod.net/sample3.mp3">
        <div class="trackIcon2">Ричард Гальяно - Вальс Марго</div>
    </div>
</div>
<div class="playNext">следующий</div>

<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script>
    var playerId = 'trackPlayer', // ID создаваемого плеера, чтобы не повторяться по сто раз
        flashvars = {
            'm': 'audio',
            'st': 'audio1567.txt',
            'file': '',
            'uid': playerId
        },
        params = {
            allowFullScreen: "true",
            allowScriptAccess: "always",
            bgcolor: "#ffffff"
        },
        att = {
            id: playerId
        },
        playerExists, // Служебная переменная для определения играет ли трек
        currentId; // Служебная переменная для определения id проигрываемого трека

    $(document)
        // Слушаем клик по кнопке плеера
        .on('click', '[data-player-id]', function(e) {
            var $this = $(this), // Текущий элемент
                $prevTrack = $('[data-player-id="' + currentId + '"]'), // Предыдущий трек
                id = $this.data('playerId'), // id текущего элемента (трек)
                flashvars['file'] = $this.data('playerLink'); // Назначаем недостающую переменную


            if (playerExists) {
                // Удаляем запущенный плеер
                swfobject.removeSWF(playerId);
                // Показываем спрятанный трек
                $prevTrack.show();
            }
            // Добавляем после текущего элемента блок под плеер.
            $this.after('<div id="' + playerId + '"></div>');
            // Прячем текущий трек
            $this.hide();
            // Переназначаем переменную, содержащую информацию об ID запущенного трека
            currentId = id;
            
            // Запускаем плеер
            new swfobject.embedSWF('uppod.swf', playerId, '300', '27', '10.0.0', false, flashvars, params, att);

            // Говорим, что плеер запущен.
            playerExists = true;
            
        })
        // Слушаем клик по кнопке следующего трека
        .on('click', '.playNext', function(e) {
            e.preventDefault();
            var $firstTrack = $('[data-player-id]:first'), // Первый трек в списке
                $currentTrack = $('[data-player-id="' + currentId + '"]'), // Предыдущий трек
                $nextTrack = $currentTrack.next('[data-player-id]'), // Предыдущий трек
                $targetTrack = ($nextTrack.length) ? $nextTrack : $firstTrack; // Трек, который должен играть
            
            $targetTrack.trigger('click');

        });
</script>

Каков вопрос - таков и ответ. Просто помните об этом.

vadims
10

373 | 63

vadims - 12 мая 2015 20:39 - Юзер

Спасибо Павел, но где-то ошибка.
В браузере ругается на строку -
flashvars['file'] = $this.data('playerLink');


Вот поставил -
http://www.goldaccordion.com/testaudio.html

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 12 мая 2015 20:41 - Админ

flashvars.file = $this.data('playerLink');

но вообще конечно бы на codepen или jsfiddle положить рабочий вариант.

Каков вопрос - таков и ответ. Просто помните об этом.

vadims
10

373 | 63

vadims - 12 мая 2015 20:46 - Юзер

Сейчас попробую выложить. Не когда этими сервисами не пользовался.

vadims
10

373 | 63

vadims - 12 мая 2015 21:00 - Юзер

https://jsfiddle.net/ej49gtxc/2/

или http://codepen.io/anon/pen/jPqEJM

Только на этих сервисах почему то вообще плеер не отображается =(

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 12 мая 2015 21:54 - Админ

обновил ответ.

Каков вопрос - таков и ответ. Просто помните об этом.

vadims
10

373 | 63

vadims - 12 мая 2015 22:03 - Юзер

Павел! Вы супер!
Спасибо большое!

Одно уточнение - возможно ли чтобы после завершение трека дальше переключалось, в место ссылки "следующий" ?

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 12 мая 2015 22:19 - Админ

Думаю вам нужен код отсюда, что бы велики не изобретать

Каков вопрос - таков и ответ. Просто помните об этом.

vadims
10

373 | 63

vadims - 12 мая 2015 22:30 - Юзер

Павел, подскажите пожалуйста какой код взять
http://www.goldaccordion.com/engine/classes/flashplayer/uppod_ajax.js
Так как если этот js подключаю перед плеерами, то все изчезает,
если после плееров то они становятся не активными, то есть нажать на них нельзя.
Вы же гуру в этом деле, 1 минута и все :)
Совсем чуток осталось мне до полного счастья.

vadims
10

373 | 63

vadims - 13 мая 2015 22:41 - Юзер

Паша, Вы появились и комментарии читаете :) , может могли бы подсказать какой код взять с
http://www.goldaccordion.com/engine/classes/flashplayer/uppod_ajax.js
чтобы после завершения трека дальше автоматически переключался?

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 12 мая 2015 21:53 - Админ

В шаблоне модуля можно использовать id новости.

<div id="track{news-id}" class="track"><div id="track{news-id}Icon" class="trackIcon" onclick="GetPlayer({news-id},'http://uppod.net/sample.mp3','Vtoroj')"><div  class="trackIcon{news-id}" >123</div></div><div id="track{news-id}Player"></div></div

Каков вопрос - таков и ответ. Просто помните об этом.

sadan
16

107 | 38

sadan - 12 мая 2015 22:33 - Юзер

А если будет так?
плеер в html5
в main.tpl:
<script type="text/javascript" src="/uppod/uppod.js"></script>
<script type="text/javascript" src="/uppod/uppod_ajax.js"></script>
<script type="text/javascript">
    player();
    function player(){
        vars={"m":"audio","uid":"player","file":""};
        player = new Uppod(vars);
    }
</script>
<div id="player"></div>

в shortstory.tpl:
<a onclick="player.play('http://uppod.net/sample.mp3');player.Alert('{title}');">{title}</a>

vadims
10

373 | 63

vadims - 12 мая 2015 22:42 - Юзер

html5 плеер буду использовать только в моб. версии и для моб устройств, так как чтобы во всех браузерах работал uppod html5 нужно иметь по 2 аудио формата + в IE как всегда проблемы..

sadan
16

107 | 38

sadan - 12 мая 2015 22:44 - Юзер

это почему? сейчас uppod как бы формат mp3 поддерживается во всех браузерах

vadims
10

373 | 63

vadims - 12 мая 2015 22:52 - Юзер

Спасибо за информацию! :) Пару дней назад смотре и не у всех браузеров было mp3.

vadims
10

373 | 63

vadims - 12 мая 2015 22:54 - Юзер

Но все же буду ждать с надеждой ответа от Павла. Так как ну просто супер сейчас все, кроме автоматического далее проигрывания.

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 13 мая 2015 22:48 - Админ

Не подскажу. Тема была интересная, решение найдено. Более интереса не вызывает.

Каков вопрос - таков и ответ. Просто помните об этом.

vadims
10

373 | 63

vadims - 13 мая 2015 23:17 - Юзер

Все ровно спасибо большое за помощь! Буду методом тыка пытаться найти решение перехода трека дальше. :D
Отправил 5 WMZ Вам за оказанную помощь на пиво ;)

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 14 мая 2015 09:16 - Админ

Спасибо и удачи в покорении. Ещё обратите внимание на SoundManager2

Каков вопрос - таков и ответ. Просто помните об этом.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы