fire event when

Question

how can I fire an event when a video is fully loaded?

I've tried the following method to get .loaded and .total to compare and fire, but looks like in the following scenerio console non-stop logs undefined

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

ps. "video" is my video element as you may guess ps2. not a duplicate of HTML5 Video - Percentage Loaded? - I don't want to "play" the videos, only load them. The solution of this link needs videos to be either on autoplay or to be played (to load them).

@JonKoops just edited the question - shortly once again: I've came across that method however progress does not get fired when videos are not playing. That's one of the main issues here. — Mia, Aug 24 '15 at 14:41
If you do not intent to play the video then maybe you shouldn't be using the `video` element. What is it that you wish to do with the video after loading it? Please edit your question accordingly. — Jon Koops, Aug 24 '15 at 14:55
I think I found the answer to your question, it involves downloading the video file entirely as a blob and setting it as a video source: https://stackoverflow.com/questions/18251632/another-force-chrome-to-fully-buffer-mp4-video — Jon Koops, Aug 25 '15 at 20:15

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

You can see solution here HTML5 Video - Percentage Loaded?

check percent = 100% is loaded or complete download video.

edited May 23 '17 at 12:29

Community

1
1

answered Aug 24 '15 at 14:04

Davuz

5,040
13
41
61

If you suspect this question to be a duplicate please mark it so. – Jon Koops Aug 24 '15 at 14:14
For some reason this does not work for me if video is not set to autoplay. – Mia Aug 24 '15 at 14:39
Definitely not duplicate. – Mia Aug 25 '15 at 12:07

Jon Koops · Answer 2 · 2015-08-25T20:54:25.317

There is no event that exists that will let you know when a video has been downloaded completely. This is because browsers want to be smart about how much data is consumed and will try to download the minimal amount of data required to play the video.

Another possible solution is to download the video file as a blob using a plain old HTTP request and setting it as the source of your video element like so:

    /**
     * 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>

fire event when is fully loaded

2 Answers2

fire event when