Auteur Sujet: Comment programmer un flux video fluide ?  (Lu 548 fois)

0 Membres et 1 Invité sur ce sujet

Hors ligne zakuli

  • Débutant
  • *
  • Messages: 90
    • E-mail
Comment programmer un flux video fluide ?
« le: 27 Novembre 2011 à 11:02:58 »
Bonjour,

Débutant dans la vidéo sur site web, j'utilise le player FLASH avec  le code ci-dessous. Ca marche mais lorsque je regarde la vidéo, j'ai beaucoup de coupure d'attente alors qu'avec la même vidéo installée sur mon site avec le code proposé par exemple par dailymotion, j'ai un flux régulier et sans interruption !

Comment programmer un flux aussi fluide qu'une video en provenance de site comme YouTube ou DailyMotion

Merci de vos réponses



Code utilisé : <object id="player1" type="application/x-shockwave-flash" data="art_fichiers/player_flv_maxi.swf" width="480" height="360">
<param name="movie" value="art_fichiers/player_flv_maxi.swf" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="configxml=fichier/video.flv />
</object>
Je m'occupe d'une asso qui assiste les asso de bénévoles à maîtriser leur informatique. Ca vous intéresse ? (www.taigas.com)

Hors ligne boulaneige

  • Connaisseur
  • ***
  • Messages: 335
    • http://www.boulaneige.com/
    • E-mail
Re : Comment programmer un flux video fluide ?
« Réponse #1 le: 27 Novembre 2011 à 20:00:19 »
Salut,

Regarde du côté de buffer.

Et configxml attend un fichier xml, pas la vidéo.

Ton code devrait plutôt ressembler à :

<param name="flashvars" value="flv=video.flv&amp;configxml=video.xml" />
* Petite scarabette *

Hors ligne zakuli

  • Débutant
  • *
  • Messages: 90
    • E-mail
Re : Comment programmer un flux video fluide ?
« Réponse #2 le: 28 Novembre 2011 à 12:16:50 »
Merci de ta réponse boulaneige,

Pour le buffer, est ce une donnée accessible en Php, dans php.ini ? Comment on le dimensionne ? N'est il pas commun avec une video que l'on importerai de YouTube ou de DailyMotion ?

Et je n'ai pas du bien comprendre ta proposition de code car quand je le mets en place, je n'ai plus aucune vidéo !
Je m'occupe d'une asso qui assiste les asso de bénévoles à maîtriser leur informatique. Ca vous intéresse ? (www.taigas.com)

Hors ligne boulaneige

  • Connaisseur
  • ***
  • Messages: 335
    • http://www.boulaneige.com/
    • E-mail
Re : Comment programmer un flux video fluide ?
« Réponse #3 le: 29 Novembre 2011 à 14:38:11 »
Non non, buffer est un paramètre du player.

Regarde bien la doc et les principaux paramètres : http://flv-player.net/fr/players/maxi/documentation/

Comment tu gères les paramètres ? Directement dans flashvar, via un fichier texte, via un fichier xml, en JS ?

EDIT : et attention au chemin des vidéos par rapport au player.
« Modifié: 29 Novembre 2011 à 14:41:04 par boulaneige »
* Petite scarabette *

Hors ligne zakuli

  • Débutant
  • *
  • Messages: 90
    • E-mail
Re : Comment programmer un flux video fluide ?
« Réponse #4 le: 29 Novembre 2011 à 23:36:09 »
Merci boulaneige,

J'ai du grain à moudre avec tout ça, j'espère que je vais trouver comment m'en servir.

A+
Je m'occupe d'une asso qui assiste les asso de bénévoles à maîtriser leur informatique. Ca vous intéresse ? (www.taigas.com)

Hors ligne boulaneige

  • Connaisseur
  • ***
  • Messages: 335
    • http://www.boulaneige.com/
    • E-mail
Re : Comment programmer un flux video fluide ?
« Réponse #5 le: 30 Novembre 2011 à 00:36:42 »
Essaie ceci :

<object id="player1" type="application/x-shockwave-flash" data="art_fichiers/player_flv_maxi.swf" width="480" height="360">
<param name="movie" value="art_fichiers/player_flv_maxi.swf" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="flv=fichier/video.flv&amp;buffer=10" />
</object>

