html5视频海报gif，直到显示完整视频为止

Question

I would like to keep the poster gif displayed until the full video has loaded. It seems like this is not possible but does anyone else have a work around.`

<video id="wrVideo" controls poster="/images/busy.gif" 
controlsList="nodownload"  onerror="myFunction()" preload="auto" autoplay>

The gif loads but since chrome will start playing as soon as it thinks it has enough to play, I cannot manipulate this. I can check the buffered value at various times but not sure how I can implement this to only play the video when more than half of the video duration has buffered.

vid.oncanplaythrough = function() {
    if(vid.buffered.end(0) < vid.duration){
        vid.pause;
    }

}

something like this but rather load the gif/spinner while the buffering reaches that point. Any ideas?

Answer 1

I finally figured this out and it involved a hack around chrome loading playable segments at a time. I forced the browser to download the entire video and then passed the blob url to the video source and voila, the preloader spins while the video is still loading which takes a while.