2
59

Diffuser une vidéo sur un site web

Grâce à Longtail video, diffuser un contenu vidéo ou audio à partir d'un site web est vraiment simple.

Téléchargez le JW Player for Flash v5. Ouvrez l'archive mediaplayer.zip.

Organisez le contenu de votre site en créant dans la racine du site les dossiers longtail pour les fichiers de Longtail, images pour les images, files pour les fichiers en téléchargement, videos pour les vidéos et js pour les programmes en Javascript.

  1. /
    1. longtail
      1. player.swf
    2. images
      1. noscript.jpg
    3. videos
      1. longtail.flv
      2. longtail.jpg
    4. files
      1. longtail.html
    5. js
      1. swobject.js

Copiez le lecteur Flash player.swf dans le dossier longtail et le code Javascript swobject.js dans le dossier js. Copiez l'image fixe preview.jpg et la vidéo video.flv dans le dossier videos en les renommant longtail.jpg et longtail.flv. Vérifiez les droits de lecture.

Créez un script appelé longtail.html dans le dossier files avec le contenu suivant :

  1. <script type="text/javascript" src="/js/swfobject.js"></script>
  2. <div id="longtailvideo" class="longtail"></div>
  3. <script type="text/javascript">
  4. var so = new SWFObject("/longtail/player.swf","longtailvideo","320","264","9","#FFFFFF");
  5.  
  6. so.addParam("allowfullscreen","true");
  7. so.addParam("allowscriptaccess","always");
  8. so.addParam("wmode","opaque");
  9.  
  10. so.addVariable("image","/files/folder/videos/longtail.jpg");
  11. so.addVariable("file","/files/folder/videos/longtail.flv");
  12. so.addVariable("controlbar","bottom");
  13. so.addVariable("duration","27");
  14. so.addVariable("icons","true");
  15. so.addVariable("repeat","none");
  16. so.addVariable("autostart","false");
  17.  
  18. so.write("longtailvideo");
  19. </script>
  20. <noscript>
  21. <p><img width="100" height="50" src="/images/noscript.jpg" alt=""/></p>
  22. </noscript>

La première ligne charge le fichier Javascript swfobject.js qui définit l'objet SWFObject. Le paragraphe avec l'id longtailvideo est volontairement laissé vide. Il contiendra le lecteur Flash. Le script crée le lecteur en spécifiant le chemin relatif vers le code Flash, l'id du lecteur, la largeur et la hauteur de l'affichage, le numéro de version du greffon Flash compatible avec le lecteur et la couleur de fond. Le reste du code configure le lecteur, en particulier les URLs de la vidéo et de l'image fixe. La dernière ligne remplace le paragraphe nommé longtail par le lecteur.

IMPORTANT : Pensez à remplacer un ? par %3F, un * par %3D et un & par %26 dans une URL.

Changez les valeurs des variables image et file pour diffuser un autre contenu. Ajoutez la hauteur de la barre de contrôle, 24 pixels, à la hauteur de la vidéo, 240 pixels, pour obtenir la hauteur total de l'affichage, 264 pixels. Initialisez la variable duration à la longueur de la vidéo en secondes.

Pour démarrer la lecture de la vidéo directement à la fin du chargement de la page, mettez la variable autostart à true. Pour lire la vidéo en boucle, mettez la variable repeat à always. Pour masquer l'icône sur l'image fixe et la barre de contrôle, mettez la variable icons à false et la variable controlbar à none et retirez 24 pixels de la hauteur de l'affichage.

Toutes les options disponibles sont décrites dans le wiki du lecteur.

Le contenu de la balise <noscript> tente d'afficher une image d'alerte si Javascript est désactivé auquel cas le lecteur ne peut pas fonctionner. Copiez l'image noscript.jpg dans le dossier images.

Vous pouvez afficher un texte explicatif mais opter pour une image limite l'indexation par les moteurs de recherche.

Activez Javascript pour lire la vidéo !

Pour lire des vidéos à partir de YouTube, copiez le fichier appelé yt.swf de l'archive mediaplayer.zip dans le dossier longtail où vous avez déjà copié le lecteur Flash player.swf. NOTE : Depuis la version 5.6, yt.swf n'est plus nécessaire.

Créez un script dont la variable file donne l'URL complète de la vidéo sur YouTube.

  1. <script type="text/javascript" src="/js/swfobject.js"></script>
  2. <div id="rolltop" class="longtail"></div>
  3. <script type="text/javascript">
  4. var so = new SWFObject("/longtail/player.swf","rolltop","224","208","9","#FFFFFF");
  5.  
  6. so.addParam("allowfullscreen","false");
  7. so.addParam("allowscriptaccess","always");
  8. so.addParam("wmode","opaque");
  9.  
  10. so.addVariable("image","/files/folder/videos/rolltop.jpg");
  11. so.addVariable("file","http://www.youtube.com/watch?v=7H0K1k54t6A");
  12. so.addVariable("provider","youtube");
  13. so.addVariable("icons","false");
  14.  
  15. so.addVariable("skin","/longtail/glow.zip");
  16.  
  17. so.write("rolltop");
  18. </script>
  19. <noscript>
  20. <p><img width="100" height="50" src="/images/noscript.jpg" alt=""/></p>
  21. </noscript>

Si l'URL désigne un serveur RTMP, mettez provider à rtmp.

Remarquez le paramètre skin qui change l'apparence du lecteur. Vous pouvez télécharger d'autres habillages ici.

Pour lire une piste audio, créez un script avec file à l'adresse d'un fichier MP3 ou AAC et provider à sound, ajoutez une image si vous voulez, réduisez la taille du lecteur au minimum :

  1. <script type="text/javascript" src="/js/swfobject.js"></script>
  2. <div id="smokeloop" class="longtail"></div>
  3. <script type="text/javascript">
  4. var so = new SWFObject("/longtail/player.swf","smokeloop","250","31","9","#FFFFFF");
  5.  
  6. so.addParam("allowfullscreen","false");
  7. so.addParam("allowscriptaccess","always");
  8. so.addParam("wmode","opaque");
  9.  
  10. so.addVariable("file","/files/folder/sounds/smoke.mp3");
  11. so.addVariable("provider","sound");
  12. so.addVariable("icons","false");
  13.  
  14. so.addVariable("skin","/longtail/modieus.zip");
  15.  
  16. so.write("smokeloop");
  17. </script>
  18. <noscript>
  19. <p><img width="100" height="50" src="/images/noscript.jpg" alt=""/></p>
  20. </noscript>

Le lecteur 5.3 a introduit une nouvelle API JavaScript qui a l'avantage de masquer les différences entre Flash et le HTML5.

Le document charge jwplayer.js, le code en Javascript de Longtail, puis passe l'id de la <div> qui sera remplacée par le lecteur à la fonction jwplayer et une série de paramètres de configuration à la fonction setup. Remarquez que les paramètres sont pratiquement identiques à ceux de la version Flash mais que la vidéo peut maintenant être encodée en H264/AAC dans un conteneur M4V.

  1. <script type="text/javascript" src="/js/jwplayer.js"></script>
  2. <div id="thanatos"></div>
  3. <script type="text/javascript">
  4. jwplayer('thanatos').setup({
  5.     'flashplayer': '/longtail/player.swf',
  6.     'id': 'thanatos',
  7.     'width': '100',
  8.     'height': '24',
  9.     'file': '/files/folder/sounds/thanatos.m4a',
  10.     'duration' : '18',
  11.     'controlbar': 'bottom',
  12.     'skin': '/longtail/simple.zip'
  13. });
  14. </script>

  1. <div class="longtail">
  2. <video class="noprint" id="yt" src="http://www.youtube.com/watch?v=BeP80btBxIE" width="320" height="240"></video>
  3. <script type="text/javascript" src="/js/jwplayer.js"></script>
  4. <script type="text/javascript">
  5. jwplayer('yt').setup({ flashplayer: '/longtail/player.swf' });
  6. </script>
  7. </div>
Format des fichiers audio et vidéo

Pour transcoder vos fichiers audio ou vidéo, utilisez ffmpeg et mencoder.

Pour redimensionner une vidéo, calculez le rapport entre sa largeur et sa hauteur - 320 / 240 = 1.33 - et préservez son aspect en divisant les deux dimensions par le même facteur :

$ ffmpeg -i longtail.flv -s 160x120 -aspect 1.33 -y video.flv

Pour prendre une photo d'une vidéo, générez une série d'instantanés à la bonne taille :

$ ffmpeg -i longtail.flv -s 160x120 -r 1 snap-%03d.jpg

Appuyez sur q après un court instant pour arrêter le programme et choisissez une des images snap-*.jpg.

Pour convertir un WMA en MP3 :

$ ffmpeg -i audio.wma -acodec libmp3lame -ar 22050 -ab 64k audio.mp3

Cette commande règle la fréquence d'échantillonnage à 22050 Hz et le débit à 64k.

Pour convertir un MP3 en AAC dans un conteneur MP4 :

$ ffmpeg -i audio.mp3 -f wav - | faac - -b 96 -ws -o audio.m4a

Ou plus simplement :

$ ffmpeg -i audio.mp3 audio.m4a

Pour convertir une vidéo en FLV en MP4 :

$ ffmpeg -i video.flv video.m4v

Lisez l'article Transcoder des fichiers audio ou vidéo pour apprendre comment convertir les différents formats.

Commentaires

Votre commentaire :
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip aide 2000

===

Entrez un maximum de 2000 caractères.
Améliorez la présentation de votre texte avec les balises de formatage suivantes :
[p]paragraphe[/p], [b]gras[/b], [i]italique[/i], [u]souligné[/u], [s]barré[/s], [quote]citation[/quote], [pre]tel quel[/pre], [br]à la ligne,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]commande[/code], [code=langage]code source en c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].