J'ai mis 10 secondes de mémoire tampon (c'est 5 par défaut). Joue avec cette valeur et regarde si ça améliore les performances.

Si tu as plusieurs vidéos et des paramètres identiques pour toutes, l'idéal est d'utiliser un fichier xml (ou txt). Et pour les paramètres particuliers, indication directement dans l'élément.

Tu as également un générateur sur le site de l'éditeur. Sinon, si tu as Skype, on peut regarder ton code ensemble, en situation, sur ta page online.
* Petite scarabette *

Hors ligne zakuli

  • Débutant
  • *
  • Messages: 90
    • E-mail
Re : Comment programmer un flux video fluide ?
« Réponse #6 le: 01 Décembre 2011 à 08:39:16 »
Bonjour Boulaneige, et merci de ta patience

J'ai fait le test avec ce code :
<object id="player1" type="application/x-shockwave-flash" data="art_fichiers/player_flv_maxi.swf" width="480" height="360">
<param name="movie" value="art_fichiers/player_flv_maxi.swf" />
<param name="allowFullScreen" value="true" />
<param name="flv" value="video.flv" />
<param name="FlashVars" value="configxml=video.xml" />
</object>
et le fichier xml contenant tous les autres paramètres de diffusion dont le buffer à 10 comme tu le préconises (cf ci-dessous)

Bien sûr selon la rapidité de la connexion, les résultats donnés ci dessous seront différents, mais ce qu'il est intéressant de voir, c'est la différence nette qui apparaît entre la même vidéo vue via un fichier lu sur le site et celle stockée sur YouTube et transférée sur le site pour diffusion.

Pour visualiser la vidéo de YouTube le code suivant a été installé sur le site :
<iframe width="480" height="360" src="http://www.youtube.com/embed/*******?hl=fr&fs=1" frameborder="0" allowfullscreen></iframe>
La vidéo utilisée dure 26 secondes.

En plus des 26 secondes de la vidéo elle-même, la visualisation via YouTube nécessite  48 secondes d'arrêts (la rapidité internet était vraiment très mauvaise ce matin). 
Dans les mêmes conditions de rapidité internet, la visualisation de la vidéo stockée sur le site double les temps d'arrêt (102s).

Il me semble carrément anormal que la vidéo qui transite sur un circuit court (du serveur local au serveur local puis transfert au visiteur) ait des attentes de flux plus longues et fréquentes que sur le circuit long  (du serveur YouTube au serveur local puis transfert au visiteur)

Voila, je ne sais comment améliorer la situation, si tu as des idées, elles seront les bienvenues.

Cordialement

PS : le fichier xml complet contient :
<config>
<param name="autoplay" value="0" />
<param name="autoload" value="1" />
<param name="buffer" value="10" />
<param name="buffermessage" value="" />
<param name="buffercolor" value="ffffff" />
<param name="bufferbgcolor" value="FC0204" />
<param name="buffershowbg" value="1" />
<param name="title" value="" />
<param name="titlesize" value="20" />
<param name="titlecolor" value="f00f00" />
<param name="margin" value="0" />
<param name="srt" value="0" />
<param name="srtcolor" value="ffffff" /> //o:ffffff
<param name="srtbgcolor" value="464646" />
<param name="srtsize" value="11" /> //o:11
<param name="showstop" value="0" /> //o:1
<param name="showvolume" value="1" />
<param name="showtime" value="1" />
<param name="showplayer" value="autohide" />
<param name="showloading" value="autohide" />
<param name="showfullscreen" value="1" />
<param name="showswitchsubtitles" value="0" />
<param name="showmouse" value="always" />
<param name="loop" value="0" />
<param name="startimage" value="start_image.jpg" />
<param name="playercolor" value="FC0204" />
<param name="loadingcolor" value="999898" />
<param name="bgcolor" value="FC0204" />
<param name="bgcolor1" value="FC0204" />
<param name="bgcolor2" value="FC0204" />
<param name="buttoncolor" value="ffffff" />
<param name="buttonovercolor" value="dddcdc" />
<param name="slidercolor1" value="ffffff" />
<param name="slidercolor2" value="bbbbbb" />
<param name="sliderovercolor" value="dddcdc" />
<param name="loadonstop" value="0" />
<param name="onclick" value="playpause" />
<param name="onclicktarget" value="_blank" />
<param name="ondoubleclick" value="fullscreen" />
<param name="ondoubleclicktarget" value="_blank" />
<param name="playertimeout" value="1500" />
<param name="videobgcolor" value="000000" />
<param name="volume" value="100" />
<param name="shortcut" value="1" />
<param name="playeralpha" value="100" />
<param name="phpstream" value="0" />
<param name="srturl" value="video.srt" />
<param name="top1" value="1" />
<param name="showiconplay" value="1" />
<param name="iconplaycolor" value="FC0204" />
<param name="iconplaybgcolor" value="966464" />
<param name="iconplaybgalpha" value="25" />
<param name="showtitleandstartimage" value="1" />
</config>
Je m'occupe d'une asso qui assiste les asso de bénévoles à maîtriser leur informatique. Ca vous intéresse ? (www.taigas.com)

Hors ligne boulaneige

  • Connaisseur
  • ***
  • Messages: 335
    • http://www.boulaneige.com/
    • E-mail
Re : Comment programmer un flux video fluide ?
« Réponse #7 le: 01 Décembre 2011 à 11:51:35 »
Salut,

Non non, je ne préconise pas les 10 secondes, j'avais mis ça pour que tu testes et voir s'il ça améliore les perfs. J'ai plusieurs sites avec des vidéos, certaines assez longues, et je n'ai pas ce genre de problème, c'est curieux, surtout avec l'autoload activé.

Y'a que toi qui constate une telle lenteur ? Si tu veux, tu peux m'envoyer l'adresse de la page en MP, je te dirais si ça laggue. Parce que sinon, je ne vois pas, sorry :-(
* Petite scarabette *

Hors ligne Yannick!

  • Administrateur
  • Débutant
  • *****
  • Messages: 74
Re : Comment programmer un flux video fluide ?
« Réponse #8 le: 01 Décembre 2011 à 14:52:07 »
Bonjour,

Précision qui ne fera pas avancer votre problème.
Mais lorsque vous mettez un lien vers une vidéo youtube sur une page HTML, la vidéo ne transite pas par votre hébergement.
Une fois le HTML reçu par votre navigateur, votre navigateur appelle directement le serveur youtube pour charger la vidéo.
Le HTML n'est pas interprété côté serveur.

Yannick

Hors ligne zakuli

  • Débutant
  • *
  • Messages: 90
    • E-mail
Re : Comment programmer un flux video fluide ?
« Réponse #9 le: 01 Décembre 2011 à 15:08:35 »
Oui merci Yannick,
la précision est d'importance => pas de transfert de flux mais connexion directe. En faisant mon post ce matin je me disais bien que j'écrivais une bêtise (La flemme du cerveau à accepter l'évidence après avoir écrit le post sans doute)


Merci de ta proposition Boulaneige, pour l'essais, va sur mon site de test : http://essais.taigas.com, dans le menu "Actualités" / "En Bref", tu trouveras en tête une vignette "Essais Vidéo", cliques sur n'importe quel lien de la vignette et tu tomberas sur l'article d'essai qui m'a permis de te répondre ce matin.

Chez moi, pour les vidéos qui viennent du site :
  • temps avant démarrage très long
  • nombre d'arrêts élevé
  • temps d'arrêts cumulés très important

En direct sur YouTube
Je m'occupe d'une asso qui assiste les asso de bénévoles à maîtriser leur informatique. Ca vous intéresse ? (www.taigas.com)

Hors ligne boulaneige

  • Connaisseur
  • ***
  • Messages: 335
    • http://www.boulaneige.com/
    • E-mail
Re : Comment programmer un flux video fluide ?
« Réponse #10 le: 01 Décembre 2011 à 20:37:52 »
Euh... hormis les youtube j'ai aucune vidéo, juste 2 players. En même temps, aucune vidéo n'est appelée, que ce soit dans object ou dans le fichier xml...

Et sans vouloir te vexer, ton code source est monstreux ! 2 doctype, des balises <style> dans le body et j'en passe. Y'a un sacré ménage à faire ;-)
* Petite scarabette *

