IPB

Bienvenue invité ( Connexion | Inscription )

2 Pages V   1 2 >  
Reply to this topicStart new topic
> Meilleur moyen d'intégrer des vidéos, lisibles par tous
Options
Anard
posté 4 Nov 2015, 12:39
Message #1


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 659
Inscrit : 7 May 2015
Membre no 195 224



Bonjour,

Je propose sur mon site une vidéo grâce à la balise <video> HTML5 et je me pose des question sur le meilleur moyen d'intégrer celle-ci.
Voici mon code :
Code
<video controls poster="Corbinola/img-video.jpg" width="560">
   <source src="Corbinola/corbinola.mp4" />
   <source src="Corbinola/corbinola-mid.mp4" />
   <source src="Corbinola/corbinola-low.mp4" />
   <source src="Corbinola/corbinola.ogv" />
   <source src="Corbinola/corbinola.webm" />
   <source src="Corbinola/corbinola-mid.webm" />
   <source src="Corbinola/corbinola-low.webm" />
   <iframe width="560" height="315" src="https://www.youtube.com/embed/Q5USKnPphxs?rel=0" allowfullscreen></iframe>
</video>


A priori, le navigateur choisit la meilleure version pour lui (comment, j'avoue que ça me dépasse). Il a plusieurs qualités disponibles (normal, mid et low), mais comment savoir s'il va vraiment choisir le fichier le plus adapté ? Je peux demander à Firefox de me dire quelle version il a choisi (Outils -> Informations sur la page -> Onglet Medias) mais je ne sait pas ce qu'il se passerait sur d'autres ordinateurs/navigateurs/connexions...

Normalement, si le navigateur ne comprend pas le HTML5, il redirigera vers l'intégration de la vidéo hébergée sur Youtube, qui, à priori encore une fois, est compatible avec quasi toutes les configs.
J'aurai pu proposer un lien de téléchargement direct vers les vidéos, mais alors je serai dans l'incapacité de savoir si l'utilisateur sera en mesure de lire plutôt du mp4, webM ou ogg, ni d'ailleurs de savoir si sa connexion nécessitera une version basse qualité ou pas. En revanche, sur YouTube, on peut modifier directement la qualité depuis leur lecteur...

Le problème que j'ai rencontré est qu'un visiteur m'a dit avoir le son sans l'image. Pour le moment, je n'ai pas la réponse de l'OS ni du navigateur qu'il a utilisé. Je ne sais pas s'il sera en mesure de me dire quelle version a été choisie par le navigateur.

Avez-vous un autre moyen de tester la chose sur diverses configs ou d'être certains que la vidéo fonctionnera chez tout le monde ?

La page en question est ici

Ce message a été modifié par Anard - 4 Nov 2015, 12:55.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post
scoch
posté 4 Nov 2015, 16:39
Message #2


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



Bonjour,

d'où sors-tu que le navigateur est capable de choisir la version (hd, md, sd) de la vidéo ? À ma connaissance le navigateur joue le premier fichier qu'il est capable de lire.
D'ailleurs, dans ton code tu places la source ogg avant webm alors que webm est généralement de meilleur qualité.
De plus, il faut également préciser le type mime.
Pour iOS et OS X tu peux éventuellement placer en première source un fichier quicktime .mov de haute qualité.

Code
<video width="400" height="300" controls poster="poster.jpg">
    <source src="film.mp4" type="video/mp4"></source>
    <source src="film.webm" type="video/webm"></source>
    <source src="film.ogv" type="video/ogg"></source>
    <p>
        Contenu alternatif.
    </p>
</video>


Le mieux est de proposer à l'utilisateur de choisir la qualité, tu mémorises son choix dans un cookie JavaScript ou une session php. Une fois son choix fait tu adaptes les urls des fichiers.

Ce message a été modifié par scoch - 4 Nov 2015, 23:28.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
Anard
posté 4 Nov 2015, 17:39
Message #3


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 659
Inscrit : 7 May 2015
Membre no 195 224



Je ne sais pas où j'ai vu ça, je l'ai probablement imaginé rolleyes.gif
Mais en tout cas, merci pour les infos.
J'ai appris sur OpenClassRooms, c'est pour ça que je ne précisait pas le type :
Citation (OPC)
Vous utiliserez la balise <source> à l'intérieur de la balise <video> pour proposer différents formats. Le navigateur prendra celui qu'il reconnaît :
Code
<video controls poster="sintel.jpg" width="600">
    <source src="sintel.mp4">
    <source src="sintel.webm">
    <source src="sintel.ogv">
</video>


Ca lui permet de mieux s'y retrouver de le préciser ? Parce que dans l'ensemble, Firefox utilise toujours un fichier qu'il reconnait chez moi.

Ce message a été modifié par Anard - 4 Nov 2015, 17:41.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post
scoch
posté 4 Nov 2015, 18:34
Message #4


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



La déclaration des types MIME c'est pour préciser le type de fichier. Tu pourrais très bien renommer un fichier .pdf en .mp4 sans que ça en fasse pour autant un fichier .mp4.
Le mieux est de préciser les types MIME dans un fichier .htaccess en y ajoutant ces trois lignes :
Code
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
niap
posté 4 Nov 2015, 18:48
Message #5


Macbidouilleur de bronze !
**

Groupe : Membres
Messages : 479
Inscrit : 8 Aug 2003
Lieu : Haut-Rhin
Membre no 8 967



Le naviguateur n'est pas capable de choisir parmis les différentes qualités. Il cherche parmis les types proposés et affiche ce qu'il peut.
Lisible par tous, ça va demander du boulot. Il faudrait fournir les formats suivants :
- MP4 : le "standard" actuel
- OGG : pour les versions de Firefox qui n'interprêtaient pas le MP4 (< 21 selon le système d'exploitation)
- FLV : pour les anciens navigateurs qui ne lisent ni le MP4 ni le OGG et qui ont le plug-in Flash

Et si vraiment tu veux toucher tous le monde :
- 3GP : pour les téléphones portables qui n'interprètent pas le MP4
- MPG 1 : La vidéo sera lisible sur Windows 95.

Si tu veux, tu peux aussi prendre en compte le cas particulier de l'iPad premier du nom qui ne sait pas lire grand chose et pour lequel il faut encoder la vidéo selon des paramètres bien spécifiques :

Citation
H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. (The Baseline profile does not support B frames.)

MPEG-4 Part 2 video (Simple Profile)


Plus d'info sur le site d'Apple.

Quand aux types MIME je rajoutetrais

Citation
AddType audio/ogg .oga
AddType video/ogg .ogv .ogg


Ce message a été modifié par niap - 4 Nov 2015, 18:50.


--------------------
iMac 27 2011
---------------
parcours : Mac SE, LC 630, 8100/80, G3 450, G4 MDD bi 867, G5 bi 2,5Ghz

Un de mes sites - Quelques articles sur la conception d'un site
Go to the top of the page
 
+Quote Post
Anard
posté 4 Nov 2015, 19:40
Message #6


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 659
Inscrit : 7 May 2015
Membre no 195 224



Tu ne parles pas du webM ? C'est fait exprès ?
En tout cas c'est retenu pour les autres formats, je ne sais pas si Handbrake pourra tout faire, mais dans l'idée, ça ne me dérange pas trop de multiplier les genres : je dispose d'un hébergement de 660Mo et n'en utilise que 150Mo. Cette vidéo est la seule que j'héberge et même s'il y en avait une ou deux de plus, ça passerait...

Pour les qualités, j'utilise déjà des sessions PHP pour convertir les pages en anglais (approximatif), donc la solution de Scoch me convient pas mal.
Les premiers iPad géraient déjà le HTML5 ?

Je n'ai pas d'audio, donc pas besoin pour le moment du type .oga

Je ne connais rien dans tous ces formats video, mais dans le principe, je cherche à être visible et lisible par tous. Ma clientèle a entre plus de 20 et 80 ans, donc, il vaut mieux tout prévoir !

Ce message a été modifié par Anard - 5 Nov 2015, 21:56.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post
niap
posté 4 Nov 2015, 22:57
Message #7


Macbidouilleur de bronze !
**

Groupe : Membres
Messages : 479
Inscrit : 8 Aug 2003
Lieu : Haut-Rhin
Membre no 8 967



Citation (Anard @ 4 Nov 2015, 19:40) *
Tu ne parles pas du webM ? C'est fait exprès ?

Oui, c'est un peu par fénéantise pour éviter d'encoder encore plus de vidéo.
Je trouve qu'il n'apporte pas grand chose en terme de compatibilité.
Regarde le tableau de compatibilité chez Mozilla : https://developer.mozilla.org/en-US/docs/We...d_media_formats

En général je me contente du MP4, OGG et FLV.


--------------------
iMac 27 2011
---------------
parcours : Mac SE, LC 630, 8100/80, G3 450, G4 MDD bi 867, G5 bi 2,5Ghz

Un de mes sites - Quelques articles sur la conception d'un site
Go to the top of the page
 
+Quote Post
scoch
posté 4 Nov 2015, 23:28
Message #8


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



Citation (niap @ 4 Nov 2015, 18:48) *
- FLV : pour les anciens navigateurs qui ne lisent ni le MP4 ni le OGG et qui ont le plug-in Flash

FLV n'a plus d'utilité depuis 2007 car Flash Player 9.3 a permis de lire des MP4 H.264 sur Windows, Mac et Linux. L'accélération matérielle est arrivée avec Flash Player 10.

Citation (Anard @ 4 Nov 2015, 19:40) *
Tu ne parles pas du webM ?

Firefox et Opera lisent les vidéos WebM et Ogg. WebM est de meilleur qualité que Ogg. Généralement le fichier Ogg est pour les vieux Firefox. Regarde l'exemple en haut de la page chez Mozilla (indiquée aussi par niap), ils utilisent deux sources : WebM et MP4. Plus de Ogg wink.gif

Pour servir des vidéos MP4 de dimensions et de qualités différentes, tu peux préparer des fichiers de ce genre :
- Full HD : MP4/H.264, High profile, 1920x1080
- HD : MP4/H.264, Main profile, 1280x720, à partir de l'iPhone 4 et de l'iPad 2
- SD : MP4/H.264, Baseline profile, 640x480

Citation (Anard @ 4 Nov 2015, 17:39) *
Je ne sais pas où j'ai vu ça, je l'ai probablement imaginé rolleyes.gif

Il y a apparemment une solution (pas standard HTML5) pour iOS et OSX avec Quicktime Pro wink.gif
Dans les options d'exportation pour le Web, il y a moyen de faire pointer un fichier .mov vers d'autres sources.

Ce message a été modifié par scoch - 4 Nov 2015, 23:55.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
Anard
posté 5 Nov 2015, 09:06
Message #9


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 659
Inscrit : 7 May 2015
Membre no 195 224



Merci à vous pour touttes ces informations.

Je vais essayer de faire quelque chose d'un peu mieux que j'avais mis en place pour le moment. Pour la FullHD, ça risque d'être complqiué, la vidéo a été filmée avec un iPhone3GS en 720p.
Mais je vais essayer de me baser sur cet ordre de grandeur pour encoder et proposer dans l'ordre m4v, webM, flv, 3gp, mpg. (si je trouve un logiciel pour faire tout ça !, handbrake s'arrête à m4v et mkv)


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post
scoch
posté 5 Nov 2015, 09:46
Message #10


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



Si ta source vidéo est en 720p, ne la propose pas en définition supérieure wink.gif
Tu peux te limiter à deux qualités : SD en 640x480 et HD en 720p.

Pour convertir les vidéos aux différents formats tu peux utiliser Adobe Premiere (si tu l'as) ou l'application gratuite Miro Video Converter. Je l'utilise parfois, c'est hyper simple mais ne propose pas d'options avancées (dont tu n'as pas besoin a priori). Par contre, la page de téléchargement sur le site officiel semble vérolée… tu peux éventuellement le télécharger ici.

Ce message a été modifié par scoch - 5 Nov 2015, 09:47.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
Anard
posté 5 Nov 2015, 20:34
Message #11


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 659
Inscrit : 7 May 2015
Membre no 195 224



C'est fait. EN effet en .ogv, la qualité est vraiment dégu..lasse, c'est gênant de proposer un version "HD" et "SD", vu la qualité merdi... des deux versions.
Conversions faites avec Miro, il donne assez peu de choix pour améliorer les choses à la conversion en ogv..
Je tiens à être vraiment lisible par un maximum. Je viens de racheter un ordi : le précédent datait de 2000. Depuis au moins 5 ans, je pouvais lire de moins en moins de choses sur internet et je l'ai très mal vécu parce que l'ordinateur fonctionnait très bien. Il est principalement devenu obsolète à cause de la fainéantise des développeurs web...

Peut-être que je peux virer les versions ogg si les Firefox <21 peuvent lire les .flv ou .3gp ?
Je le mets en dernier choix pour l'instant, parce que même le 3gp est de meilleure qualité !

EDIT : N'y aurait-il pas moyen de récupérer le temps de chargement de la page dans mon script PHP (une variable qui donnerait le temps moyen de réponse des scripts) pour tenter d'estimer la qualité de la connexion et de choisir la qualité envoyée par défaut (ce qui n'empêche pas un lien sous la vidéo pour changer la définition...) ?
Par exemple :
Code
<?php
  //Début du script (pour chaque page du site) on mesure le temps de chargement
  $timein=time();

  //Fin du script
  $timeout=time();
  $chargement=$timeout-$timein;
  if (!isset($_SESSION['tps_charg'])) //on enregistre le temps de chargement à la première page visitée
  {
    $_SESSION['tps_charg']=$chargement;
    $_SESSION['nb_pages']=1;
  }
  else //sinon on fait la moyenne sur le nb de pages visitées
  {
    $_SESSION['tps_charg']=($_SESSION['tps_charg']*$_SESSION['nb_pages']+$chargement)/($_SESSION['nb_pages']+1);
    $_SESSION['nb_pages']++;
  }
  
  //Début du script où se trouve la vidéo
  if (!isset($_SESSION['tps_charg']) || $_SESSION['tps_charg']<1) //Si le temps de chargement des pages du site est assez court (quelle valeur donner ?????) OU si on n'a pas encore de données (première page visitée)
  {
    $_SESSION['definition_video']='hd';
  }
  else { $_SESSION['definition_video']='sd'; }
?>


Dans l'idée en tout cas, mais j'imagine qu'il y aurait plus simple...

Ce message a été modifié par Anard - 5 Nov 2015, 21:48.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post
scoch
posté 5 Nov 2015, 23:06
Message #12


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



Citation (Anard @ 5 Nov 2015, 20:34) *
Peut-être que je peux virer les versions ogg si les Firefox <21 peuvent lire les .flv ou .3gp ?
Je le mets en dernier choix pour l'instant, parce que même le 3gp est de meilleure qualité !

Firefox 3.5 supporte ogg. Firefox 4 supporte webm qui est meilleur que ogg. À toi de voir si tu te passes ou pas des sources ogg.

Pourquoi utiliser des flv qui seront lues par Flash Player ?
Flash Player 9.3 (qui lit le mp4 h.264) date de 2007, soit Firefox 2. Tu peux être certain qu'un Firefox qui ne lit pas les webm peut lire les mp4 si Flash Player est installé. Ça te fait un fichier de moins et tu proposes une meilleure qualité (mp4 est meilleur que flv).

Ordre des sources :
- mp4
- webm
- 3gp
- flash mp4
- lien de téléchargement mp4


Citation (Anard @ 5 Nov 2015, 20:34) *
N'y aurait-il pas moyen de récupérer le temps de chargement de la page dans mon script PHP ?

Je ne crois pas qu'il y ait de véritable moyen de connaître la vitesse de connexion sans serveur de streaming.
Il faut bidouiller comme tu le fais avec php ou alors en JavaScript mais ce n'est pas très fiable.
Autre solution pas idéale : tu peux connaître les dimensions de la fenêtre avec JavaScript et donc supposer qu'il s'agit d'un mobile, d'une tablette ou d'un ordinateur et modifier la source de la vidéo pour en servir une appropriée (les tablettes et les ordinateurs sont généralement connectés en wifi ou filaire). Par exemple : par défaut les sources sd pour les petits écrans, les hd pour les moyens et full hd pour les grands.
Ce n'est pas idéal car ça associe largeur d'écran à vitesse de connexion…
L'utilisateur doit pouvoir choisir la qualité en cas de mauvaise supposition.

Ce message a été modifié par scoch - 5 Nov 2015, 23:09.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
Anard
posté 5 Nov 2015, 23:27
Message #13


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 659
Inscrit : 7 May 2015
Membre no 195 224



Bien je vais virer les ogg.

J'ai commencé à faire des essais sur un site de test.
S'il y a eu un choix utilisateur, il est considéré en priorité (et enregistré en session).

Sinon, je regarde les temps de chargement en PHP (sans enregistrer pour que l'évaluation s'affine si la personne revient plus tard).
J'ai pu remarquer chez moi que la première page est longue à charger (pas encore de cache enregistré).
Donc j'ai bidouillé les calculs pour ne prendre en compte le premier chargement que la première fois.
Malgré cela, mes temps de chargement calculés sont entre 0,01 et 0,25s (c'est large !).

Mais je vois de chez moi (connexion ADSL filaire) que la version mp4HD est limite (besoin de laisser charger quelques minutes avant de pouvoir lire correctement).
Pourtant, j'ai un écran 1920x1080, un ordi fixe récent... mais je suis en campagne : il suffit qu'une personne des fermes alentours utilise internet pour que mon débit soit divisé par 2 (j'exagère peut-être un peu).
Donc je ne pense pas qu'on puisse se fier au matériel pour connaître la qualité de la connexion.

Après, je suis loin d'être certain de ma méthode aussi...


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post
scoch
posté 5 Nov 2015, 23:52
Message #14


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



Je pense que tu ne peux pas connaître le temps de chargement de la page avec php puisque la construction du DOM, l'affichage et le chargement des fichiers liés se font sur le client (le navigateur), donc une fois que la page a été servie. Si je ne me trompe pas, le temps que tu récupères est celui qu'il faut au serveur pour générer la page.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
Anard
posté 5 Nov 2015, 23:56
Message #15


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 659
Inscrit : 7 May 2015
Membre no 195 224



fort possible...

En Javascript, ça semble plus réaliste mais je ne sais pas réinjecter la variable obtenue dans mon code PHP...

En PHP, quelqu'un propose ça (http://www.allhtml.com/discussions/view/connaitre-le-debit-du-visiteur.html):
Citation
Tu crée une image d'une certaine taille (pas 3 k! mettons 100k)
tu crée un script (php, asp, whatever) qui affiche l'image mais qui:
a) mets dans une variable l'heure exacte (avec seconde et milli-seconde) avnt l'affichage
b)affiche l'image
c) mets dans une autre variable l'heuree exacte après l'affichage.
d) ton script doit calculer la différence en entre C et A (i.e. c-a) celà te donnera le temps de chargement.

Mais si c'est en PHP, ça se passe toujours côté serveur, je me trompe ?

Ce message a été modifié par Anard - 6 Nov 2015, 00:18.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post
yponomeute
posté 6 Nov 2015, 09:00
Message #16


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 969
Inscrit : 26 Jan 2011
Lieu : Pollachius virens
Membre no 164 083



Citation (scoch @ 5 Nov 2015, 23:52) *
Je pense que tu ne peux pas connaître le temps de chargement de la page avec php puisque la construction du DOM, l'affichage et le chargement des fichiers liés se font sur le client (le navigateur), donc une fois que la page a été servie. Si je ne me trompe pas, le temps que tu récupères est celui qu'il faut au serveur pour générer la page.

Oui c'est bien ça.

Et même coté client tu n'auras rien de fiable, pour un test de débit à partir d'une page web. Tu peux par exemple avoir un temps de ping désastreux et un très bon débit une fois la connexion établie (accès internet par satellite par exemple).

Pourquoi ne pas déléguer tout ça à youtube puisqu'une version de la vidéo est déjà hébergée sur youtube ?
https://support.google.com/youtube/answer/91449?hl=fr

Ce message a été modifié par yponomeute - 6 Nov 2015, 09:03.


--------------------
MBP 2017 15" avec clavier pourri et touchbar inutile
Go to the top of the page
 
+Quote Post
scoch
posté 6 Nov 2015, 10:21
Message #17


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



Citation (yponomeute @ 6 Nov 2015, 09:00) *
Citation (scoch @ 5 Nov 2015, 23:52) *
Je pense que tu ne peux pas connaître le temps de chargement de la page avec php puisque la construction du DOM, l'affichage et le chargement des fichiers liés se font sur le client (le navigateur), donc une fois que la page a été servie. Si je ne me trompe pas, le temps que tu récupères est celui qu'il faut au serveur pour générer la page.

Oui c'est bien ça.

Et même coté client tu n'auras rien de fiable, pour un test de débit à partir d'une page web. Tu peux par exemple avoir un temps de ping désastreux et un très bon débit une fois la connexion établie (accès internet par satellite par exemple).

Pourquoi ne pas déléguer tout ça à youtube puisqu'une version de la vidéo est déjà hébergée sur youtube ?
https://support.google.com/youtube/answer/91449?hl=fr

Merci pour la confirmation wink.gif
C'est clair que ce serait bien plus simple de se reposer sur YouTube.

@Anard En JavaScript tu disposes de l'événement 'load' qui est diffusé lorsqu'un élément est chargé.
Code
élément.addEventListener('événement', fonction à appeler, phase de capture);


Par exemple :

Code
monImage.addEventListener('load', chargementImage, false);
function chargementImage(event) {
    // monImage est chargée
}


Pour être notifié que la page est chargée (ainsi que tous ses fichiers liés : css, js, images) on observe l'événement 'load' sur l'objet window.

Code
window.addEventListener('load', chargementPage, false);
function chargementPage(event) {
    // la page et ses fichiers sont chargés
}


À mon avis, pour faire cette évaluation de vitesse de connexion, il vaut mieux le faire une fois que la page est chargée car tu pourras surveiller le temps de chargement d'un élément dont tu connais le poids. Tu peux éventuellement connaître dynamiquement ce poids avec php.

Code
<?php
$image = "image.jpg";
$poidsImage = filesize($image);

// Écrire (sous la forme d'une chaîne de caractères) ces données dans un script JavaScript pour pouvoir les utiliser en JavaScript
echo "<script>var image = '".$image."'; var poidsImage = ".$poidsImage.";</script>";
?>


Tu places le code JavaScript juste avant la balise de fermeture de body (après le code JS généré en php !).
Pour faire ça proprement (portée des variables) on met tout dans une fonction anonyme qui s'auto exécute :

Code
<script>
(function (window, document) {
    window.addEventListener('load', function () {
        // Fenêtre chargée

        // On crée un élément img
        var el = document.createElement('img');
        // On utilise la variable image générée en php pour l'attribut src de notre img
        el.src = image;
        // Éventuellement on cache cette image
        el.style.display = 'none';

        // On récupère la date en millisecondes avant le chargement
        var timeDepart = Date.now();// Ne fonctionne pas avec IE 8… utiliser plutôt Date().getTime()

        // Variable xhr pour AJAX
        var xhr;

        // On ajoute un observateur d'événement load à l'image
        el.addEventListener('load', function () {
            // On récupère la date en millisecondes après le chargement
            var timeFin = Date.now();// Ne fonctionne pas avec IE 8… utiliser plutôt Date().getTime()
            // On calcule le temps de chargement
            var tempsChargement = timeFin - timeDepart;
            // On supprime l'image
            document.body.removeChild(el);

            // On peut évaluer la vitesse de connexion bytes/millisecondes
            var debit = poidsImage / tempsChargement;

            // On peut envoyer en AJAX tempsChargement et débit à php pour les mémoriser en variable de session
            xhr = new XMLHttpRequest();
            xhr.onreadystatechange = retourAJAX;
            xhr.open('POST', 'script.php', true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send('tempsChargement='+tempsChargement+'&debit='+debit);
        });

        // Retour AJAX pour être notifié que le script php a bien été exécuté
        function retourAJAX() {
            // Si readyState vaut 4, c'est que la requête est terminée
            if (xhr.readyState == 4) {
                // La requête est terminée
                if (xhr.status == 200) {
                    // On a reçu la réponse de php
                }
            }
        }

        // On ajoute l'image au body
        document.body.appendChild(el);
    });
})(window, document);
</script>


Étant donné qu'il faut que ça marche partout, il va falloir gérer les vieilles versions de IE.

IE 8 ne supporte pas addEventListener de JavaScript, il faut donc charger préalablement un script pour lui :

Code
<!--[if IE 8]><script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.6/ie8.js"></script><![endif]-->


Simple, non ? biggrin.gif
Désolé, je dois filer, je n'ai pas testé ce code mais a priori ça fonctionne.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
niap
posté 6 Nov 2015, 10:24
Message #18


Macbidouilleur de bronze !
**

Groupe : Membres
Messages : 479
Inscrit : 8 Aug 2003
Lieu : Haut-Rhin
Membre no 8 967



Citation (Anard @ 5 Nov 2015, 20:34) *
C'est fait. EN effet en .ogv, la qualité est vraiment dégu..lasse, c'est gênant de proposer un version "HD" et "SD", vu la qualité merdi... des deux versions.
Conversions faites avec Miro, il donne assez peu de choix pour améliorer les choses à la conversion en ogv..

Essayes de faire faire la conversion avec ffmpeg2theora, tu auras peut-être des meilleures résultats :
http://v2v.cc/~j/ffmpeg2theora/

Ca ne fonctionne qu'avec le terminal :
Code
ffmpeg2theora [liste des options] [chemin vers le fichier à compresser]

Quelques options utiles :
-x : largeur de la vidéo en pixel
-y : hauteur de la vidéo en pixel
-v : qualité vidéo de 0 à 10
-a : qualité audio de -2 à 10

Code
ffmpeg2theora -v 9 -a 3 [chemin vers le fichier à compresser]


--------------------
iMac 27 2011
---------------
parcours : Mac SE, LC 630, 8100/80, G3 450, G4 MDD bi 867, G5 bi 2,5Ghz

Un de mes sites - Quelques articles sur la conception d'un site
Go to the top of the page
 
+Quote Post
yponomeute
posté 6 Nov 2015, 10:51
Message #19


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 969
Inscrit : 26 Jan 2011
Lieu : Pollachius virens
Membre no 164 083



Citation (scoch @ 6 Nov 2015, 10:21) *
À mon avis, pour faire cette évaluation de vitesse de connexion, il vaut mieux le faire une fois que la page est chargée car tu pourras surveiller le temps de chargement d'un élément dont tu connais le poids. Tu peux éventuellement connaître dynamiquement ce poids avec php.

Le résultat risque fort de ne correspondre à rien d'exploitable :
- d'une part l'image peut être en cache coté navigateur ou sur un proxy qui se trouverait entre l'internaute et le serveur, la mesure sera donc fausse
- la mesure dépend fortement de l'activité tierce qu'il y a en parallèle sur le réseau local de l'internaute
- l'hébergement est sur un serveur mutualisé dans ce cas précis, et il est possible qu'un CDN soit utilisé pour certains médias et pas pour d'autres
- le FAI peut brider le débit de certains médias



--------------------
MBP 2017 15" avec clavier pourri et touchbar inutile
Go to the top of the page
 
+Quote Post
scoch
posté 6 Nov 2015, 11:26
Message #20


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



Citation (yponomeute @ 6 Nov 2015, 10:51) *
Citation (scoch @ 6 Nov 2015, 10:21) *
À mon avis, pour faire cette évaluation de vitesse de connexion, il vaut mieux le faire une fois que la page est chargée car tu pourras surveiller le temps de chargement d'un élément dont tu connais le poids. Tu peux éventuellement connaître dynamiquement ce poids avec php.

Le résultat risque fort de ne correspondre à rien d'exploitable :
- d'une part l'image peut être en cache coté navigateur ou sur un proxy qui se trouverait entre l'internaute et le serveur, la mesure sera donc fausse
- la mesure dépend fortement de l'activité tierce qu'il y a en parallèle sur le réseau local de l'internaute
- l'hébergement est sur un serveur mutualisé dans ce cas précis, et il est possible qu'un CDN soit utilisé pour certains médias et pas pour d'autres
- le FAI peut brider le débit de certains médias

Pour éviter d'évaluer le poids d'une image en cache on pourrait en créer une sur l'instant avec php smile.gif
Bien d'accord que ça n'est pas du tout fiable. De plus, faire charger une image (inutile) juste pour tester le débit c'est la double peine pour ceux qui ont une connexion lente.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
Anard
posté 6 Nov 2015, 11:39
Message #21


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 659
Inscrit : 7 May 2015
Membre no 195 224



Citation
- la mesure dépend fortement de l'activité tierce qu'il y a en parallèle sur le réseau local de l'internaute

Oui mais c'est intéressant à connaitre : si on teste le débit au moment du chargement de la page qui contient la vidéo, il y a de fortes chances que le temps de lecture de la vidéo, le débit du réseau local varie peu (elle dure 2min). Le débit choisit correspondra à la qualité de la connexion SUR LE MOMENT.
De toutes façon, je garde toutjours un lien pour modifier la qualité manuellement, et l'évaluation de débit n'est faite que si aucun choix n'a été fait par l'utilisateur durant sa visite (variable de session).

Citation
C'est clair que ce serait bien plus simple de se reposer sur YouTube.

C'est sûr. Mais la "nouvelle" balise video en HTML5 me permet de m'affranchir de YouTube et de ne plus dépendre de personne (même si dans l'idée, YouTube est probablement loin de disparaître). Il n'y a à priori plus rien de propriétaire sur mon site (à moins que Javascript le soit) hormis probablement les différents formats de video/audio/image que j'utilise.
En tout cas, YouTube sait très bien mesurer le débit de l'utilisateur et adapter la qualité de la vidéo en fonction, même en cours de lecture. Donc c'est possible. Après je n'ai pas l'ambition de faire aussi bien : c'est certain que je n'ai pas le même niveau que les développeurs de Google (d'autant que ce n'est pas du tout mon métier...).
Que la qualité soit adaptable par un simple clic est déjà tout à fait suffisant pour mes besoins.

...

Mais j'aime bien faire un peu plus que ce qui est "suffisant"... biggrin.gif rien que pour avoir appris quelque chose.

@Scoch : Merci beaucoup. Après, je connais très mal JS (et pas du tout AJAX, sauf pour nettoyer les WC) et il va me falloir beaucoup de temps pour comprendre précisément ce que fait ton code ! Mes quelques questionnements et remarques sur ce que je comprends (ou pas ?) sur ton script :

  • Tu crées d'abord un script en chaîne de caractère pour envoyer les variables php (url et taille de l'image servant de mesure) puis à la fin de la page, un second script JS. Ce second script pourra réutiliser les variables envoyées dans le premier script ? (je ne pensais pas...)
  • Citation
    var timeDepart = Date.now();// Ne fonctionne pas avec IE 8… utiliser plutôt Date().getTime()
    Est-ce que Date().getTime() marchera avec tout le monde ? (dans ce cas, pourquoi utiliser Date.now() ?)
  • Citation
    // On peut envoyer en AJAX tempsChargement et débit à php pour les mémoriser en variable de session
    Dans l'idée, à la fin du script, tu recharges la page en envoyant en POST le débit mesuré ? Ne serait-il pas possible de modifier directement le DOM en JS sans recharger toute la page ?
    Pas besoin de variables de session ici : elles ne me servent qu'à enregistrer le choix de l'utilisateur. Si la variable de session n'existe pas, alors je mesure le débit pour envoyer un choix par défaut mais je n'ai pas besoin de l'enregistrer (le débit pourra avoir changé à la prochaine visite de l'utilisateur).
  • Le retour AJAX, vraiment, je ne comprends pas ce que c'est ...
  • Idem, je comprends mal ceci :
    Citation
    // Éventuellement on cache cette image
    (...)
    // On supprime l'image
    (...)
    // On ajoute l'image au body

    Pourquoi la cacher puis la supprimer, si c'est pour la rajouter ensuite ?


Voilà. Comme tu vois, je ne suis vraiment pas au point en Javascript !!!

Peut-être qu'il y a aussi un moyen de retirer l'image qui sert de mesure du cache pour être un peu plus sûr qu'on mesure bien le débit de chargement et pas le débit de récupération du cache ?

Ce message a été modifié par Anard - 6 Nov 2015, 12:23.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post
scoch
posté 6 Nov 2015, 11:51
Message #22


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



YouTube peut adapter le débit à la vitesse de connexion car il utilise un serveur de streaming, ce qui n'est pas ton cas et ne le sera pas car c'est onéreux.

Je t'ai montré cet exemple JavaScript car j'ai bien compris que tu es curieux mais comme dit dès le début et expliqué par @yponomeute : ce n'est pas fiable.

Si tu tiens à ne pas recourir à un service tiers comme YouTube, tu pourrais ne pas intégrer la vidéo au départ, juste une image (le poster) et laisser l'utilisateur choisir une qualité. Au click sur le bouton de son choix tu remplaces l'image par la vidéo adéquate.

Ce message a été modifié par scoch - 6 Nov 2015, 11:54.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
Anard
posté 6 Nov 2015, 12:11
Message #23


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 659
Inscrit : 7 May 2015
Membre no 195 224



Citation (scoch @ 6 Nov 2015, 11:51) *
Je t'ai montré cet exemple JavaScript car j'ai bien compris que tu es curieux mais comme dit dès le début et expliqué par @yponomeute : ce n'est pas fiable.


Oui. Très curieux smile.gif
D'ailleurs, j'ai précisé un peu mon message au-dessus (si tu as du temps à perdre pour me répondre...)

Citation
Si tu tiens à ne pas recourir à un service tiers comme YouTube, tu pourrais ne pas intégrer la vidéo au départ, juste une image (le poster) et laisser l'utilisateur choisir une qualité. Au click sur le bouton de son choix tu remplaces l'image par la vidéo adéquate.

Si, je pense qu'il n'y a aucun mal à se tromper dans la vidéo présentée par défaut du moment que ce choix peut-être affiné par le visiteur. Aussi, la vidéo n'est pas en autoplay, donc si l'utilisateur ne clique pas sur play, il ne charge que le poster.
Si je n'arrive pas à mesurer le débit, je propose par défaut la HD (un poil plus flatteuse) et ceux qui ne peuvent pas la lire trouveront rapidement le bouton pour changer de qualité (d'autant qu'ils doivent avoir l'habitude de ce genre de problèmes s'ils utilisent un temps soit peu internet avec une connexion réduite).

Mais quand vous dites que ce n'est pas fiable, vous voulez dire que j'obtiendrai vraiment une valeur complètement aléatoire et bidon ou est-ce que ça peut me donner une idée (à 150kb/s près) quand même ?

D'après ma connexion (223kb/s environ), la HD mp4 passe un peu juste : le chargement se fait un peu plus doucement que la lecture, ce qui ne permet pas de lire la vidéo sans pause. Dans l'idée, si le débit mesuré est inférieur à 250kb/s, je pense qu'il faut proposer la SD. Quelqu'un qui est à cette limite pourra choisir grâce au lien la vidéo qui lui convient le mieux.
Mais avec la méthode que tu proposes, s'il mesure 50kb/s ou 500kb/s, je peux être quand même assez certain de ce que je peux envoyer, non ?

Ce message a été modifié par Anard - 6 Nov 2015, 12:55.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post
scoch
posté 6 Nov 2015, 13:56
Message #24


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



Que tu écrives du JS à la main ou en php c'est kif kif : c'est du texte.
Ici l'intérêt d'utiliser php c'est pour intégrer des données php dans le JavaScript : avec php tu peux connaître le poids d'un fichier avant de le charger, pas en JS.

Code
<body>
    Contenu de la page
    <?php
    génération d'un élément html script
    ?>
    <!--[if IE 8]><script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.6/ie8.js"></script><![endif]-->
    <script>
    // Le JavaScript tapé à la main
    </script>
</body>


Date.now() est plus moderne, clair que Date().getTime() et est deux fois plus rapide. Pour les navigateurs modernes tu privilégies Date.now(). Et dans le cas des tests de performance, si tu veux une mesure plus précise, tu peux utiliser performance.now() (compatible Chrome, Firefox 15+, et IE10) qui est précis au millième de milliseconde tandis que Date.now() est précis au milliseconde près.



« Dans l'idée, à la fin du script, tu recharges la page en envoyant en POST le débit mesuré ? Ne serait-il pas possible de modifier directement le DOM en JS sans recharger toute la page ? »
Pour comprendre le principe d'AJAX tu peux jeter un œil au site openclassrooms que tu consultes déjà.
Justement, AJAX c'est pour les requêtes asynchrones donc pas besoin de recharger la page wink.gif
1. Tu envoies des variables JS en post ou get à un script PHP
2. PHP traite la requête et répond à JS
3. JS reçoit la réponse de PHP, tu peux alors modifier le DOM et utiliser les données retournées par PHP



« Idem, je comprends mal ceci :
Citation
// Éventuellement on cache cette image
(...)
// On supprime l'image
(...)
// On ajoute l'image au body
Pourquoi la cacher puis la supprimer, si c'est pour la rajouter ensuite ? »

Cacher l'image avec CSS c'est parce qu'il n'y a aucune raison de la montrer. Ce n'est pas parce qu'elle n'est pas affichée qu'elle n'est pas chargée wink.gif

On supprime l'image depuis la fonction qui est appelée lorsque l'image est chargée, on n'en a plus besoin.

1. On crée en mémoire l'élément img
2. On crée la fonction qui sera appelée lorsque l'image sera chargée
3. C'est prêt : on ajoute l'élément img au DOM, le fichier commence alors à charger

Une des grandes différences entre JS et PHP, c'est qu'on utilise des événements en JS.

Pour les questions de réseau et de serveur je ne suis pas un spécialiste.

Ce message a été modifié par scoch - 6 Nov 2015, 13:59.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
Anard
posté 6 Nov 2015, 15:29
Message #25


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 659
Inscrit : 7 May 2015
Membre no 195 224



Merci beaucoup pour toutes ces explications.

Je fais des essais...

Pour le moment, j'affiche juste une alerte JS à la fin de ton script pour le calcul et l'envoi du débit.
Ca semble crédible par rapport à ma connexion (entre 249 et 251k). En revanche, évidemment, après un premier chargement, il affiche des connexion de plus de 8Mo !!!
Donc en effet, dès que j'ai une valeur, il faut que je l'enregistre en variable de session (et donc le script ne sera plus lancé). J'ai essayé avec un téléchargement en cours (après avoir effacé l'historique donc), je descends à 101k.

Pour la suite (à partir de "xhr = new XMLHttpRequest();"), je suis vraiment perdu.
Je vois donc l'intérêt d'envoyer le résultat à PHP, pour modifier la variable de session (pour ne pas refaire le calcul, qui est devenu bidon).
En revanche, comment tu fais ça ? Je ne comprends pas du tout. J'imagine que c'est dans ce que tu as appelé "script.php".

Du coup, je ne vois pas non plus où modifier le DOM.
Si je comprends un peu JS, la fonction retourAJAX(), tu la déclares mais tu ne l'appelles pas ?
Si c'est ici que je dois modifier le DOM, il faut que j'appelle cette fonction depuis mon script PHP ?

Hypothèse (script.php) :
Code
<?php
if (isset($_POST['debit']) && $_POST['debit']>250)
{
  $_SESSION['video']='hd';
  ?>
  <script>
    retourAJAX(); // où je modifie le DOM en fonction
  </script>
  <?php
}
else
{
  $_SESSION['video']='sd';
}?>


Je suis désolé, mes questions doivent te sembler stupides. Mais j'ai vraiment l'impression que JS "pense" à l'envers de PHP : on crée tout d'abord pour appeler ensuite. J'ai plus l'habitude d'appeler des fonctions en cascade.
Il faut que je m'y fasse...

PS :
Citation
Étant donné qu'il faut que ça marche partout, il va falloir gérer les vieilles versions de IE.

Le SITE doit fonctionner partout.
Pour détecter la vitesse de connexion, c'est moins primoridial. Je pourrai considérer que si le navigateur ne comprends pas (avant IE8), j'envoie la version SD (ordi plutôt ancien ou rarement mis à jour). Ou pas. En tout cas, ce n'est pas grave. C'est juste plus agréable pour l'utilisateur s'il n'a pas par défaut la version HD avec une connexion de 56k, et inversement avec une connexion de 8M (entre les deux, j'ai compris que c'est un peu au petit bonheur la chance...).

Concernant le confort d'utilisation, j'espère que ça ne fait pas trop ramer l'ordinateur lui-même avec une connexion 56k, mais dans l'ensemble, il charge toute la page, et pendant le temps de chargement de l'image de test, on peut déjà lire donc le chargement ne gêne pas vraiment.
Par contre, la personne verra peut-être le lien "basse définition" avant que le calcul ne se termine et ne modifie le DOM...

Ce message a été modifié par Anard - 6 Nov 2015, 16:19.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post
scoch
posté 6 Nov 2015, 16:29
Message #26


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



Je suis allé voir ta page.
1. Ta source .flv ne pourra en aucun cas être lue. Il faut intégrer un lecteur vidéo Flash au format .swf auquel passer en paramètre le fichier .flv ou mieux .mp4 à lire.
2. Tu as créé deux versions de ta page, l'une pour la vidéo HD l'autre pour SD. Avec JavaScript, tu pourrais éviter d'avoir à créer deux pages et à l'utilisateur de tout recharger.


1. Intégrer un lecteur Flash existant, à moins que tu veuilles acheter Adobe Flash Pro et apprendre à programmer en ActionScript3 wink.gif Dans cet exemple, on utilise flowplayer dont je t'ai mis une copie ici. Une fois récupéré swf.zip, tu places le dossier swf à côté de ta page html. Et voici le code d'intégration :

Code
<object type="application/x-shockwave-flash" data="swf/flowplayer-3.2.18.swf" width="560" height="315">
    <param name="movie" value="swf/flowplayer-3.2.18.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="config={'playlist':['Corbinola/img-video.jpg',{'url':'Corbinola/collines-hd.mp4','autoPlay':false}]}" />
    <p>Votre navigateur ne peut pas lire cette vidéo mais vous pouvez la télécharger <a href="Corbinola/collines-hd.mp4" target="_blank">ici</a>.</p>
</object>


2. Changer de source vidéo avec JavaScript :

Code
<body>
    <video id="mavideo" controls poster="Corbinola/img-video.jpg" width="560">
        <source src="Corbinola/collines-hd.mp4" type="video/mp4">
        <source src="Corbinola/collines-hd.webm" type="video/webm">
        <source src="Corbinola/collines-hd.3gp" type="video/3gp">
        <!-- Lecteur Flash -->
        <object type="application/x-shockwave-flash" data="swf/flowplayer-3.2.18.swf" width="560" height="315">
            <param name="movie" value="swf/flowplayer-3.2.18.swf" />
            <param name="allowFullScreen" value="true" />
            <param name="wmode" value="transparent" />
            <param name="flashVars" value="config={'playlist':['Corbinola/img-video.jpg',{'url':'Corbinola/collines-hd.mp4','autoPlay':false}]}" />
            <p>Votre navigateur ne peut pas lire cette vidéo mais vous pouvez la télécharger <a href="Corbinola/collines-hd.mp4" target="_blank">ici</a>.</p>
        </object>
    </video>
    <br />
    <!-- Boutons avec un attribut onclick pour faire au plus simple. -->
    <button onclick="changerVideo('low')">Basse définition</button>
    <button onclick="changerVideo('hd')">Haute définition</button>

    <script>
        function changerVideo(qualite) {
            // Générer les éléments source
            var sources  = '<source src="Corbinola/collines-'+qualite+'.mp4" type="video/mp4">';
                sources += '<source src="Corbinola/collines-'+qualite+'.webm" type="video/webm">';
                sources += '<source src="Corbinola/collines-hd.3gp" type="video/3gp">';
                sources += integrerLecteurFlash("Corbinola/img-video.jpg", "Corbinola/collines-'+qualite+'.mp4", 560, 315);
            // Par précaution stopper la vidéo (ou plutôt la mettre en pause car stop n'existe pas)
            var video = document.getElementById('mavideo');
            video.pause();
            // Remplacer les sources de l'élément video
            video.innerHTML = sources;
            // On charge le fichier
            video.load();
            // On démarre la lecture
            video.play();
        }

        function integrerLecteurFlash(poster, video, largeur, hauteur) {
            var contenu  = '<object type="application/x-shockwave-flash" data="swf/flowplayer-3.2.18.swf" width="'+largeur+'" height="'+hauteur+'">';
                contenu += '<param name="movie" value="swf/flowplayer-3.2.18.swf" />';
                contenu += '<param name="allowFullScreen" value="true" />';
                contenu += '<param name="wmode" value="transparent" />';
                contenu += '<param name="flashVars" value="config={\'playlist\':[\''+poster+'\',{\'url\':\''+video+'\',\'autoPlay\':false}]}" />';
                contenu += '<p>Votre navigateur ne peut pas lire cette vidéo mais vous pouvez la télécharger <a href="'+video+'" target="_blank">ici</a>.</p>';
                contenu += '</object>';
            return contenu;
        }
    </script>
</body>


Concernant AJAX, tes questions ne sont pas stupides mais tu devrais commencer par apprendre les bases (openclassrooms) pour y voir plus clair.
On fait les requêtes asynchrones avec XMLHttpRequest dont je crée une instance : xhr = new XMLHttpRequest().
Ce n'est pas moi qui appelle la fonction retourAJAX, c'est xhr lorsque son événement onreadystatechange est diffusé.
Dans ton cas, ton script php peut juste répondre 'OK' ou 'sd' ou 'hd' (ça dépend de ce que tu fais de cette réponse), et tu le fais avec un simple echo :

Code
<?php
if (isset($_POST['debit']) && $_POST['debit']>250)
{
  $_SESSION['video']='hd';
  // Réponse pour JS
  echo 'hd';
}
elseif (isset($_POST['debit']) && $_POST['debit']<250)
{
  $_SESSION['video']='sd';
  // Réponse pour JS
  echo 'sd';
}
?>


Bonne chance ! Je pars en week-end smile.gif

Ce message a été modifié par scoch - 6 Nov 2015, 16:32.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
Anard
posté 6 Nov 2015, 16:54
Message #27


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 659
Inscrit : 7 May 2015
Membre no 195 224



Citation (scoch @ 6 Nov 2015, 16:29) *
1. Ta source .flv ne pourra en aucun cas être lue. Il faut intégrer un lecteur vidéo Flash au format .swf auquel passer en paramètre le fichier .flv ou mieux .mp4 à lire.

oops unsure.gif

Citation
2. Tu as créé deux versions de ta page, l'une pour la vidéo HD l'autre pour SD. Avec JavaScript, tu pourrais éviter d'avoir à créer deux pages et à l'utilisateur de tout recharger.

?? Non, je ne crée qu'une version :
Si la variable de session a été définie, elle est enregistrée dans $video,
sinon $video='hd';
Ensuite, dans les sources, le code est
Code
echo '<source src="Corbinola/collines-'.$video.'.mp4" type="video/mp4">';


Citation
<!-- Boutons avec un attribut onclick pour faire au plus simple. -->

Cette fois, je en suis pas d'accord car ceux qui n'ont pas activé Javascript ne peuvent pas changer de qualité manuellement.
Que je me trompe au moment de choisir une résolution pour lui si JS n'était pas activé n'est pas gênant, mais je ne peux pas lui imposer mon erreur...

Citation
Concernant AJAX, tes questions ne sont pas stupides mais tu devrais commencer par apprendre les bases (openclassrooms) pour y voir plus clair.
On fait les requêtes asynchrones avec XMLHttpRequest dont je crée une instance : xhr = new XMLHttpRequest().
Ce n'est pas moi qui appelle la fonction retourAJAX, c'est xhr lorsque son événement onreadystatechange est diffusé.
Dans ton cas, ton script php peut juste répondre 'OK' ou 'sd' ou 'hd' (ça dépend de ce que tu fais de cette réponse), et tu le fais avec un simple echo :

Code
<?php
if (isset($_POST['debit']) && $_POST['debit']>250)
{
  $_SESSION['video']='hd';
  // Réponse pour JS
  echo 'hd';
}
elseif (isset($_POST['debit']) && $_POST['debit']<250)
{
  $_SESSION['video']='sd';
  // Réponse pour JS
  echo 'sd';
}
?>

Oui, je vois que j'ai largement de quoi apprendre sur OPC parce qu'avec ce que j'ai fait (script.php posté plus haut), il ne modifie pas la variable de $_SESSION['video'].

Citation
Bonne chance ! Je pars en week-end smile.gif

Oh Shit ! laugh.gif
Merci pour tout et bon WE. Le site sur lequel je bosse (avec adaptation automatique de la qualité) n'est pas ici : il est accessible en remplaçant "www" par "test" dans l'URL... ph34r.gif

Ce message a été modifié par Anard - 7 Nov 2015, 13:24.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post
Anard
posté 7 Nov 2015, 01:55
Message #28


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 659
Inscrit : 7 May 2015
Membre no 195 224



Rebonsoir,

Je viens répondre pour faire part de mes avancées.

Après nombre de bidouilles et corrections (du genre oublier session_start(); au début de script.php), j'arrive à un résultat qui fonctionne pas mal. Mes essais en cours sont visibles ici pour ceux que ça intéresse (mais ils peuvent ne ressembler à rien ou être vide si vous arrivez au mauvais moment, c'est une page de tests wink.gif )
J'ai dû retirer les fonctions changerVideo et integrerLecteurFlash de Scoch pour les intégrer dans retourAJAX. Je les avais sûrement mal placées, laissé un '}' quelque part où il ne fallait pas... Ou encore autre chose qui n'avait rien à voir. J'ai corrigé tellement de bourdes que je ne sais pas bien mais en l'état, ça marche (je copie le code en bas).

MAIS il reste quelques problèmes :
  • Pendant le chargement de l'image test, un message est affiché sous la vidéo puis est caché à la fin du test avec document.getElementById().style.display (le div en question est caché par défaut dans une feuille de style).
    Ca fonctionne très bien le temps du test, on le voit apparaitre puis disparaitre.

    Par contre, si on recharge la page (un message s'affiche en haut pour confirmer que la variable de session a bien été initialisée et que le test n'est plus nécessaire), le message réapparait (immédiatement, cette fois, comme si le CSS avait été modifié).
    Je ne comprend pas du tout pourquoi (peut-être un problème de cache).

    Le problème venait du fait que j'affichais le message après "window.addEventListener('load', function () {", donc à la fin du chargement de la page. Je l'ai placé dans un script en fin de page que PHP écrit si la variable de session n'est pas définie.

  • En effet, ce n'est pas très fiable.
    Je suis actuellement sous Ubuntu/Firefox et les débits qu'il m'affiche sont très stables (entre 225 et 252kb/s, moitié moins si un téléchargement est en cours) et correspondent à ce que m'indique MenuMeters quand je télécharge sur le même ordi sous OS X.
    Pour voir, j'ai téléchargé Chrome et Opera (toujours sous Linux). Ils m'indiquent aussi des débits très stables, mais tous les deux autour de 125kb/s (moitié moins). dry.gif
    De quoi ça peut venir ? Ils sont moins bien optimisés ou ils compressent les images avant de les charger ? Ca me semble étrange... En tout cas, il faut le prendre en compte.
    EDIT : Sur OS X, même combat : là où Firefox met environ 5,5s à charger l'image, Safari, Chrome et Opera en mettent une dizaine... La solution consisterait à multiplier par 2 le résultat si preg_match('/Firefox/i',$_SERVER['HTTP_USER_AGENT']), mais j'aimerai comprendre exactement ce qui se passe pour faire les choses plus proprement...

  • Aussi, quelque soit le navigateur, il y a un souci si l'on quitte :
    Les variables de session sont effacées mais pas le cache. Du coup, si l'on revient sur la même page après avoir quitté, le test est effectué à nouveau avec une image en cache (donc pas besoin de la charger).
    Il m'affiche donc un débit de 3 à 8Mb/s !
    YOUHOU !!!
    (...)
    Non. Il y aurait moyen de supprimer l'image du cache après son chargement (puisqu'on n'en aura plus besoin) ?
    EDIT : il suffit de passer une variable dans l'URI de l'image pour qu'elle soit considérée comme différente au chargement suivant. (el.src = image + '?heure=' + new Date().getTime(); ). Mais ça risque de charger inutilement le cache du navigateur...
  • Le format a aussi une influence parce que je ne suis pas non plus très doué pour l'encodage : que ce soit en HD ou en SD, le mp4 est 1.5x plus lourd que le webm, qui est 5x plus lourd que le 3gp. Du coup, encore une fois, la limite que j'ai choisie est valable pour le mp4 (choisi par défaut par FF, Opera et Chrome) mais pas pour les autres formats (choisis par... ... ... les casse-c...).


Améliorations possibles (en plus de ce qui ne marche pas ci-dessus) :
  • faire fonctionner pour IE8, pour le moment je n'ai pas de PC sous Windows, impossible de tester IE, même pas IE10
  • regarder ce qui se passe si JS est désactivé, (je n'ai pas trouvé cette possibilité dans FF), mais à priori, il affiche simplement la version HD. Voir aussi ce qui se passe pour les navigateurs non compatibles avec, par exemple, performance.now();.
  • A l'usage, il pourrait être intéressant de placer un timing pour arrêter le script et lancer retourAJAX() (sans les conditions xhr.readyState == 4 et xhr.status == 200) au bout de (tailleImage=1345Ko ÷250kb/s = ) 5.38s. Pourquoi continuer à charger une image inutile si on a déjà vu que la connexion n'était pas suffisante pour envoyer la HD ? J'ai essayé
    Code
    xhr.timeout = 6000;
    xhr.ontimeout = finScript('low (plus de 6s)');
    mais comme la requête n'est pas envoyée à script.php, la variable de session n'est pas initialisée et le test est lancé à nouveau au chargement suivant.
  • Regarder ce qui se passe (qualité de la mesure etc...) si on utilise comme référence pour le test une image que l'on veut réellement afficher (les images réellement utilisées sur le site font environ 50ko alors que l'image utilisée pour le test fait 1.3Mo).
    EDIT : Le résultat est très nul et c'est inutile s'il y a un timeout.
  • Monter la vitesse de basculement (j'ai mis 250ko/s pour qu'avec ma connexion, ça passe une fois sur 2 d'un côté ou de l'autre, mais en réalité, il faudrait que ça bascule entre 260 et 280 je pense...).


Voilà pour mes premiers retours.
J'habite en campagne. Donc si quelqu'un utilise le réseau, mon débit doit être vite divisé par 2. Mais c'est quelque chose d'assez rare (c'est exceptionnel que trois personnes utilisent internet dans les 3 kilomètres à la ronde en même temps).
Donc je suis intéressé par la mesure que vous obtenez en visitant la page sur des régions un peu plus peuplées : elle sera peut-être beaucoup moins stable.

Code
//DEBUT PAGE HTML
<?php
//Qualité vidéo
if (isset($_GET['def']))
{
    if ($_GET['def']=='low') { $_SESSION['video']='low'; }
    else { $_SESSION['video']='hd'; }
}
if (isset($_SESSION['video']))
{
    echo '<h2>Qualité enregistrée : '.$_SESSION['video'].'<span class="reduit">, plus de test</span></h2>';
    $video=$_SESSION['video'];
}
else //L'utilisateur n'a jamais choisi un mode ou l'autre, on va tester sa connexion pour choisir pour lui.
{
    echo '<h2>Qualité non encore définie</h2>';
    $video='hd';
    $image = "Corbinola/grosseimage.png";
    $poidsImage = filesize($image);
    // Écrire (sous la forme d'une chaîne de caractères) ces données dans un script JavaScript pour pouvoir les utiliser en JavaScript
    echo "<script>var image = '".$image."'; var poidsImage = ".$poidsImage.";</script>";
}

//FIN PAGE HTML
<script> //Mesure du temps de chargement
(function (window, document) {
    window.addEventListener('load', function () {
        // Fenêtre chargée

        document.getElementById('testencours').style.display = 'block';
        // On crée un élément img
        var el = document.createElement('img');
        // On utilise la variable image générée en php pour l'attribut src de notre img
        el.src = image;
        // Éventuellement on cache cette image
        el.style.display = 'none';

        // On récupère la date en millisecondes avant le chargement
        var timeDepart = performance.now();// Ne fonctionne pas avec IE 8… utiliser plutôt Date().getTime()

        // Variable xhr pour AJAX
        var xhr;

        // On ajoute un observateur d'événement load à l'image
        el.addEventListener('load', function () {
            // On récupère la date en millisecondes après le chargement
            var timeFin = performance.now();// Ne fonctionne pas avec IE 8… utiliser plutôt Date().getTime()
            // On calcule le temps de chargement
            var tempsChargement = timeFin - timeDepart;
            // On supprime l'image
            document.body.removeChild(el);

            // On peut évaluer la vitesse de connexion bytes/millisecondes
            var debit = poidsImage / tempsChargement;

            // On peut envoyer en AJAX tempsChargement et débit à php pour les mémoriser en variable de session
            xhr = new XMLHttpRequest();
            xhr.onreadystatechange = retourAJAX;
            xhr.open('POST', 'Corbinola/script.php', true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send('debit='+debit);
            //alert(timeFin+' - '+timeDepart+' = '+tempsChargement+', poids='+poidsImage+' donc debit='+debit);
        });

        // Retour AJAX pour être notifié que le script php a bien été exécuté
        function retourAJAX() {
            // Si readyState vaut 4, c'est que la requête est terminée
            if (xhr.readyState == 4) {
                // La requête est terminée
                if (xhr.status == 200) {
                    // On a reçu la réponse de php
                    document.getElementById('testencours').style.display = 'none';
                    var qualite = xhr.responseText;
                    alert('Qualité : '+qualite);
                    qualite = qualite.replace(/ .*/,""); // On retire l'information sur le débit pour ne garder que la qualité.
                    if (qualite == 'low')
                    {
                       // Générer les éléments source
                       var sources  = '<source src="Corbinola/collines-'+qualite+'.mp4">';
                           sources += '<source src="Corbinola/collines-'+qualite+'.webm">';
                           sources += '<source src="Corbinola/collines-'+qualite+'.3gp">';
                       var flash  = '<object type="application/x-shockwave-flash" data="swf/flowplayer-3.2.18.swf" width="560" height="315">';
                           flash += '<param name="movie" value="swf/flowplayer-3.2.18.swf" />';
                           flash += '<param name="allowFullScreen" value="true" />';
                           flash += '<param name="wmode" value="transparent" />';
                           flash += '<param name="flashVars" value="config={\'playlist\':[\'Corbinola/img-video.jpg\',{\'url\':\'Corbinola/collines-low.flv\',\'autoPlay\':false}]}" />';
                           flash += 'Votre navigateur ne peut pas lire cette vidéo mais vous pouvez la télécharger <a href="Corbinola/collines-low.mp4" target="_blank">ici</a>.';
                           flash += '</object>';
                           sources += flash;
                       // Par précaution stopper la vidéo (ou plutôt la mettre en pause car stop n'existe pas)
                       var video = document.getElementById('pres-corbinola');
                       video.pause();
                       // Remplacer les sources de l'élément video
                       video.innerHTML = sources;
                       // On charge le fichier
                       video.load();
                       // On démarre la lecture
                       //video.play();
                       var lien='<a href="corbinola-hd.html">Voir en haute définition</a>';
                       document.getElementById('modifyVideo').innerHTML= lien;
                    }
                }
            }
        }
        // On ajoute l'image au body
        document.body.appendChild(el);
    });
})(window, document);
</script>

//SCRIPT.PHP
<?php
    session_start();
    header("Content-Type: text/plain");

    if (isset($_POST['debit']))
    {
      if ($_POST['debit']<250) { $_SESSION['video']='low'; }
      else { $_SESSION['video']='hd'; }
    }
    else
    {
      $_SESSION['video']='fucque';
    }
    //echo $_SESSION['video'];
    echo $_SESSION['video'].' ('.round($_POST['debit'],2).'kb/s)';
?>

//CSS
#testencours
{
        display: none;
}


Voilà. Il est tard. J'me couche après une dernière prune (20ans d'âge).

Ce message a été modifié par Anard - 7 Nov 2015, 22:54.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post
yponomeute
posté 7 Nov 2015, 10:41
Message #29


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 969
Inscrit : 26 Jan 2011
Lieu : Pollachius virens
Membre no 164 083



Citation (Anard @ 7 Nov 2015, 01:55) *
Voilà. Il est tard. J'me couche après une dernière prune (20ans d'âge).

Et bien voilà, il en sort quelque chose de positif, on termine sur une prune de 20 ans d'âge biggrin.gif


--------------------
MBP 2017 15" avec clavier pourri et touchbar inutile
Go to the top of the page
 
+Quote Post
Anard
posté 11 Nov 2015, 10:50
Message #30


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 659
Inscrit : 7 May 2015
Membre no 195 224



Bon dans l'ensemble ça fonctionne très bien.

Mais je me demande comment améliorer quelques petits soucis par rapport à mes différents tests :
J'ai remarqué sur cet exemple que ses résultats sont bien plus précis et ce, quelque soit le navigateur. Est-ce tout simplement parce que le test est effectué sur une page vide et que par conséquent, le navigateur n'a pas d'autres contenus à charger au moment du test ? Ou est-ce qu'il y a une autre raison ?

Si JS n'est pas activé, il ne se passe rien. En revanche, s'il est activé mais pas compatible avec une commande ou une autre, le test démarre et ne s'arrête plus, ce qui ne fait as très propre...
J'ai eu beau chercher, je n'ai pas trouvé comment faire, mais si je pouvais arrêter le script au bout de 6 secondes par exemple et enregistrer une valeur en variable de session pour ne plus relancer le script, ça résoudrait quasiment tous les soucis.

Y aurait-il un moyen de détecter la version de vidéo qui a été choisie par le navigateur (mp4, webm ou 3gp) pour adapter la limite de débit en fonction (en effet, le 3gp est beaucoup moins lourd que le mp4) ?

Merci en tout cas pour toute votre aide. Je suis vraiment débutant en JS et je n'aurai rien pu obtenir sans vous.
J'hésites encore à placer ce script sur mon vrai site en l'état, mais si j'arrive à intégrer ces 2 dernières améliorations, je le ferai à coup sûr !


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post

2 Pages V   1 2 >
Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 29th March 2024 - 08:26