8
votes
Fond vidéo en plein écran -
VS YOUTUBE / VIMEO-
?</h1> </div> <div class="body-content"> <p> 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). <p> 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> <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 <code> <vidéo> </ code>? (trouvé dans ce <a href="https://css-tricks.com/forums/topic/background-video-how-is-this-done/" rel="noreferrer"> lien </a>): < / p> <pré> xxx </ pré> <p> ... ou est-ce que vous utilisez YouTube ou Vimeo, en l'insérant en tant que <code> <iframe> </ code>? Je suppose que la vraie question est que ma société d'hébergement (One.com) m'offre plus de bande passante que YouTube ou Vimeo? Ou s'il y a une solution recommandée là-bas pour faire cela? </ P> <p> et si un commentaire peut être fait de ce qui est préférable à des fins de référencement, cela serait également apprécié. </ p> </ p> </div> <!-- tags --> <div class="d-flex mt-1"> <div class=""> <a class="badge badge-info" href="/tag/html">html</a> <a class="badge badge-info" href="/tag/css">css</a> <a class="badge badge-info" href="/tag/youtube">youtube</a> <a class="badge badge-info" href="/tag/video">video</a> </div> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="2186005983" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <!-- Answers --> <p class="mt-4 font-weight-bold">3 Réponses :</p> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 2<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> S'il vous convient d'utiliser jQuery, vous pouvez essayer <a href="http://dfcb.github.io/bigvideo.js/" rel="nofollow"> http://dfcb.github.ioIO /Bigvideo.js/ </a> ou <a href="http://vodkababears.github.io/vide/" rel="nofollow"> http://vodkababears.github.io/vide/ </a> </ p> <p> À propos des autres questions en question: </ P> <ul> <li> Ce n'est pas une bonne idée de tirer 50-100 Mo vidéo face à un utilisateur médiocre surtout s'il est sur une connexion de données mobile </ li> <li> YouTube et Vimeo ont définitivement une meilleure bande passante que votre société d'hébergement </ LI> <li> Même si vous n'utilisez pas le plug-in jquery à l'aide d'un iframe pour une vidéo d'arrière-plan ne fonctionnera pas bien (du tout) </ li> <li> Je ne suis pas un expert réel mais je ne peux pas avoir le point du référencement pour une vidéo d'arrière-plan </ li> </ ul> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">5 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> 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é) <a href="https://www.igvita.com/2012/06/14/debunking-Responsive-css-performance-myths/" rel="nofollow Noreferrer"> Ne pas arrêter le navigateur pour charger la vidéo </a> ou tout autre <A href = "https://www.christianheilmann.com/2012/12/19/conditional-loading-of-Resources-withMediaqueries/" rel = "nofollow noreferrer"> Ressources déclaré dans le HTML </a> 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). </p> <hr> <p class="answer-comment"> 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 <i> 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 <Code> <VIDEO> </ CODE> Tags. </p> <hr> <p class="answer-comment"> 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) </p> <hr> <p class="answer-comment"> Je vous en prie. Je me demandais aussi si c'était possible et en ce qui concerne ce message, il devrait être possible: <a href = "http://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-Height-fof-100 "> Lien </a> Mais comme vous pouvez le constater, cette fonctionnalité n'est pas destinée. </p> <hr> <p class="answer-comment"> J'ai modifié la réponse depuis que j'ai trouvé un autre plugin JQuery vaut noter pour une vidéo de fond complet (<a href="http://vodkabears.github.io/vide/" rel="nofollow Noreferrer"> Vodkabears.github.io/vide < / a>) </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> 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 !!). <pre>@media screen and (max-device-width: 800px) { html { background: url(vid.jpg) #000 no-repeat center center fixed; } #bgvid { display: none; } } </pre></p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 6<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> 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> <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> <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> <p> Je suggère fortement que vous utilisiez un plugin tel que tubulaire (<a href="http://www.seanmcccambridge.com/tubulaire/" rel="noreferrer"> http://www.seanmccambridge.com/tubular / </a>) </ p> <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> <p> Vous pouvez consulter le site Web suivant que j'ai fait pour un client utilisant Tubular: www.avocats-huertas.com </ p> </div> <hr> <!-- comments --> <div class="pl-5"> <small class="text-muted">2 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Les navigateurs HTML5 modernes ne diffusent-ils vraiment pas automatiquement les vidéos? Il semble en arrière que <iframe> est meilleur que <vidéo>! </p> <hr> <p class="answer-comment"> @ M. Mr.boy Il pourrait être intéressant de noter que ce ticket est de 4 ans </p> <hr> </div> </div> </div> </div> <hr> </div> <div class="col-lg-3 col-md-12 col-12 col-sm-12" > <div class="related"> <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0">
Articles qui pourrait vous intéresser :
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor
