Showing loading animation for slow connections on HTML5 Video

Posted on

in

,

I am surprised this isn’t just part of the package but oh well.

var crurrentTime1 = 0;
        var currentTime2 = 0;
       var  oneTwo =0;

function checkVideo() {
                if (window["oneTwo"] == 1) {
                    window["oneTwo"] = 2;
                } else {
                    window["oneTwo"] = 1;
                }
                $("video").each(function(videoIndex) {
                    var videoId = $(this).attr("id");
                    var myVideo = document.getElementById(videoId);
                    if (myVideo.paused) {
                        //console.log("Paused");
                    } else {
                        console.log(myVideo.currentTime);
                        window["currentTime" + oneTwo] = myVideo.currentTime;
                        console.log("1: "+currentTime1);
                        console.log("2: "+currentTime2);
                        if (currentTime1 == currentTime2) {
                            console.log("show preloader");
                            $(".vjs-loading-spinner").show();
                        }else{
                            $(".vjs-loading-spinner").hide();
                        }
                    }

                });
            }

Basically, it’s checking constantly whether the video is playing and whether the timeline is advancing.

Leave a Reply

Your email address will not be published. Required fields are marked *

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

May 2024
M T W T F S S
 12345
6789101112
13141516171819
20212223242526
2728293031