Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

novato_PHP

Eventos no MediaElements DOM

Recommended Posts

Oie...

 

Como faz tempo que não posso por aqui....

 

O seguinte estou usando o MediaElementsJS e criei uma playlist de audio com este plugin Jquery,

 

Mas tenho uma busca nesta própria página que é executada e retorna os dados nesta mesma página, ou seja preciso é que o retorno deste ajax seja executado pela playlist do MediaElements .

 

Alguém já usou ou já fez isto?

 

JS


        $(function () {
            $('video,audio').mediaelementplayer({
                success: function (mediaElement, domObject) {
                    mediaElement.addEventListener('ended', function (e) {
                        mejsPlayNext(e.target);
                    }, false);
                },
                keyActions: []
            });
    

            $('.mejs-list li').click(function () {
                $(this).addClass('current').siblings().removeClass('current');
                //var audio_src = $(this).text();
                var audio_src = $('a', this).attr('data-src');


                $('audio#mejs:first').each(function () {
                    this.player.pause();
                    this.player.setSrc(audio_src);
                    this.player.play();
                });
            });

        });

        function mejsPlayNext(currentPlayer) {
            if ($('.mejs-list li.current').length > 0) { // get the .current song
                var current_item = $('.mejs-list li.current:first'); // :first is added if we have few .current classes
                //var audio_src = $(current_item).next().text();
                var audio_src = $(current_item).next().$('a', this).attr('data-src');
                $(current_item).next().addClass('current').siblings().removeClass('current');
                console.log('if ' + audio_src);
            } else { // if there is no .current class
                var current_item = $('.mejs-list li:first'); // get :first if we don't have .current class
                //var audio_src = $(current_item).next().text();
                var audio_src = $(current_item).next().$('a', this).attr('data-src');
                $(current_item).next().addClass('current').siblings().removeClass('current');
                console.log('elseif ' + audio_src);
            }

            if ($(current_item).is(':last-child')) { // if it is last - stop playing
                $(current_item).removeClass('current');
            } else {
                currentPlayer.setSrc(audio_src);
                currentPlayer.play();
            }
        }

 

HTML

 

    <audio id="mejs" src="../" type="audio/mp3" controls="controls"></audio>

       <div id="lista_programas">
        
          
                <ol class="mejs-list">
            
                <li><a href="#" data-src="top_ubm/music5.mp3">Café Cultural - Programa exibido dia 07/03/2013</a></li>                        
            
                <li><a href="#" data-src="top_ubm/music4.mp3">Cupido UBM - Programa exibido dia 09/03/2013</a></li>                        
            
                <li><a href="#" data-src="top_ubm/music3.mp3">Cupido News - Programa exibido dia 14/03/2013</a></li>                        
            
                <li><a href="#" data-src="top_ubm/music2.mp3">Zoando na Net - Programa exibido dia 07/03/2013</a></li>                        
            
                <li><a href="#" data-src="top_ubm/music1.mp3">Bola Rosa - Programa exibido dia 13/03/2013</a></li>                        
            
                </ol>
            
        
        </div>

 

O que retorna o meu Ajax... Segundo Firebug...

 

<ol class="mejs-list"><li><a href="#" data-src="top_ubm/music3.mp3">Cupido News - Programa exibido dia 14/03/2013</a></li><li><a href="#" data-src="top_ubm/music4.mp3">Cupido UBM - Programa exibido dia 09/03/2013</a></li></ol>

 

Alguém se habilita?? hehehe...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pois é....

 

Resolvi com Backend de outra forma... Não é a melhor maneira, mas o prazo é apertado....

 

Se ainda postarem a solução em frontend.... Beleza!!!!!!!!!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.