HTML5 preloader視頻（進度條填充比視頻以文件結尾更快）

我遇到問題。進度條填充速度比視頻以文件結尾快。進度條已滿，視頻尚未完成。HTML5 preloader視頻（進度條填充比視頻以文件結尾更快）

$('.media_audio_player').bind('timeupdate' ,function() { 
    var id = $(this); 
    var idn = 'AudioBar_wrap\+'+this.id.split('rolf')[1]; 
    var canvas = document.getElementById(idn); 

    if (canvas.getContext) { 
     var ctx = canvas.getContext("2d"); 
     var lingrad = ctx.createLinearGradient(0,0,0,150); 
     var fWidth = (id.get(0).currentTime/id.get(0).duration) * (canvas.clientWidth); 

     if (fWidth > 0) { 
      lingrad.addColorStop(0, '#ebbdbd'); 
      lingrad.addColorStop(0.5, '#dd6060'); 
      lingrad.addColorStop(1, '#dc4c4c'); 
      ctx.fillStyle = lingrad; 
      ctx.fillRect(0, 0, fWidth, 150); 
     } 
    } 
});

任何幫助將不勝感激。

來源

2012-09-19 John Smith

也可以使未來：

var fWidth = (id.get(0).currentTime/id.get(0).duration) * (CanvasWidth);

其中CanvasWidth =長的畫布，這是該文件之前填充完成播放。在你的情況下：

var fWidth = (id.get(0).currentTime/id.get(0).duration) * (300);

來源

2012-09-20 13:20:19

var progress = Math.floor(video.currentTime)/Math.floor(video.duration); 
controls.progress[0].style.width = Math.floor(progress * controls.total.width()) + "px";

來源

2012-09-19 05:37:37

謝謝你的回答，但不工作正確。寬度我的畫布= 422，但畫布填充好像它的長度等於300. 我檢查組件（currentTime，duration和canvas.clientWidth），當聲音播放。好吧，但是畫不對... 爲什麼？ Ps：你可以在這裏看到工作腳本（http://testwork.ru/10001/media.php） - 嘗試播放頁面上的音頻文件... –

寬度我的畫布= 422，但他創造了300 px ..爲什麼？ –

HTML5 preloader視頻（進度條填充比視頻以文件結尾更快）

回答

相關問題