Opóźnij ładowanie filmu HTML do momentu jego odtworzenia - jquery, html5, video, load, html5-video

Mam div zawierający konfigurację tagu wideo jako taką:

<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="/images//templates/assets/video/v1.jpg">
</video>
</div>

Plan polega na tym, że film zostanie objęty „div div nakładki”, która zawiera link, który po kliknięciu wycisza nakładkę i uruchamia wideo.

Chciałbym wiedzieć, czy mogę opóźnićpoczątkowe ładowanie wideo do momentu kliknięcia łącza i odtworzenia wideo, z zamiarem skrócenia czasu ładowania strony zamiast ładowania wideo przed wyświetleniem strony. Oto moje dotychczasowe 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>

Jaki może być najlepszy sposób na to? Czy należy użyć większego wideo? Coś, co wpłynie na czasy ładowania?

Dzięki

Odpowiedzi:

Wygląda na to, że szukam odpowiedzi / atrybutu preload="none". Zatrzymuje to ładowanie wideo po załadowaniu strony.

Pomyślałem, że opublikuję to na wypadek, gdyby ktoś miał ten sam problem

    loop="false"
autostart="false"

Dodaj to do siebie tag wideo div. Czy tego szukałeś?