Hors ligne zakuli

  • Débutant
  • *
  • Messages: 90
    • E-mail
Re : Comment programmer un flux video fluide ?
« Réponse #11 le: 02 Décembre 2011 à 18:01:43 »
Bonjour Boulaneige,

Je ne suis pas trop étonné par ta réaction concernant le code, car bien que j'ai commencé ma vie en programmant sous pascal, ADA, puis C puis C++, j'ai arrêté très vite. Et ce n'est qu'à ma retraite que je me suis consacré à l'informatique en créant une association d'aide en informatique et en gestion aux associations peu argentées. Je me suis donc lancé dans html, php sur le tas sans rien connaître du web, avec des technologies qui avaient bien évoluées.

Si je crois structurer correctement l'écriture en PHP, tout ce qui est html (avec les styles particulièrement) css et javascriptest encore un peu obscur. Ce qui fait qu'il m'arrive certainement souvent de surcharger le PHP par manque de connaissances dans les autres techniques. Pour pouvoir servir rapidement les associations en sites Internet, j'ai décidé de faire un multi-sites uniquement personnalisé par une base de données et quelques images pour l'entête et le fond de page !  Ce qui n'est pas pour simplifier les choses !

Encore désolé de t'avoir fait peur avec mes monstres  :wacko:

D'ailleurs, si tu avais une page de référence en terme de programmation contenant du html (avec style), du Javascript et du PHP mélangé, ça me permettra peut être d'améliorer tout ça !

Pour ce qui est de l'essai, je n'y comprends plus rien, hier soir les vidéos était bien accessibles avec la programmation que je t'avais annoncée dans mon post, ce matin quand j'ai lu ton post, elles ne l'étaient plus. Je suis donc revenu à ma programmation antérieure, comme ça marchait, j'ai remis petit à petit le code correspondant à l'essai, ça remarchait très bien, et ce soir sans avoir rien touché, je n'y ai plus accès  !!!

Je crois qu'au lieu d'insérer cela dans un site  :wacko:, je vais écrire une page dédiée au test.
Je ne pense pas pouvoir le faire avant lundi, aussi bon week end  -_-
Je m'occupe d'une asso qui assiste les asso de bénévoles à maîtriser leur informatique. Ca vous intéresse ? (www.taigas.com)

Hors ligne boulaneige

  • Connaisseur
  • ***
  • Messages: 335
    • http://www.boulaneige.com/
    • E-mail
Re : Comment programmer un flux video fluide ?
« Réponse #12 le: 02 Décembre 2011 à 23:08:26 »
Tu vois bien qu'il y a des monstres sur tes pages, et en plus ils se nourrissent de vidéos ;-)

Alors, une page, finalement, c'est assez simple, qu'elle soit générée en php ou autre langage dynamique ne change rien, au final on a :
- du HTML qui structure le contenu
- du CSS qui se charge de la mise en forme/page
- du JS, idéalement en surcouche (donc non-intrusif) qui va se charger de "l'animation", interaction, etc.

Le plus important c'est la structure : quoi qu'il arrive avec CSS et/ou JS, la structure sera toujours présente, donc le contenu correctement présenté (même si c'est moche).

Je pense qu'un petit tour sur le site du zéro te permettrait de réviser et de mettre un peu d'ordre dans tout ça.

J'attends lundi pour la vidéo, et effectivement, une bonne idée de faire une page d'essais à part, car vu le nombre de JS, pas impossible qu'il y ai des conflits.

Bon week-end
* Petite scarabette *

Hors ligne Yannick!

  • Administrateur
  • Débutant
  • *****
  • Messages: 74
Re : Comment programmer un flux video fluide ?
« Réponse #13 le: 05 Décembre 2011 à 09:14:47 »
Bonjour,

Pour le HTML et les CSS je peux vous conseiller ce site http://www.alsacreations.com/ et son forum.
Le contenu est de qualité.

Yannick

Hors ligne zakuli

  • Débutant
  • *
  • Messages: 90
    • E-mail
Re : Comment programmer un flux video fluide ?
« Réponse #14 le: 06 Décembre 2011 à 13:13:41 »
Merci Yannick pour le lien.
Merci Boulaneige de ta patience,

car désolé, oui je suis en retard, décidément, plus ça va, plus le retraité a du boulot ! Une asso de solidarité internationale dont je m'occupe de toute la partie développement durable au Viêt Nam (micro-crédits, parrainages d'élèves) et une asso d'aide en informatique et en gestion pour les asso peu argentées (Assistance, sites internet, maintient des ordinateurs), ils ne me lâchent pas et je n'arrive plus à tenir mes engagements ! :rolleyes:

