Вопрос насчет метода click()
Здравствуйте!
Очень нужен совет, не понятно как работает метод click() в данном случае: мне нужно сделать аудио плеер, я использую плагин jquery.simpleplayer(). Вот его код: /* * SimplePlayer - A jQuery Plugin * @requires jQuery v1.4.2 or later * * SimplePlayer is a html5 audio player * * Licensed under the MIT: * [url]http://www.opensource.org/licenses/mit-license.php[/url] * * Copyright (c) 2010-, Yuanhao Li (jay_21cn -[at]- hotmail [*dot*] com) */ (function($) { $.fn.player = function(settings) { var config = { progressbarWidth: '200px', progressbarHeight: '5px', progressbarColor: '#22ccff', progressbarBGColor: '#eeeeee', defaultVolume: 0.8 }; if (settings) { $.extend(config, settings); } var playControl = '<span class="simpleplayer-play-control"></span>'; var stopControl = '<span class="simpleplayer-stop-control"></span>'; this.each(function() { $(this).wrap('<div class="simple-player-container" style="background-color: #ddd;' + ' padding: 0 10px 5px 5px;" />').parent().prepend( '<div><ul>' + '<li style="display: inline-block; padding: 0 5px; "><a style="text-decoration: none;"' + ' class="start-button" href="javascript:void(0)">' + playControl + '</a></li>' + '<li class="progressbar-wrapper" style="display: inline-block; cursor: pointer; width:' + config.progressbarWidth + ';">' + '<span style="display: block; background-color: ' + config.progressbarBGColor + '; width: 100%; ">' + '<span class="progressbar" style="display: block; background-color: ' + config.progressbarColor + '; height: ' + config.progressbarHeight + '; width: 0%; ">' + '</span></span>' + '</li>' + '</ul></div>' ); var simplePlayer = $(this).get(0); var button = $(this).parent().find('.start-button'); var progressbarWrapper = $(this).parent().find('.progressbar-wrapper'); var progressbar = $(this).parent().find('.progressbar'); simplePlayer.volume = config.defaultVolume; button.click(function() { if (simplePlayer.paused) { simplePlayer.play(); $(this).find('.simpleplayer-play-control').addClass('simpleplayer-stop-control').removeClass('simpleplayer-play-control'); } else { simplePlayer.pause(); $(this).find('.simpleplayer-stop-control').addClass('simpleplayer-play-control').removeClass('simpleplayer-stop-control'); } }); progressbarWrapper.click(function(e) { if (simplePlayer.duration != 0) { left = $(this).offset().left; offset = e.pageX - left; percent = offset / progressbarWrapper.width(); duration_seek = percent * simplePlayer.duration; simplePlayer.currentTime = duration_seek; } }); $(simplePlayer).bind('ended', function(evt) { simplePlayer.pause(); button.find('.simpleplayer-stop-control').addClass('simpleplayer-play-control').removeClass('simpleplayer-stop-control'); progressbar.css('width', '0%'); }); $(simplePlayer).bind('timeupdate', function(e) { duration = this.duration; time = this.currentTime; fraction = time / duration; percent = fraction * 100; if (percent) progressbar.css('width', percent + '%'); }); if (simplePlayer.duration > 0) { $(this).parent().css('display', 'inline-block'); } }); return this; }; })(jQuery); Далее у меня есть страница в которой у меня выводится этот плеер при нажатии на ссылки 1 и 2. <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>player</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <link rel="stylesheet" href="js/simpleplayer.css" type="text/css"> <script type="text/javascript" src="js/jquery.simpleplayer.js"></script> <script type="text/javascript"> function getaudiolink(audio_id){ var settings = { progressbarWidth: '200px', progressbarHeight: '5px', progressbarColor: '#22ccff', progressbarBGColor: '#eeeeee', defaultVolume: 0.8 }; $.ajax({ type: "POST", url: "audio.php", data: "id=" + audio_id, success: function(msg){ $(".player").attr("src", msg); } }); $("#audioplayer").html(""); $("#audioplayer").html('<audio class="player" src=""></audio>'); $(".player").player(settings); $('.start-button').click(); } </script> </head> <body> <div id="audioplayer"> <audio class="player" src=""> Your browser does not support the <code>audio</code> element. </audio> </div> <a href="#" onClick = "getaudiolink(1)">1</a><BR> <a href="#" onClick = "getaudiolink(2)">2</a><BR> </body> </html> Сами ссылки на аудио файлы получаются из файла audio.php: <?php if($_POST['id'] == "1"){ echo "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3"; } if($_POST['id'] == "2"){ echo "http://upload.wikimedia.org/wikipedia/commons/8/82/Riddle_song.ogg"; } ?> Проблема в том, что используя метод клик, который задействует кнопку play сама кнопка меняется на кнопку паузы, но музыка не начинает воспроизводиться. Подскажите пожалуйста в чем проблема, как можно это исправить? trigger("click") и triggerHandler('click') не помогают =( |
Часовой пояс GMT +3, время: 04:43. |