Estoy tratando de luchar contra un gran cambio de diseño acumulativo (CLS) en una página donde mi mayor problema es (según GTMetrix) » Evitar enormes cargas útiles de red
Entonces, mi pregunta es : dado que el video es de una URL externa, estaba pensando si es posible cargar la URL del video solo después de que la página esté completamente cargada.
Aquí está mi código :
<video controls poster="https://picsum.photos/id/237/560/320" width="560px" height="320px" controlsList="nodownload" class="connect-bg"> <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4"> </video>¿Hay alguna manera de hacer esto? ¿Funcionará?
Todo se explica en los comentarios, así que léelo primero.
// fires when page is loaded window.addEventListener("load", () => { // get video by its id const video = document.getElementById("video"); // poster and src url const poster = "https://picsum.photos/id/237/560/320"; const src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"; // set video poster and src video.poster = poster; video.firstElementChild.src = src; // load video video.load(); }); <video id="video" controls width="560px" height="320px" controlsList="nodownload" class="connect-bg"> <source src="" type="video/mp4"> </video>Si algo está mal, por favor dímelo, lo arreglaré.
No estoy 100% seguro de que esto funcione.
¡Gracias!