Retarder le chargement de la vidéo html5
J'ai une vidéo de l'élément utilisé comme arrière-plan d'une section vers le bas d'une page que je suis en train de construire. Je suis en train de construire une sorte de "lazy-load" pour elle par le stockage de la src en tant que données d'attribut src et l'utilisation de jQuery pour l'appliquer à l'attribut src après les autres actifs ont chargé (puisqu'il n'est pas un héros de l'image ou quoi que ce soit, je veux charger une affiche pour enregistrer coupe au moment du chargement, puis charger la vidéo plus tard). Il ne semble pas fonctionner pour moi. L'attribut src est appliqué correctement, mais la vidéo ne se charge pas ou lecture automatique. Suis-je aborder cette question par le mauvais angle? Est-il une meilleure façon de l'accomplir?
Bâtiment sur wordpress.
HTML de base
<video width="100%" loop controls autoplay class="connect-bg">
<source data-src="<?php echo get_template_directory_uri(); ?>/contact_Footer.mp4" type="video/mp4">
</video>
Fonction jQuery
$(window).load(function(){
footer_lazyloader();
});
function footer_lazyloader() {
var $ = jQuery;
$("video.connect-bg source").each(function(){
var sourceFile = $(this).attr('data-src');
$(this).attr('src',sourceFile);
});
}
src
sur votre source?
<source de données-src="<?php echo get_template_directory_uri(); ?><u> " src=" /contact_Footer.mp4" type="video/mp4">`actuellement, l'utilisation de javascript pour saisir l'url de la "data-src' de l'attribut et de passer la src à partir d'un espace réservé minuscule gif à l'url de la vidéo stockés. oublié d'ajouter le tinygif espace réservé src! 🙂
OriginalL'auteur Jon Hendershot | 2015-12-02
Vous devez vous connecter pour publier un commentaire.
Vous pouvez déclencher manuellement la vidéo à charger et jouer en utilisant la fonction".load()' et '.play ()", respectivement. Cible le parent de la "source" de l'élément à l'aide de 'parentElement pour accomplir ceci:
juste une remarque à propos de manière plus facile de faire appel de la balise de données
$(this).data('src')
=$(this).attr('data-src')
mais sinon un1^^OriginalL'auteur guest271314