CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
Arleta Koźmińska
Arleta Koźmińska

Reputation: 119

How to preload all videos in my website and other pages?

I'm make video websites in html5 with < video >

In my computer from disc website fadeIn and FadeOut very nice, but in my server i wait too long in every page because video starting preload.

Have you are got any idea how to sites

/Index.html
/Portfolio.html
/Contact.html

preloade when we go to Index.html? You know, we go to Index.html and we see procent preloader and in this time we loading /Index.html /Portfolio.html /Contact.html etc. When it's finish, all movies is loaded in cache browser and website it's working in realtime - click to contact.html and i see playing movie (not wait to preload video).

Any ideas how to make it? Thanks a lot, Arleta

Upvotes: 10

Views: 1716

Answers (3)

arun-r
arun-r

Reputation: 3381

Check this blog, very useful http://dinbror.dk/blog/how-to-preload-entire-html5-video-before-play-solved/#comment-202625

I have done it as follows

var percentage = 0;


function update_progress(e) {
    if (e.lengthComputable) {



            percentage = Math.round((e.loaded / e.total) * 100) - 50;
            console.log("percent " + percentage + '%');

    } else {
        console.log("Unable to compute progress information since the total size is unknown");
    }
}

function transfer_complete(e) {
    console.log("The transfer is complete.");

}

function transfer_failed(e) {
    console.log("An error occurred while transferring the file.");
}

function transfer_canceled(e) {
    console.log("The transfer has been canceled by the user.");
}

function downloadVideo() {

    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } //code for modern browsers} 
    else {
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } // code for IE6, IE5      
    xhttp.onprogress = update_progress;
    xhttp.responseType = 'blob';
    xhttp.addEventListener("load", transfer_complete, false);
    xhttp.addEventListener("error", transfer_failed, false);
    xhttp.addEventListener("abort", transfer_canceled, false);
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            var videoBlob = xhttp.response;
            var vid = URL.createObjectURL(videoBlob); // IE10+
            // Video is now downloaded
            // and we can set it as source on the video element

                $('#myVideo').attr('src', vid);

        }
    };

    xhttp.open("GET", "media/2.mp4", true);
    xhttp.send();


}

Upvotes: 0

Jayant Jain
Jayant Jain

Reputation: 93

You could combine the different html pages you have (demo-big-counter.html, demo-circular.html) into a single html page and separate the content into different tabs (You could use this for implementing tabs - http://getbootstrap.com/javascript/#tabs).

Add your videos to tabs that are hidden initially, they will start loading as soon as the main html file is opened.

Upvotes: 1

Christian Agius
Christian Agius

Reputation: 309

I would try something with JavaScript and set all the pages into one. You cannot preload something which is in another HTML file.

Upvotes: 1

Related Questions