Question

我有一个包含视频标签设置的div：

<div class="video-container">
    <video class="video" muted id="the-video"> 
        <source src="/templates/assets/video/v1.mp4"/> 
        <source src="/templates/assets/video/v1.ogv" type='video/ogg;'/> 
        <img src="/templates/assets/video/v1.jpg">
    </video>
</div>

该计划是视频将由“重叠”字母覆盖＆＃39;其中包含一个链接，单击该链接时淡出叠加层并启动视频。

我想知道的是，如果我能够延迟视频的初始加载，直到点击链接并播放视频，目的是加快页面加载时间而不是在页面显示之前加载视频。到目前为止这是我的jQuery：

<script>
$(document).ready(function(e) {
    $('.play-video').click(function(e) {   
        $('.video-overlay').fadeOut('slow');      
        var video = $(".video").get(0);
        video.play();   
    $(".video").bind("ended", function() {
        $('.video-overlay').fadeIn('slow');
    });

}); 
});
</script>

最好的方法是什么？是否应该使用更大的视频？什么会影响加载时间？

由于

Answer 1

我正在寻找的答案/属性是preload="none"。这会在页面加载时停止视频加载。

只是想我会把它放在那里，以防有人遇到同样的问题

Answer 2

    loop="false"
    autostart="false"

在div视频标签中添加此项。这是你在找什么？

延迟加载HTML视频直到播放

2 个答案: