Optimisation du chargement de la vidéo sur une page Web

Question

J'ai une application d'une seule page qui contient plusieurs balises vidéo dans chaque section. La hauteur de la fenêtre est la hauteur de la section. Chaque tag a une vidéo différente avec le format MP4. Je veux charger ces vidéos rapidement sans affecter le temps de chargement de la page, donc je l'ai essayé de charger par charge paresseuse en utilisant jquery. Mais le problème est la taille du fichier vidéo est de 5 Mo et il faut du temps pour charger. Est tout autre moyen possible de charger ma première section vidéo sur le chargement de la page et reste après la fin du chargement de la page ou en tant que processus en arrière-plan sans montrer à l'utilisateur. J'utilise fulls js pour mon application d'une seule page. Il a un avenir pour le chargement paresseux et je l'utilise pour charger mon contenu vidéo. Comme je l'ai dit plus tôt chaque vidéo est 5Mb de taille de fichier. Voici le code utilisé dans mon application en une seule page.

<video> <source data-src="video.mp4" type="video/mp4" /> </video>

Merci à l'avance.

Answer 1

Je fais de telles tâches avec chargement paresseux de ces éléments, chacun par chacun. Pour cela, vous pouvez utiliser jQuery.Lazy et le AV plugin, pour gérer de tels tags. C'est assez facile à mettre en œuvre.

Au lieu de votre étiquette video originale:

<video> 
    <source data-src="video.mp4" type="video/mp4" /> 
</video> 

Vous changer à:

<video data-src="video.mp4|video/mp4"></video> 

Ou une autre façon d'écrire:

<video> 
    <data-src src="video.mp4" type="video/mp4"></data-src> 
</video> 

ajouter ensuite les deux fichiers de script à votre document:

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.5/jquery.lazy.min.js"></script> 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.5/plugins/jquery.lazy.av.min.js"></script> 

et initialiser le plugin ensuite en vous page:

<script type="text/javascript"> 
jQuery(function($) { 
    $("video").lazy(); 
}); 
</script> 

C'est tout. Les vidéos seront chargées lorsque l'utilisateur atteindra la fenêtre d'affichage. Vous pouvez aller plus loin, en shoing une animation de chargement ou autre chose.