仅在文档准备好时才加载视频，加载后才播放

Question

我只想在<video>上下载HTML5 $(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();

});