play html5 video after fully loaded

Question

I am searching for a way to play an HTML video after it's fully loaded. I tried get a feedback when the video buffering is complete but it does't work. Here is my code :

var player = document.getElementById('bgvid');
player.addEventListener("progress", function() {
  console.log("1");
  if (player.buffered.length > 0) {
    console.log("2");
    var bufferedEnd = player.buffered.end(player.buffered.length - 1);
    var duration = player.duration;
    console.log(duration);
    if (duration > 0) {
      console.log((bufferedEnd / duration) * 100);
    }
  }
});

I get only "1" on the console so the buffer.length never pass zero even with the preload attribute on "auto". The only thing that makes any difference is the autoplay attribute. When is on i get the percent of buffer shown in console, but if i pause the video it stops again the buffering.

Thank you in advance for any ideas.

Oooh... I was just about to ask this question looks like you beat me to it. Either ways, I'm looking forward to the answer. — , Jul 09 '16 at 22:28
take a look at this answer - https://stackoverflow.com/questions/18251632/another-force-chrome-to-fully-buffer-mp4-video/18294706#18294706 - it assumes the video is small enough to buffer as an ajax object but you'll know for sure when it's all there... — Offbeatmammal, Jul 09 '16 at 23:19
that seems promising. i will try it and let you know. thank you for your time — George Eleftheriou, Jul 09 '16 at 23:33
@Offbeatmammal your suggestion works like charm! thank you very much for your help! :D how can i upvote you or something? — George Eleftheriou, Jul 10 '16 at 11:42
if it worked for you just up-vote the answer so it helps others find it — Offbeatmammal, Jul 10 '16 at 15:36

score 0 · Answer 1 · edited Jul 09 '16 at 22:31

0

You could use the canplaythrough event to check whether or not the the video had fully buffered (i.e: loaded).

I hope this is what you are looking for, good luck.

edited Jul 09 '16 at 22:31

answered Jul 09 '16 at 22:28

r3fresh_

87
1
8

> "The canplaythrough event occurs when the browser estimates it can play through the specified audio/video without having to stop for buffering" – George Eleftheriou Jul 09 '16 at 22:33
thanks for the answer. this way the video is not fully loaded. also for some reason this event is triggered even without the preload attribute. I dont know why. All this on Chrome 51 – George Eleftheriou Jul 09 '16 at 22:35

score 0 · Accepted Answer · answered Jul 10 '16 at 18:41

0

with the help of @Offbeatmammal i manage to solve my problem. The answer is here: Another: Force Chrome to fully buffer mp4 video. Thank everyone for your answers :D

answered Jul 10 '16 at 18:41

George Eleftheriou

53
1
8

play html5 video after fully loaded

2 Answers2