Chargement des vidéos

Bonjour,

Je souhaiterais avoir votre avis à propos de la meilleure solution à suivre pour la démarche suivante :

Je développe un site web de type OnePage comportant 5 sections. Sur chaque section, il y a un bouton qui permet d'afficher et de lancer la vidéo de la section en question.

En terme de performance, qu'est-ce-qui est le mieux ?

- Charger les 5 vidéos lors du chargement de la page.
- Charger la vidéo en question quand on est sur le section.
- Charger la vidéo en question quand on clic sur le bouton.
- Autre ?

Je vous remercie d'avance pour votre aide.

Cdl,
Flo'

Bonjour,

Il est intéressant de se poser cette question et de na pas bêtement inclure ses vidéos dans les balises appropriées. Elle revient finalement à se demander quels sont les avantages d'une technique vis-à-vis des autres et pour ce, voici mon avis.

Je reprends donc votre liste de bas en haut.

Pour "autre" je suis comme vous, en flou artistique, je ne vois pas comment on pourrait envisager autrement la chose.

Chargement au clic:
Cela implique, du point de vue utilisateur, un temps de latence entre le moment du clic et le début de la lecture. Cette durée étant fonction de la qualité de la connexion de l'utilisateur, peut être très longue sur les connexions de faible qualité. Il est très désagréable de devoir attendre entre une action et la réalisation de celle-ci. A éviter autant que faire se peut.

Chargement quand "à portée de vue":
C'est déjà mieux car la durée précédement citée sera réduite par le temps que l'utilisateur passera à lire le blabla entourant la vidéo. Mais s'il a le malheur de commencer sa lecture de la section par le visionnage de la vidéo on revient quasiment au même point en terme de latence. Beaucoup d'inconnues dans l'équation qui conduisent à un "quitte ou double". Probablement pas le meilleur choix.

Chargement au chargement de la page:
Alors oui et non. Un chargement synchrone avec le contenu de la page implique un temps de chargement de la page plus long. Quel intérêt de charger la dernière vidéo au chargement de la page et de ralentir celle-ci pour un média qui ne pourra être visionné immédiatement.
Je me disais "et si les vidéos étaient très courtes". Mais à la réflexion je me dis que vous auriez choisis un autre format (gif par exemple qui serait plus léger Edit: ha oui gif ne contient de canal audio. J'ai raté une occasion de me taire sur ce coup ).
Par contre, en chargeant les médias de manière asynchrone, c'est-à-dire que les vidéos sont chargées après le painting-time (moment qui suit celui où le DOM est construit et le css appliqué), cela ne rallongerait pas le temps de chargement de la page et présenterait l'avantage de pouvoir démarrer la lecture immédiatement après action de l'utilisateur.


The best-choice:
Selon moi il faut faire charger les vidéos le plus vite possible une fois le site accessible à l'utilisateur en privilégiant celle(s) au dessus de la ligne de flottaison (sans bloquer le chargement et l'affichage du site).
Mais pas que. Il faut aussi prévoir le cas où l'utilisateur zappe des sections (par action sur un lien interne ou par scrolling). En ce cas il faut prioriser le chargement de la vidéo qui apparaît au dessus de la ligne de flottaison.
Schématiquement, voici le processus que j'ai en tête:
1-l'utilisateur accède au site ; celui-ci se charge et s'affiche.
2-dès que le site est affiché on commence le chargement de la vidéo au dessus de la ligne de flottaison puis on charge les vidéos une à une en http 1 ou toutes en même temps en http 2 (ou par groupe - par ex par groupe de 3 vidéos).
3-si l'utilisateur se déplace dans le site on traque son déplacement et on modifie l'ordre de chargement des vidéos en fonction de sa position en gardant à l'esprit qu'il est plus probable qu'il descende plutôt qu'il ne remonte - donc s'il est en section 3 on met en file d'attente le chargement de la vidéo de la section 4.
4-une fois toutes les vidéos chargées on arrête la traque de la position utilisateur.
0-on prévoit aussi de mettre en cache les vidéos afin qu'à sa prochaine visite tout ce processus puisse être évité (ce qui implique au point 2 de contrôler si les vidéos ne sont pas déjà en cache).


Alors je ne dis pas que ceci soit facile à mettre en place mais une fois fait ce peut-être d'une redoutable efficacité. Cette théorie reste bien sûr un avis personnel pour lequel je privilégie l'expérience utilisateur au détriment du confort du développeur.


Qu'en pensez-vous ?
Modifié par Greg_Lumiere (06 May 2018 - 11:57)

[quote=Greg_Lumiere]Bonjour,

Chargement au clic:
Cela implique, du point de vue utilisateur, un temps de latence entre le moment du clic et le début de la lecture. Cette durée étant fonction de la qualité de la connexion de l'utilisateur, peut être très long sur les connexions de faible qualité. Il est très désagréable de devoir attendre entre une action et la réalisation de celle-ci. A éviter autant que faire se peut.

Bonjour,
sur mon site, aucune vidéo n'est chargée avec la page. Pour des vidéos allant d'une durée de 2 à 6 mn, il s'écoule 2.5 sc entre le clic et l'apparition de la vidéo, ce qui est quand même très acceptable. Bien sûr, tout dépend de la connexion, mais je ne suis pas sur de la fibre. Et les tests que j'ai effectués sur des smartphones sont tout à fait probants. Une solution serait de proposer un image légère en attendant la vidéo, mais je ne sais pas si c'est possible. L'encodage de la vidéo a aussi son importance. Certains encodages donnent des vidéos beaucoup plus fluides que d'autres.

Cordialement.

Bongota a écrit :

il s'écoule 2.5 sc entre le clic et l'apparition de la vidéo, ce qui est quand même très acceptable.

Je suis relativement d'accord mais j'ai envie de dire 1s serait mieux et la moitié encore mieux, non ?
Néanmoins ce que je décris sur le plan théorique est une vision utopique de vidéos qui se lisent instantanément à l'intervention de l'utilisateur. Vous et moi sachons pertinemment qu'en pratique cela est quasiment impossible. Le but étant de viser un sommet pour en réalité s'en approcher au plus près.

Bongota a écrit :
L'encodage de la vidéo a aussi son importance. Certains encodages donnent des vidéos beaucoup plus fluides que d'autres.

Je suis partis du principe que ce travail en amont a déjà été exécuté et que les vidéos sont optimisées au maximum.

Bongota a écrit :
Une solution serait de proposer un image légère en attendant la vidéo, mais je ne sais pas si c'est possible.

Qu'entendez-vous par "image légère" ? Faîtes-vous référence à l'attribut poster ?


Certes, tout ceci demande des efforts considérables en développement mais bien exécutées, ces étapes amélioreront grandement l'expérience utilisateur.

Greg_Lumiere a écrit :
Bonjour,

Il est intéressant de se poser cette question et de na pas bêtement inclure ses vidéos dans les balises appropriées. Elle revient finalement à se demander quels sont les avantages d'une technique vis-à-vis des autres et pour ce, voici mon avis.

Je reprends donc votre liste de bas en haut.

Pour "autre" je suis comme vous, en flou artistique, je ne vois pas comment on pourrait envisager autrement la chose.

Chargement au clic:
Cela implique, du point de vue utilisateur, un temps de latence entre le moment du clic et le début de la lecture. Cette durée étant fonction de la qualité de la connexion de l'utilisateur, peut être très longue sur les connexions de faible qualité. Il est très désagréable de devoir attendre entre une action et la réalisation de celle-ci. A éviter autant que faire se peut.

Chargement quand "à portée de vue":
C'est déjà mieux car la durée précédement citée sera réduite par le temps que l'utilisateur passera à lire le blabla entourant la vidéo. Mais s'il a le malheur de commencer sa lecture de la section par le visionnage de la vidéo on revient quasiment au même point en terme de latence. Beaucoup d'inconnues dans l'équation qui conduisent à un "quitte ou double". Probablement pas le meilleur choix.

Chargement au chargement de la page:
Alors oui et non. Un chargement synchrone avec le contenu de la page implique un temps de chargement de la page plus long. Quel intérêt de charger la dernière vidéo au chargement de la page et de ralentir celle-ci pour un média qui ne pourra être visionné immédiatement.
Je me disais "et si les vidéos étaient très courtes". Mais à la réflexion je me dis que vous auriez choisis un autre format (gif par exemple qui serait plus léger Edit: ha oui gif ne contient de canal audio. J'ai raté une occasion de me taire sur ce coup ).
Par contre, en chargeant les médias de manière asynchrone, c'est-à-dire que les vidéos sont chargées après le painting-time (moment qui suit celui où le DOM est construit et le css appliqué), cela ne rallongerait pas le temps de chargement de la page et présenterait l'avantage de pouvoir démarrer la lecture immédiatement après action de l'utilisateur.


The best-choice:
Selon moi il faut faire charger les vidéos le plus vite possible une fois le site accessible à l'utilisateur en privilégiant celle(s) au dessus de la ligne de flottaison (sans bloquer le chargement et l'affichage du site).
Mais pas que. Il faut aussi prévoir le cas où l'utilisateur zappe des sections (par action sur un lien interne ou par scrolling). En ce cas il faut prioriser le chargement de la vidéo qui apparaît au dessus de la ligne de flottaison.
Schématiquement, voici le processus que j'ai en tête:
1-l'utilisateur accède au site ; celui-ci se charge et s'affiche.
2-dès que le site est affiché on commence le chargement de la vidéo au dessus de la ligne de flottaison puis on charge les vidéos une à une en http 1 ou toutes en même temps en http 2 (ou par groupe - par ex par groupe de 3 vidéos).
3-si l'utilisateur se déplace dans le site on traque son déplacement et on modifie l'ordre de chargement des vidéos en fonction de sa position en gardant à l'esprit qu'il est plus probable qu'il descende plutôt qu'il ne remonte - donc s'il est en section 3 on met en file d'attente le chargement de la vidéo de la section 4.
4-une fois toutes les vidéos chargées on arrête la traque de la position utilisateur.
0-on prévoit aussi de mettre en cache les vidéos afin qu'à sa prochaine visite tout ce processus puisse être évité (ce qui implique au point 2 de contrôler si les vidéos ne sont pas déjà en cache).


Alors je ne dis pas que ceci soit facile à mettre en place mais une fois fait ce peut-être d'une redoutable efficacité. Cette théorie reste bien sûr un avis personnel pour lequel je privilégie l'expérience utilisateur au détriment du confort du développeur.


Qu'en pensez-vous ?

Bonjour Greg,

Merci beaucoup pour cette réponse très détaillée qui m'a permis de mieux comprendre tout ça.
J'ai suivi votre conseil et je me suis lancé sur la piste de la dernière solution que vous m'avez donnée.

Je précise que j'utilise le plugin fullpage.js et que chaque section agit telle une nouvelle page (API history). Ainsi, un utilisateur n'arrivera pas forcément sur la première section de la page.
De plus, une classe active est ajoutée automatiquement à la section affichée.

Je ne l'ai pas encore mis en pratique, mais voilà pour le moment ce que j'ai codé en suivant votre méthodologie :

J'ai utilisé jQuery puisque le plugin fullpage.js en dépend.

$(document).ready(function() {
  
  var sections = $('.section');

  videosLoad();
  
  
  /* Fonction de chargement des vidéos */
  function videosLoad() {
    var activeSection = $('section.'+active); // section active
    var prev = activeSection.prev('.section'); // section précédente
    var next = activeSection.next('.section'); // section suivante
    
    // Ordre de chargement : section active, sections adjacentes, autres
    if (!activeSection.hasAttr('data-loaded')) {
      $(this).children('video').load();
    } 
    else if (activeSection.hasAttr('data-loaded') && !prev.hasAttr('data-loaded')) {
      $(prev).children('video').load();
    } 
    else if (activeSection.hasAttr('data-loaded') && !next.hasAttr('data-loaded')) {
      $(next).children('video').load();
    } 
    else {
      $('.section[data-loaded != "true"]').children('video').load();
    }
  }
  
  
  /* Lorsqu'une vidéo est suffisamment chargée */
  sections.each(function(e) {
    $(this).on('canplay canplaythrough', function() {
      $(this).attr('preload', 'none'); // stop le chargement
      $(this).attr('data-loaded', 'true');
      videosLoad();
    });
  });
  
  
  // Plugin fullpage.js 
  $('#fullpage').fullpage({
    
    /* Lorsque l'utilisateur change de section (fonction spéciale du plugin) */
    onLeave: function(index, nextIndex, direction) {
      section.length ? (section.attr('preload', 'none'), videosLoad()) : '';
    }
    
  });

});

Le schéma suivant se répète à chaque fois que le chargement d'une vidéo est terminé et à chaque changement de section :
https://nsa39.casimages.com/img/2018/05/06/180506031436519523.png

Voilà.
Si vous avez des conseils ou des améliorations, je les prendrai avec joie.

Merci.
Modifié par flox (06 May 2018 - 15:17)

Bonjour Flox,

Tu peux aussi nous donner le code html initial de déclaration des videos
pour voir la cohérence générale
Modifié par aliasdmc (07 May 2018 - 08:36)