Je fais un site Web qui possède une vidéo en plein écran, pour la section d'en-tête. J'aimerais que le site se charge et fonctionne aussi vite et lisse que possible, donc je ne sais pas si cela pourrait être difficile que la page d'accueil doive charger une vidéo de 50-100 Mo avant de courir (même s'il va probablement diffuser la vidéo. , comme il charge - mais je ne sais rien de la manière dont cela fonctionne).
Ma première partie de cette question est que je trébuche très rarement sur des arrière-plans vidéo qui se limitent à charger. Est-ce parce que j'ai de la chance avec les connexions que j'utilise ou que les personnes qui fabriquent des arrière-plans vidéo sont simplement intelligentes et compriment en quelque sorte la vidéo à une petite taille de fichier? P>
La deuxième partie de cette question est la meilleure solution pour mettre en œuvre ce contexte vidéo sur le site Web de My Clients? Est-ce d'utiliser la balise HTML5 ... ou est-ce que vous utilisez YouTube ou Vimeo, en l'insérant en tant que
3 Réponses :
S'il vous convient d'utiliser jQuery, vous pouvez essayer http://dfcb.github.ioIO /Bigvideo.js/ ou http://vodkababears.github.io/vide/ p>
À propos des autres questions en question: P>
Depuis que je ne peux pas commenter (encore) sur quelqu'un d'autre réponse, j'écris ici. Utilisation de MediaQui pour un contenu conditionnel (comme Alex Mo suggéré) Ne pas arrêter le navigateur pour charger la vidéo ou tout autre Ressources déclaré dans le HTML et j'aimerais demander quelles informations reposent sur l'idée qu'une iframe charge plus lentement que autre (Afaik la vitesse dépend de la quantité de données à D / l et le nombre de demandes au serveur).
Fondamentalement, les iframes causent des appels de serveur supplémentaires et c'est la raison pour laquelle vous devez l'éviter. Plus: iframes bloque votre page principale surcharger i> jusqu'à ce que le contenu de l'iframe soit chargé complètement. À mon avis, il n'est également pas la meilleure pratique d'utiliser un iframe pour les plans de fond des vidéos de fond, vous n'avez aucun contrôle sur le contenu qu'il indiquera. Utilisez une courte vidéo pour votre arrière-plan. Compressez-le et incluez-le dans MP4 et WebM Fomat directement avec
Merci Alex, pour la clarification. En fait, je me demande si vous pouvez utiliser un iframe comme un fond de page complète (mais je ne l'ai jamais essayé, c'est juste une supposition)
Je vous en prie. Je me demandais aussi si c'était possible et en ce qui concerne ce message, il devrait être possible: Lien Mais comme vous pouvez le constater, cette fonctionnalité n'est pas destinée.
J'ai modifié la réponse depuis que j'ai trouvé un autre plugin JQuery vaut noter pour une vidéo de fond complet ( Vodkabears.github.io/vide < / a>)
Voici une solution pure CSS et HTML, que je recommande, car les iframes prennent un peu plus longtemps à charger et que Google veut que les pages se chargent rapidement (impacts SEO !!).
@media screen and (max-device-width: 800px) {
html {
background: url(vid.jpg) #000 no-repeat center center fixed;
}
#bgvid {
display: none;
}
}
Vous devez définitivement télécharger votre vidéo sur YouTube et utiliser un plugin pour l'afficher sur votre site (tubulaire.js par exemple), pour les raisons suivantes: p>
1) YouTube n'a pas besoin du navigateur pour charger la vidéo en totalité, il met en cache de petites pièces, la rendant accessible presque immédiatement p>
2) YouTube échoue la résolution de la vidéo à votre bande passante (si vous avez une bande passante faible, la vidéo s'affiche en haute qualité, mais le temps d'attente pour commencer la lecture de la vidéo sera optimal) P>
Je suggère fortement que vous utilisiez un plugin tel que tubulaire ( http://www.seanmccambridge.com/tubular / ) p>
J'ai essayé beaucoup d'entre eux, Bigvideo, Masterlider, etc ... mais pour moi tubulaires est le plus facile à intégrer, n'est pas un buggy, et le plus important à mon avis, vous pouvez ajouter des couches de texte / éléments / liens sur la vidéo. p>
Vous pouvez consulter le site Web suivant que j'ai fait pour un client utilisant Tubular: www.avocats-huertas.com p>
Les navigateurs HTML5 modernes ne diffusent-ils vraiment pas automatiquement les vidéos? Il semble en arrière que
@ M. Mr.boy Il pourrait être intéressant de noter que ce ticket est de 4 ans