Javascript Ajax请求预下载视频

我一直在尝试下载一个视频（最终将从我自己的资源中下载），当视频下载时，我想显示一条正在加载的消息

一旦它被完全下载，我想隐藏加载图标，并有视频准备播放

我在获取视频文件并将其设置为HTML中的“视频”属性时遇到问题。这是我正在使用的代码

JS:

HTML:

加载

这不需要ajax请求。您只需设置视频元素的源，然后收听

loadeddata

。您可以检查4种不同的类型<代码>具有足够的数据（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();
        }
  });
}

---

我的理解正确吗？你的根变量是视频？在这种情况下，您不需要ajax请求，只需设置视频元素的src，然后收听loadeddata。如果readyState为4，则您的视频已“完全加载”，或者有足够的数据可以运行。是的，root是视频url。最终，我将有一个我想要预下载的视频集合，然后可以根据选择的视频进行播放，而无需加载。这似乎不像创建一个视频标签集合，src指向视频并查看所有加载的数据，看看它们是否可用，这将是非常干净的。但是，如果有更好的方法使用这种方法，我愿意使用它。谢谢你的回复。谢谢你的回复，我测试了这个，虽然它确实有效，但有没有办法让它完全下载，因为我研究过，似乎只有4个readyState级别，所以视频不会完全下载。@okayilltry是的，只有“4个”级别。我已经更新了我的答案，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();
      }
  });
}

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