Как предварительно загружать все видео на моем сайте и на других страницах?

Я делаю видео-сайты в html5 с < видео >

В моем компьютере с сайта диска fadeIn и FadeOut очень приятно, но на моем сервере я слишком долго нахожусь на каждой странице, потому что предварительная загрузка видео начинается.

Есть ли у вас какие-либо идеи, как на сайтах

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

preloade, когда мы перейдем к Index.html? Вы знаете, мы переходим к Index.html, и мы видим предварительный загрузчик procent, и в это время мы загружаем /Index.html/Portfolio.html/Contact.html и т.д. Когда он заканчивается, все фильмы загружаются в браузер кеша и сайт, на котором он работает в реальном времени - нажмите на contact.html, и я вижу, как играть в фильм (не дожидаться предварительного просмотра видео).

Любые идеи, как это сделать? Большое спасибо, Arletap >

Ответ 1

Вы можете объединить различные html-страницы, которые у вас есть (demo-big-counter.html, demo-circle.html), в одну страницу html и разделить содержимое на разные вкладки (вы можете использовать это для реализации вкладок - http://getbootstrap.com/javascript/#tabs).

Добавьте свои видео в закладки, которые скрыты изначально, они начнут загружаться, как только откроется основной файл html.

Ответ 2

Я бы попробовал что-то с JavaScript и установил все страницы в один. Вы не можете предварительно загрузить что-то, что находится в другом HTML файле.

Ответ 3

Проверьте этот блог, очень полезно http://dinbror.dk/blog/how-to-preload-entire-html5-video-before-play-solved/#comment-202625

Я сделал это следующим образом

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();


}