Meilleur moyen d'intégrer des vidéos, lisibles par tous

[scoch]

Y aurait-il un moyen de détecter la version de vidéo qui a été choisie par le navigateur (mp4, webm ou 3gp)

Oui, avec la propriété currentSrc de l'élément video.
Par exemple, avec un élément video ayant pour id "mavideo" :

Code

document.addEventListener('DOMContentLoaded', function () {
    alert(document.getElementById('mavideo').currentSrc);
});

Pour ton autre problème de JS, je regarderai plus tard.

[Anard]

Merci beaucoup.

Ca fonctionne, sauf que je n'arrive pas à envoyer plusieurs variables par cette commande :

Code

var video = document.getElementById('mavideo').currentSrc;
video= video.replace (/.*(low|hd)\./, ''); //On récupère seulement le format (mp4, webm ou 3gp)
xhr.send('debit='+debit+'&video='+video);

J'ai essayé avec '&' à la place de '&' mais ça ne fonctionne pas non plus...
PHP reçoit une valeur debit correcte et une valeur video vide (elle est définie car isset($_POST['video']) renvoie quelquechose, mais sa valeur est "undefined").
Du coup j'utilise ce code :

Code

xhr.send('debit='+debit+'-'+video);

Et j'utilise un explode('-',$_POST['debit']) en PHP pour dissocier les deux variables envoyées.

Encore une fois, je ne comprends pas pourquoi le code d'Ybouane est plus réaliste avec une image plus petite et en utilisant Date.getTime() au lieu de performance.now()...

Ce message a été modifié par Anard - 12 Nov 2015, 10:52.

[Anard]

Petite journée de passée à installer Windows 10 en triple boot.
Maintenant, je peux faire des tests avec Internet Explorer en mode emulation pour vérifier le fonctionnement du site sous IE5-6-7-8-9-10-11 et Edge.
Résultat :
L'intégration du lecteur Flash permet la lecture de la vidéo sous IE 5 à 8.
Par contre, à partir de IE9, le code Javascript a l'air de bugger (le test commence mais ne se termine pas).

J'ai ajouté dans l'entête html (balises head):

Code

<!--Ajout des balises header, section, aside, ... de EventListener (JS) et autres pour IE8-->
      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/ie8/0.2.6/ie8.js"></script>
      <script src="JS/ajouts-IE8.js"></script>
<![endif]-->

ajouts-IE8.js :
// Ajout des fonctions Date.now() et performance.now() plus précises que Date.getTime
(function(){

  if ("performance" in window == false) {
      window.performance = {};
  }
  
  Date.now = (Date.now || function () {  // thanks IE8
      return new Date().getTime();
  });

  if ("now" in window.performance == false){
    
    var nowOffset = Date.now();
    
    if (performance.timing && performance.timing.navigationStart){
      nowOffset = performance.timing.navigationStart
    }

    window.performance.now = function now(){
      return Date.now() - nowOffset;
    }
  }

})();

Il semble d'abord qu'au moins un de ces scripts devrait être utilisé pour IE9 également (<!--[if lte IE 9]>) et que même sous IE 8, l'un d'eux au moins ne fonctionne pas...

Après, il faut relativiser, d'après Google Analytics, les utilisateurs qui utilisent IE<10 représentent 4,5% du total des visites sur le site sur 1 an...
Mais encore une fois, une limite sur le temps d'execution du code JS pourrait pallier à tous les problèmes : je pourrais considérer que si le navigateur n'est pas en mesure de faire le test jusqu'au bout, il est trop ancien et je peux envoyer la qualité dégradée de la vidéo.

EDIT : Ca avance :
IE 9 utilise déjà la version Flash. Du coup, il n'aimait pas trop que je lui demande la source utilisée (elle était "undefined").
En faisant ça, ça roule :

Code

var video = document.getElementById('mavideo').currentSrc;
if (video) { video= video.replace (/.*(low|hd)\./, ''); }
else { video = 'mp4'; } //c'est que c'était une source flash...

Pour IE 8, j'ai retiré <script src="http://cdnjs.cloudflare.com/ajax/libs/ie8/0.2.6/ie8.js"></script>
et remplacé dans le script :

Code

function addEvent(evnt, elem, func) {
   if (elem.addEventListener)  // Version classique
      elem.addEventListener(evnt,func,false);
   else if (elem.attachEvent) { // Version pour IE
      elem.attachEvent("on"+evnt, func);
   }
   else { // No much to do
      elem[evnt] = func;
   }
}
(function (window, document) {
    addEvent('load', window, function () {
        // Fenêtre chargée (etc...)

Il a ensuite fallu que je remplace performance.now() par Date.now() (mon script ajouts-IE8.js ne doit pas très bien fonctionner...), ça fonctionne parfaitement partout, jusqu'à IE5 (d'après l'émulateur d'Internet Explorer 11).
J'ai pu tester sur Safari 5 (sur Windows) : il est le seul à ne pas pouvoir lire la vidéo (ni html5, ni flash) mais le test se fait correctement.

EDIT : Désorais en ligne, le site test.accordeons-fratelibenar.fr n'est plus accessible, mais le résultat est visible ici : http://www.accordeons-fratelibenar.fr/corbinola.html

Ce message a été modifié par Anard - 14 Nov 2015, 11:07.