阿賈克斯請求預下載視頻

我一直在試圖下載一個視頻（這將最終來自我自己的資源），而視頻正在下載，我想顯示一個加載消息。阿賈克斯請求預下載視頻

完全下載後，我想隱藏加載圖標並準備好播放視頻。

我無法獲取視頻文件並將其設置爲HTML中的視頻屬性。這裏是我使用的代碼...

JS：

var root = 'https://crossorigin.me/http://techslides.com/demos/sample-videos/small.mp4'; 

function loadVideo() { 
    $('.loading').show(); 
    $.ajax({ 
    url: root, 
    method: 'GET' 
    }).then(function(data) { 
    $('.loading').hide(); 
    console.log("done"); 
    $('video').attr('src', data); 
    $("video")[0].load(); 
    //console.log(data); 
    }); 
}

HTML：

<div class="loading animated bounce infinite"> 
Loading 
</div> 
<video width="320" height="240" controls> 


</video>

來源

2017-04-05 okayilltry

我得到它是否正確，並且您的根變量是視頻？在這種情況下，您不需要ajax請求，只需設置視頻元素的src，並監聽loadeddata。如果readyState爲4，則視頻「完全加載」或更好有足夠的數據運行。 –

是的，root是視頻網址。最終，我會收集一些我想要下載的視頻，然後根據所選視頻進行播放，無需加載。它似乎沒有創建一個視頻標籤收藏與src指向視頻和觀看所有已加載的數據，看看他們是否可用將非常乾淨。但如果使用這種方法有更好的方法，我打開使用它。謝謝回覆。 – okayilltry

你並不需要爲這個Ajax請求。您可以簡單地設置視頻元素的來源，然後收聽loadeddata。有4種不同的readyStates你可以檢查。 HAVE_ENOUGH_DATA（readyState 4）代表：

有足夠的數據可用 - 並且下載速率足夠高 - 可以在不中斷播放媒體的情況下結束播放。

此實現可能是這樣的：

function loadVideo(videoURL, $player) { 
    $player = $videoObj || $('video'); 
    $('.loading').show(); 
    $player.attr('src', videoURL); 
    var player = $player[0]; 
    player.addEventListener('loadeddata', function() { 
     if(player.readyState == 4) { 
     // or whatever you want to do 
     // in case the video has enough data 
     $('.loading').hide(); 
     } 
    }); 
}

如果你真正需要的「完成」狀態（100％），則可以使用progress事件，以確定有多少的視頻已被緩衝，如果緩衝區爲100％，視頻應完全加載。

function loadVideoCompleted(videoURL, $player) { 
    $player = $videoObj || $('video'); 
    $('.loading').show(); 
    $player.attr('src', videoURL); 
    var player = $player[0]; 
    player.addEventListener('loadeddata', function() { 
     var percentageBuffered = 0; 

     if (player.buffered.length > 0 
      && player.buffered.end && player.duration) { 
      percentageBuffered = player.buffered.end(0)/player.duration; 
     } else if (player.bytesTotal != undefined && 
      player.bytesTotal > 0 && player.bufferedBytes != undefined) { 
      percentageBuffered = player.bufferedBytes/player.bytesTotal; 
     } 

     if (percentageBuffered == 1) { 
      // or whatever you want to do in case 
      // 100% of the video has been buffered 
      $('.loading').hide(); 
     } 
    }); 
}

來源

2017-04-05 17:56:51

感謝您的回覆，我測試了這一點，雖然它的工作有什麼辦法讓它完全下載，因爲我研究，似乎只有4級的readyState，所以視頻不會完全下載。 – okayilltry

@okayilltry是的，只有「4級」。我已經更新了我的答案，準備好了狀態4，如果你想播放視頻，那就沒問題了。我添加了第二種方法來測試緩衝區，以檢測視頻是否完全加載。 –

阿賈克斯請求預下載視頻

回答

相關問題