Bon, comme promis, j'essaie de faire la page simplifiée avec juste le minimum pour éditer la vidéo, mais ça ne marche pas !!!

Avec EasyPHP : Je vois bien le "player" avec les boutons et tout..., mais quand je lance la vidéo => écran vidéo noir
Sur tests.taigas.com/video/lecture.php : "Incident en cours. Merci de votre comprehension".

Où est le problème, je ne comprends pas ! Merci de m'indiquer une piste de recherche

J'ai dans le répertoire de travail les fichiers : player_flv_maxi.swf; start_frame.jpg; style.css; video.xml; video.flv (lisible sans problème sur VLC) et le script PHP ci dessous
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Essai Video Lecture</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table>
  <tr>
    <td>
      <object id="player1" type="application/x-shockwave-flash" data="player_flv_maxi.swf" width="480" height="360">
        <param name="flv" value="video.flv" />
        <param name="FlashVars" value="configxml=video.xml" />
      </object>
    </td>
  </tr>
</table>
</body>

Le contenu du fichier video.xml est :
<config>
<param name="movie" value="player_flv_maxi.swf" />
<param name="allowFullScreen" value="true" />
<param name="autoplay" value="0" />
<param name="autoload" value="1" />
<param name="buffer" value="10" />
<param name="buffermessage" value="" />
<param name="buffercolor" value="ffffff" />
<param name="bufferbgcolor" value="FC0204" />
<param name="buffershowbg" value="1" />
<param name="title" value="" />
<param name="titlesize" value="20" />
<param name="titlecolor" value="f00f00" />
<param name="margin" value="0" />
<param name="srt" value="0" />
<param name="srtcolor" value="ffffff" />
<param name="srtbgcolor" value="464646" />
<param name="srtsize" value="11" />
<param name="showstop" value="0" />
<param name="showvolume" value="1" />
<param name="showtime" value="1" />
<param name="showplayer" value="autohide" />
<param name="showloading" value="autohide" />
<param name="showfullscreen" value="1" />
<param name="showswitchsubtitles" value="0" />
<param name="showmouse" value="always" />
<param name="loop" value="0" />
<param name="startimage" value="start_image.jpg" />
<param name="playercolor" value="FC0204" />
<param name="loadingcolor" value="999898" />
<param name="bgcolor" value="FC0204" />
<param name="bgcolor1" value="FC0204" />
<param name="bgcolor2" value="FC0204" />
<param name="buttoncolor" value="ffffff" />
<param name="buttonovercolor" value="dddcdc" />
<param name="slidercolor1" value="ffffff" />
<param name="slidercolor2" value="bbbbbb" />
<param name="sliderovercolor" value="dddcdc" />
<param name="loadonstop" value="0" />
<param name="onclick" value="playpause" />
<param name="onclicktarget" value="_blank" />
<param name="ondoubleclick" value="fullscreen" />
<param name="ondoubleclicktarget" value="_blank" />
<param name="playertimeout" value="1500" />
<param name="videobgcolor" value="000000" />
<param name="volume" value="100" />
<param name="shortcut" value="1" />
<param name="playeralpha" value="100" />
<param name="phpstream" value="0" />
<param name="srturl" value="video.srt" />
<param name="top1" value="1" /> //?
<param name="showiconplay" value="1" />
<param name="iconplaycolor" value="FC0204" />
<param name="iconplaybgcolor" value="966464" />
<param name="iconplaybgalpha" value="25" />
<param name="showtitleandstartimage" value="1" />
</config>
Je m'occupe d'une asso qui assiste les asso de bénévoles à maîtriser leur informatique. Ca vous intéresse ? (www.taigas.com)