Lecteur vidéo web qui switch suivant le débit ?

Lecteur vidéo web qui switch suivant le débit ? - Javascript/Node.js - Programmation

Marsh Posté le 20-11-2020 à 16:25:49    

Salut,
 
Je cherche un lecteur vidéo qui puisse switcher la qualité du fichier vidéo selon la vitesse de connec de l'utilisateur, exactement comme le fait youtube.
Je cherche pas un lecteur " cloud" ou faut payer un abo mensuel, plutôt un truc que je peux rapatrier, payant ou gratuit peu importe.
IL y a beaucoup..... beaucoup.... de lecteur gratuit ou payant sur le web, html5, js etc, des centaines, dont la moitié abandonné par leur auteur, par contre j'en trouve pas qui fasse correctement ce que je cherche.
 
Quelqu'un aurait une piste ?

Reply

Marsh Posté le 20-11-2020 à 16:25:49   

Reply

Marsh Posté le 20-11-2020 à 16:57:38    

Tu peux t'en sortir avec le player par default des navigateurs:
https://stackoverflow.com/questions [...] y-versions
 
Maintenant pour avoir un aglo qui soit capable de "auto switcher" il te faut juste mesurer la position de la video et apres X secondes, si il y a un decalage alors la personne a du soit faire pause (donc faut aussi regarder ca), soit que la video ne peut pas etre lue a 1x... Donc downgrade.

Reply

Marsh Posté le 21-11-2020 à 10:50:39    

Salut,
 
Je te remercie pour ta réponse.
 
Effectivement il y a bien le player par défaut des navigateur avec le HTML5.
 
Pour l'auto switcher il y a ce script :
 
https://hls-js.netlify.app/demo/
 
 
Donc la on va me dire, ok j'ai la solution à mon problème tout est ok.
 
Le soucis c'est que c'est compatible a peu pret sur toute plateforme
 
SAUF
 
sur ios  :fou:  :fou:  :fou:  :fou:  :fou:  :fou:  
 
 
Il y a bien pourtant une portion du script sur la page de démo qui parle de ce problème sur ios, avec semble t-il une solution, seuf que la solution ne fonctionne tout simplement pas sur mon iphone ios 13 safari: "your broswer does not support mediasource extension".
 
 

Citation :

// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
  // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
  // This is using the built-in support of the plain video element, without using hls.js.
  // Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
  // white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.


 
 
 

Code :
  1. <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  2. <!-- Or if you want a more recent canary version -->
  3. <!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
  4. <video id="video"></video>
  5. <script>
  6.   var video = document.getElementById('video');
  7.   if (Hls.isSupported()) {
  8.     var hls = new Hls();
  9.     hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
  10.     hls.attachMedia(video);
  11.     hls.on(Hls.Events.MANIFEST_PARSED, function() {
  12.       video.play();
  13.     });
  14.   }
  15. // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
  16.   // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
  17.   // This is using the built-in support of the plain video element, without using hls.js.
  18.   // Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
  19.   // white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
  20.   else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  21.     video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
  22.     video.addEventListener('loadedmetadata', function() {
  23.       video.play();
  24.     });
  25.   }
  26. </script>


 
 
Chez moi, sur mon iphone la vidéo ne se lance pas sur la démo.
 
 
D'après mes tests le fallback ne fonctionne pas. Cette partie la :
 

Code :
  1. else if (video.canPlayType('application/vnd.apple.mpegurl')) {


 
 


Message édité par Stellvia_fr le 21-11-2020 à 10:54:26
Reply

Marsh Posté le 21-11-2020 à 11:36:44    

Hum mais c'est ce script qui ne semble pas marcher sur iOs, il semble qu'une video html5 marche elle tres bien.
 
Donc il te faut grosso merdo implémenter cet algo toi même je pense tout simplement non?

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed