Question

我在HTML 5中有一个webplayer项目，它使用媒体元素读取无限流（用于后备功能）。
我有一个可以播放音频的解决方案，但我很难显示加载的字节进度。

我在媒体元素的progress事件中添加了一个eventListener。（把它放在音频元素上直接在IE 7-8中断）我可以看到它每x秒调用一次但是在Chrome和IE 7-8上，似乎返回的值在遇到第一个值后被卡住了因此，onprogress的每次迭代在第一次调用后都将返回相同的值。

这是我的代码：

function activateMediaElement(){
    /*
    param mode:
    // auto: attempts to detect what the browser can do
    // auto_plugin: prefer plugins and then attempt native HTML5
    // native: forces HTML5 playback
    // shim: disallows HTML5, will attempt either Flash or Silverlight
    // none: forces fallback view
    */

    $('#audio-player').mediaelementplayer({
        alwaysShowControls: false,      
        //mode: 'native', //-- native messes up IE 7-8 -- actually, not needed...
        plugins: ['flash','silverlight'],
        features: ['playpause','progress','volume'],
        audioVolume: 'horizontal',
        //enablePluginDebug:true,
        flashName: 'flashmediaelement.swf',
        silverlightName: 'silverlightmediaelement.xap',
        audioWidth: 472,
        //audioHeight: 70,
        //iPadUseNativeControls: true,
        //iPhoneUseNativeControls: true,
        //AndroidUseNativeControls: true,
        success: function (mediaElement, domObject) {  

            mediaElement.addEventListener('progress', function(e) { 
                setProgressBar(e);
            }, false);

            //[...]
        },
        error: function (mediaElement, domObject) {
            audioError('me error');
        },
        customError: msg.search_for_valid_format
    }); 

}

function setProgressBar(e){
    //show the progress for the current show
    if(current_show.startphp > 0 && current_show.endphp > 0){
        var bufferedTime = getBufferedTime(e);          
        var percent = (bufferedTime - current_show.startphp) *100 / (current_show.endphp-current_show.startphp);
        if(percent > 100){
            percent = 100;  
        }
        $(".timeline-buffered").css('width', percent+'%');
    }
}
function getBufferedTime(e){    
    //borrowed from mediaelement.js 
    var target = (e != undefined) ? e.target : $(mejs)[0],
    var buffered = 0;

    // newest HTML5 spec has buffered array (FF4, Webkit)
    if (target && target.buffered && target.buffered.length > 0 && target.buffered.end && target.duration) {
        // TODO: account for a real array with multiple values (only Firefox 4 has this so far) 
        buffered = target.buffered.end(0);
    } 
    // Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end()
    // to be anything other than 0. If the byte count is available we use this instead.
    // Browsers that support the else if do not seem to have the bufferedBytes value and
    // should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8.
    else if (target && target.bytesTotal != undefined && target.bytesTotal > 0 && target.bufferedBytes != undefined) {
        buffered = target.bufferedBytes;
    }
    // Firefox 3 with an Ogg file seems to go this way
    else if (e && e.lengthComputable && e.total != 0) {
        buffered = e.loaded;
    }

    //let's consider the buffered value like seconds
    var bufferedTime = pls.startTime+buffered;
    return bufferedTime;
}

所以在onprogress的每次调用中，我都可以看到缓冲的值总是相同的。（移动chrome / IE 7-8上的0或桌面版Chrome上的小值1）我已经在网上阅读了许多解决方案，这些解决方案都导致使用target.buffered.end（0）;.但这些解决方案已有3-4年的历史了。

我错过了什么或者它真的不可能吗？

Html5 + mediaelement.js音频流，onprogress未在chrome和IE7-8上更新

0 个答案: