Question

我想在网站上使用这个优秀的小型音频播放器：http://www.brianhadaway.com/html5-audio-player-with-flash-fallback/

我在HTML5中工作正常：http://carolineelisa.com/audiotest/

但是当我强制使用Flash播放器（http://carolineelisa.com/audiotest2/js/jquery.audiocontrol.js中的var isFlash = true;）时，我在第一次加载时遇到了文件未找到错误：http://carolineelisa.com/audiotest2/

之后该按钮会起作用，因此可能以下内容无法正常工作，因为Flash播放器尚未就绪？

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

在“点击”按钮之前等待Flash播放器的任何提示（如果这确实是问题）都会很棒。谢谢！

Answer 1

请注意jquery.audiocontrol.js中的这两行。

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

在 addListeners 函数中添加了三个用于html5音频的事件处理程序，但是 window 正在传递给该函数。结果，事件监听器被添加到窗口中。然后 audio.playFlash 会导致错误，因为播放器没有像您提到的那样准备就绪。但是这个错误会调用 onError 函数，它会显示为html5audio元素编写的错误消息。

编辑：我进一步探索了代码并发现它正在发生，因为索引页面中的以下代码，第12行

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

触发点击事件会立即播放音频，这只适用于html5音频。当swfobject.js动态加载时，嵌入swf需要几秒钟。所以这段代码应该像

$(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);

编辑：不知道为什么即使在准备好回调之后外部接口功能也不可用。我怀疑它是因为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);
        }
});

}

具有Flash后备功能的HTML5音频播放器 - 过早发射时Flash版本出错？

1 个答案: