Кросс-браузер видео преднагрузки

Question

я нашел способ для предварительной загрузки видео частично до 20% перед игрой, которая, кажется, работает тихо хорошо на Firefox:

  window.addEventListener("load", function() { 

      var video = document.createElement("video"); 
      video.setAttribute("preload", "auto"); 
      video.setAttribute("controls", "true"); 
      var mp4 = document.createElement("source"); 
      mp4.setAttribute("src", "https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"); 
      mp4.setAttribute("type", "video/mp4"); 
      var webm = document.createElement("source"); 
      webm.setAttribute("src", "https://archive.org/download/ElephantsDream/ed_1024.ogv"); 
      webm.setAttribute("type", "video/ogv"); 
      video.appendChild(mp4); 
      video.appendChild(webm); 
      document.body.appendChild(video); 

      var v = document.querySelector("video"); 
      v.addEventListener("progress", function() { 
       (function() { 
        if(v.readyState == 4) { 
         var buffer = v.buffered; 
         var loaded = (buffer.end(0)/v.duration) * 100; 
         console.log(loaded); 
         if (buffer.length === 1) { 
          if (loaded >= 20) { 
           console.log("Vidéo chargée"); 
           v.play();        } 
          } 
         } 
       })(); 
      }); 
     }); 

несчастию, на Chrome, видео должно быть воспроизведен быть буферизация.

Есть код кросс-браузера, чтобы предварительно загрузить видеоролик.

Answer 1

видео всегда будет поджать, если вы установите

video.setAttribute("preload", "none"); 

Различия между браузерами зависит от реализации. Согласовывающ spec в пределах ресурса выборки алгоритма

Агенты пользователей могут решить, чтобы не загружать больше контента в любое время, например, после буферизации пяти минут одночасового медиа-ресурса, ожидая, что пользователь решит, следует ли воспроизводить ресурс или нет, или в ожидании ввода пользователя в интерактивный ресурс.

Так, к сожалению, не enterely под вашим контролем, так как вы установили preload = автоматический. Если вы хотите перекрестный просмотр я играть со свойством

video.setAttribute("autoplay", "true|false") 
video.setAttribute("preload", "metadata|auto") 

Немного информацию о preloading on html5.

- обновление ---

я выкладываю здесь окончательное решение для Chrome предоставленного владельцем данного вопроса он обеспечил через Pastebin. Престижность jadw

window.addEventListener("load", function() { 
    var video = document.createElement("video"); 
     video.setAttribute("preload", "auto"); 
     video.setAttribute("controls", "true"); 
     video.setAttribute("webkit-playsinline", "true"); 
     video.setAttribute("playsinline", "true"); 
     video.setAttribute("autoplay", "true"); 
     var mp4 = document.createElement("source"); 
     mp4.setAttribute("src", 
     "https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4"); 
     mp4.setAttribute("type", "video/mp4"); 
     video.appendChild(mp4); 
     video.onloadstart = function() { 
      video.volume = 0; 
      video.addEventListener("progress", progressLoad); 
      video.pause(); 
     }; 
     var progressLoad = function(){ 
      console.log(video.readyState); 
      (function() { 
      if (video.readyState === 4) { 
       var buffer = video.buffered;       
       var loaded = (buffer.end(0)/video.duration) * 100; 
       console.log(loaded); 
       video.currentTime = loaded; 
       if ((buffer.length === 2) || (loaded >= 20)) { 
       video.currentTime = 0; 
       video.removeEventListener("progress", progressLoad); 
       console.log("Video loaded"); 
       document.body.appendChild(video); 
       video.play(); 
       } 
      } 
     })(); 
    }; 
});