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

时间:2011-12-19 22:14:06

标签: jquery flash html5 audio fallback

我想在网站上使用这个优秀的小型音频播放器: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播放器的任何提示(如果这确实是问题)都会很棒。谢谢!

1 个答案:

答案 0 :(得分:0)

请注意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);
        }
});

}