仅在文档准备好时加载视频，加载时播放答案

【问题标题】：Load video only when document is ready, play it when loaded仅在文档准备好时加载视频，加载时播放
【发布时间】：2019-02-05 17:10:50
【问题描述】：

我想仅在$(document).ready 上下载 HTML5 <video> 并仅在完全加载时播放。

<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() 不起作用。

【问题讨论】：

标签： jquery html video

【解决方案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();

});

【讨论】：