событие пожара, когда <video> полностью загружен

Question

Как я могу запустить событие, когда видео полностью загружено?

Я попробовал следующий метод, чтобы получить .loaded и .total для сравнения и огня, но выглядит как в следующих scenerio консольных беспосадочных журналов

непредсказуемых,

video.addEventListener("progress", function(p){ 
     console.log(p.loaded) 
    }); 

пса. «видео» - это мой элемент видео, как вы можете догадаться, ps2. не дубликат HTML5 Video - Percentage Loaded? - Я не хочу «воспроизводить» видео, загружаю их только. Решение этой ссылки требует, чтобы видео было либо в режиме автовоспроизведения, либо для воспроизведения (для их загрузки).

Answer 1

Пожалуйста, взгляните на это: http://www.w3schools.com/tags/av_event_canplay.asp

Answer 2

Вы можете увидеть решение здесь HTML5 Video - Percentage Loaded?

чек процентов = 100% загрузки или полной загрузки видео.

Answer 3

Нет событий, которые будут сообщать вам обо всех загрузках. Это связано с тем, что браузеры хотят быть умными в отношении того, сколько данных потребляется, и попытается загрузить минимальный объем данных, необходимых для воспроизведения видео.

Другим возможным решением является загрузка видео файл как двоичный объект, используя обычный старый запрос HTTP и установить его в качестве источника вашего видеоэлемент, как так:

/** 
 
    * Fetches a video file from a URL and returns a Promise that resolves with the file a Blob. 
 
    * @param {String} url - The URL where the video file should be fetched from. 
 
    * @returns {Promise} A Promise that resolves with the fetched video file as a Blob. 
 
    */ 
 
    function fetchVideo(url) { 
 
     return new Promise(function(resolve, reject) { 
 
     // Usual XMLHttpRequest setup. 
 
     var request = new XMLHttpRequest(); 
 
     request.open('GET', url); 
 
     request.responseType = 'blob'; 
 
     
 
     request.onload = function() { 
 
      // Check if request status code was successfull. 
 
      if (request.status === 200) { 
 
      // Resolve with request response. 
 
      resolve(request.response); 
 
      } else { 
 
      // Otherwise reject with a meaningfull message. 
 
      reject(new Error(req.statusText)); 
 
      }  
 
     }; 
 
     
 
     // Handle any network errors. 
 
     request.onerror = function() { 
 
      reject(new Error('Network error')); 
 
     }; 
 
     
 
     // Send request. 
 
     request.send(); 
 
     }); 
 
    } 
 
    
 
    // Get the video element from the DOM. 
 
    var video = document.getElementById('video'); 
 
    
 
    // Fetch video from remote server. 
 
    fetchVideo('https://d8d913s460fub.cloudfront.net/videoserver/cat-test-video-320x240.mp4') 
 
     .then(function(blob) { 
 
     // Create a source for the video element from the blob. 
 
     video.src = URL.createObjectURL(blob); 
 
     }) 
 
     // Catch any error that occurs while fetching. 
 
     .catch(function(err) { 
 
     console.error('Unable to fetch video: ' + err.message); 
 
     });

<video id="video" controls autoplay></video>