Загружайте видео только когда документ готов, воспроизводите его при загрузке

Question

Я бы хотел загрузить HTML5 <video> только на $(document).ready и воспроизводить его только после полной загрузки.

<video preload="none" id="showcase-video-1">
     <source src="img/doggo.mp4" type="video/mp4">
     <source src="img/doggo.webm" type="video/webm">
</video>

С preload="none" Я избегаю загрузки видео.С помощью этого кода я могу узнать, когда видео будет готово к воспроизведению:

$(document).ready(function(){
     $('#showcase-video-1').on("canplaythrough", function(e){

     })
});

Как я могу запустить загрузку?Видео не имеет элементов управления, это должно происходить без взаимодействия с пользователем.

$('#showcase-video-1').load() не работает.

Answer 1

// We use window.onload instead of document.ready because the latter is triggered before all images are downloaded
$(window).on("load", function(){

    var video_jq = $('#showcase-video-1')
    var video_node = video_jq.get(0);

    video_jq.on("canplaythrough", function(e){

        // Video is downloaded, trigger playing
        video_node.play();

    });

    // All resources are ready, trigger video downloading
    video_node.load();

});