HTML5 Audio Player с Flash Fallback - ошибка во Flash версии при слишком раннем запуске? - PullRequest
Новая
       17

HTML5 Audio Player с Flash Fallback - ошибка во Flash версии при слишком раннем запуске?

1 голос
/ 20 декабря 2011

Я хочу использовать этот отличный маленький аудиоплеер на сайте: http://www.brianhadaway.com/html5-audio-player-with-flash-fallback/

У меня отлично работает в HTML5: http://carolineelisa.com/audiotest/

Но когда я принудительно использую Flash player (var isFlash = true; in http://carolineelisa.com/audiotest2/js/jquery.audiocontrol.js), я получаю ошибку File not found при первой загрузке: http://carolineelisa.com/audiotest2/

После этого кнопка работает, поэтому, возможно, следующее не работает, потому что Flash Player не готов? 

$(document).ready(function(){
$(this).audiocontrol();
$(‘.audioButton’).click();
});

Любые советы по ожиданию Flash Player перед тем, как «нажать» кнопку (если это действительно проблема), были бы фантастическими. Спасибо!

1 Ответ

0 голосов
/ 20 декабря 2011

Обратите внимание на эти две строки в jquery.audiocontrol.js. 

91. addListeners(window);
92. audio.playFlash(currentTrack + options.defaultMediaExtension);

в addListeners добавляются три обработчика событий, которые предназначены для аудио html5, но здесь окно передается этой функции. В результате к окну добавляются слушатели событий. Тогда audio.playFlash вызывает ошибку, так как плеер не готов, как вы упомянули. Но эта ошибка вызывает функцию onError и показывает сообщение об ошибке, написанное для элемента html5audio.

EDIT: Я изучил код дальше и обнаружил, что это происходит из-за следующего кода на странице индекса, строка 12 

$(document).ready(function(){
    $(this).audiocontrol();
    $('.audioButton').click();
});

Запуск события click приводит к немедленному воспроизведению звука, который будет работать только для аудио html5. Встраивание swf занимает несколько секунд, так как swfobject.js загружается динамически. Так что этот код должен быть похож на 

$(document).ready(function(){
    $(this).audiocontrol( { readyCallback:function(){ $('.audioButton').click();  } } );
});

и в jquery.audiocontrol.js, после строки 125 добавить (для аудио html5) 

if(options.readyCallback){
    options.readyCallback.call();
}

и в строке 136 передайте его как функцию обратного вызова embedSWF. Последний параметр embedSWF - это функция обратного вызова, которая будет вызвана, когда SWF будет готов, 

swfobject.embedSWF(options.flashAudioPlayerPath, options.playerContainer, 
                 "0", "0", "9.0.0", "swf/expressInstall.swf", false, false, 
                 {id:options.flashObjectID}, options.readyCallback);

EDIT: Не знаю, почему функция внешнего интерфейса недоступна даже после получения обратного вызова. Я сомневаюсь, что из-за 0 ширины и 0 высоты. В любом случае предоставление функции loadFlash (строка 141), как указано ниже, решило проблему. Сейчас работает. 

function loadFlash() {
    swfobject.embedSWF(options.flashAudioPlayerPath, options.playerContainer, 
             "1", "1", "9.0.0", "swf/expressInstall.swf", false, false, 
             {id:options.flashObjectID}, 
             function(){
        if(options.readyCallback){
            setTimeout(options.readyCallback, 150);
        }
});

}
...